摘要：<!DOCTYPE html> <html> <head> <title>天猫精选-上天猫，就够了</title> <meta charset="utf-8"> <link href="static/css/style.css"
<!DOCTYPE html> <html> <head> <title>天猫精选-上天猫，就够了</title> <meta charset="utf-8"> <link href="static/css/style.css" rel="stylesheet" type="text/css"> <link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon" /> <link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <!-- 头部导航 --> <div class="top"> <div class="content"> <div class="left"> <a href=""> 喵，欢迎来到天猫</a> <a href="">请登录</a> <a href="">免费注册</a> </div> <ul class="right"> <li><a href="">我的淘宝</a> <div class="number"> <a href="">已买到的宝贝</a><br> <a href="">已卖出的宝贝</a> </div> </li> <li><a href=""><i class="fa fa-heart"></i> 我关注的品牌 </a></li> <li><a href=""><i class="fa fa-shopping-cart"></i> 购物车0件</a></li> <li><a href="">收藏夹</a> <div class="dope"> <a href="">收藏的宝贝</a><br> <a href="">收藏的店铺</a> </div> </li> <li><a href="">|</a></li> <li><a href=""><i class="fa fa-android"></i> 手机版</a></li> <li><a href="">淘宝网</a></li> <li><a href="">网页导航</a> <div id="website"> </div> </li> </ul> </div> </div> </body> </html>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
a{text-decoration: none;color: #6D6E6A;}
body{font-size: 12px;}
.top{background: #f2f2f2;height: 35px;}
.content{height: 35px;line-height: 35px;width: 1300px;margin: 0px auto;}
.left{width: 300px;float: left;}
.left a{margin-right:17px;}
.right{float: right;}
.right li{float: left;margin-right:17px;position:relative; }
.right li i{color: red;}
.content a:hover{color: red;}
.right li div{box-shadow: 2px 1px 5px #ccc;background: #fff;text-align: center;display:none; }
.number{width: 115px;position: absolute;left: 0px;top:35px;line-height: 23px;padding: 10px 0px; }
.dope{width: 100px;position:absolute; left: 0px;top:35px;line-height: 23px;padding: 10px 0px; }
#website{width: 1300px;height: 250px;position: absolute;right: 0px;top: 35px;}
.right li:hover div{display: block;}复习布局，调css
批改老师：灭绝师太批改时间：2018-11-27 09:14:02
老师总结：html+css入门简单，想要精通还是需要下功夫的，继续加油！
