<!doctype html><html><head><meta charset="utf-8"><title>百度任务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="#">导航链接一</a></li><li><a href="#">导航链接二</a></li><li><a href="#">导航链接三</a></li><li><a href="#">导航链接四</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>这是全部的代码。我加上效果图。下面的死歌导航LI标签怎么放到黑色部分去就像这张图的效果
2 回答
甜甜圈1991
TA贡献4条经验 获得超8个赞
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度任务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="#">导航链接一</a></li>
<li><a href="#">导航链接二</a></li>
<li><a href="#">导航链接三</a></li>
<li><a href="#">导航链接四</a></li>
</ul>
</div>
</div>
</body>
</html>
- 2 回答
- 0 关注
- 4703 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消