如何將導航欄放在左側
[英]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.