如何将导航栏放在左侧
[英]How do i put my Navigation Bar on the left
问题描述
我在将导航栏放在简单网页的左侧时遇到了麻烦。 它必须在标题部分下面。 这是整个HTML代码。
<html>
<head>
<title>My Homepage</title>
</head>
<style>
#header{
width:800px;
height:200px;
background-color:yellow;
}
#footer{
width:800px;
height:100px;
background-color:red;
clear:both;
}
#nav{
width:200px;
height:400px;
background-color:pink;
float:left;
}
#con{
width:800px;
height:400px;
background-color:gray;
}
</style>
<body>
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
我在将导航栏放在简单网页的左侧时遇到了麻烦。 它必须在标题部分下面。
2 个解决方案
解决方案1
0 2016-07-03 17:31:59
如果将导航标记向上移动到结束标头div的正下方，则CSS实际上将完美地工作：
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
解决方案2
0 2016-07-03 17:36:04
请参考代码进行制作
#nav {
width: 100%;
height: auto;
background-color: pink;
float: left;
}
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50">
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg" alt="pup" height="50" width="50"></div>
</div>
如何将 header 放在导航栏上方？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.