<!doctype html><html><head><meta charset="utf-8"><title>百度任務(wù)2</title><style type="text/css">*{margin:0;padding:0;}#header{width:100%;background-color:#121010;}#header img{width:282px;height:50px;}#header ul{display:inline-block;float:right;width:100%;padding:0;margin:0;list-style-type:none;}#header li{width:7em;text-decoration:none;color:white;padding:0.2em 0.6em;}#header a:hover{background-color:#F5F5F5;}#header li{display:inline;}</style></head><body><div id="header"><img src="iamge/QQ圖片20161114121120.png" alt="logo"><div><ul><li><a href="#">導(dǎo)航鏈接一</a></li><li><a href="#">導(dǎo)航鏈接二</a></li><li><a href="#">導(dǎo)航鏈接三</a></li><li><a href="#">導(dǎo)航鏈接四</a></li></ul></div></div><div class="main"><div class="top1"></div><div class="top2"></div><div class='top3"></div><div class="top4"></div></div><div class="footer"></div></body></html>這是全部的代碼。我加上效果圖。下面的死歌導(dǎo)航LI標(biāo)簽怎么放到黑色部分去就像這張圖的效果
2 回答
甜甜圈1991
TA貢獻(xiàn)4條經(jīng)驗 獲得超8個贊
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度任務(wù)2</title>
<style type="text/css">
*{margin:0;padding:0; color:red; }?
#header{ background-color:#121010; background:#000; height:50px; padding:5px;}
??
#header img{width:282px;height:50px;float:left;}
#header #nav ul{list-style-type:none; height:50px; background:green; line-height:50px; margin-left:30px; float:left;}
#header #nav ul li{width:100px; display:inline-block; text-decoration:none; color:white; background:yellow;text-align:center}
#header #nav ul li a{display:block;}
#header #nav ul li a:hover{background-color:#F5F5F5;}?
?
</style>
</head>
<body>
<div id="header">
<div class="logo">
<img src="bd_logo1.png" alt="logo">
? ? </div>
<div id="nav">
? ? ? ? <ul>
? ? ? ? <li><a href="#">導(dǎo)航鏈接一</a></li>
? ? ? ? <li><a href="#">導(dǎo)航鏈接二</a></li>
? ? ? ? <li><a href="#">導(dǎo)航鏈接三</a></li>
? ? ? ? <li><a href="#">導(dǎo)航鏈接四</a></li>
? ? ? ? </ul>
? ? ?</div>
</div>?
?
</body>
</html>
-
曉白菜謝謝前輩的指導(dǎo)，非常感謝大家的幫忙，白菜在這里拜謝了
渺渺愛學(xué)習(xí)
TA貢獻(xiàn)2條經(jīng)驗 獲得超1個贊
可以把第二個div換成span標(biāo)簽，img也用span標(biāo)簽包裹，span是一個行級標(biāo)簽，可以讓你的內(nèi)容在一行顯示。
添加回答
舉報
0/150
提交
取消