摘要：<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS中的定位+浮动</title> <style> body{margin:0; padding:0;} .top{margin:0
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS中的定位+浮动</title>
<style>
body{margin:0; padding:0;}
.top{margin:0 auto; width:980px; height:80px; background:#333; margin-bottom:10px;}
.top .logo{float:left;width:300px; height:80px; text-align:center;}
.top .banner{background: url(http://www.php.cn/static/images/bg-teacher.png) no-repeat center;background-size:cover; width:680px; height:80px; line-height:80px;float:right; overflow:hidden;}
.top .banner img{width:100%;}
.main{ margin:0 auto;width:980px; height:45px; line-height:45px; background:#666; color:#FFF;}
.main ul{margin:0; padding:0; list-style-type:none;}
.main ul li{float:left; width:162px; line-height:45px; text-align:center;}
.main ul li a{ text-decoration:none; color:#FFF;}
.main ul li a:hover{color:#ccc;}
.line{border-right:1px solid #999;}
</style>
</head>
<body>
<div class="top">
<div class="logo"><img src="http://www.php.cn/static/images/logo.png"></div>
<div class="banner"></div>
</div>
<div class="main">
<ul>
<li class="line"><a href="#">首页</a></li>
<li class="line"><a href="#">HTML教程</a></li>
<li class="line"><a href="#">PHP教程</a></li>
<li class="line"><a href="#">JAVA教程</a></li>
<li class="line"><a href="#">MySql教程</a></li>
<li><a href="#">小程序教程</a></li>
</ul>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-01 09:20:02
老师总结：写的很不错 css中定位和浮动算的上是比较难点的 不过多练习 还是很简单的 继续加油吧！
