摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>PHP中文网</title><style type="text/css">*{margin: 0px;padding:0px;}a{text-decoration:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
<style type="text/css">
*{margin: 0px;padding:0px;}
a{text-decoration: none;color: #fff;}
.head{height: 60px;width: 100%;background-color: #000;color: #fff;}
.head-left {line-height: 60px;}
.head-left li{margin-right:15px;list-style: none;float: left;font-size: 11px;width:60px;height: 56px;text-align: center;}
.head-left li:hover{border-top: 2px solid red;border-bottom: 2px solid red;padding-bottom: -2px}
.head-logo{float: left;height: 60px;width: 150px;display: inline-block;text-align: center;border:1px solid red;font-size:20px}
.clear{clear: both;}
.head-right{float: right;width: 200px;height: 60px;}
.head-right li{float:left;list-style: none;;background-color: #fff;height: 40px;width:40px;margin:10px 20px;border-radius: 50px;line-height: 40px;text-align: center;color: red;}
</style>
</head>
<body>
<div>
<div>
<ul>
<div ><a href=""><span>LOGO</span></a></div>
<li style="margin-left:10px"><a href="">首页 </a></li>
<li><a href="">视频教程</a></li>
<li><a href="">社区问答</a></li>
<li><a href="">编程词典</a></li>
<li><a href="">手册下载</a></li>
<li><a href="">工具下载</a></li>
<li><a href="">菜鸟学堂</a></li>
</ul>
</div>
<div>
<ul>
<li>消息</li>
<li>头像</li>
</ul>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-28 09:10:43
老师总结：完成的不错！布局条理清楚，但是嵌套的时候不要把ul直接套在div外面
