摘要：1. index.html代码部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>天猫精选-上天猫,就够了</title><link rel="stylesheet"
1. index.html代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天猫精选-上天猫,就够了</title>
<link rel="stylesheet" href="static/css/style.css" type="text/css">
<link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
</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="">我的淘宝<i class="fa fa-angle-down" style="color: #6d6e6a;"></i></a>
<div class="number">
<a href="">已买到的宝贝</a><br>
<a href="">已卖出的宝贝</a>
</div>
</li>
<li><a href=""><i class="fa fa-shopping-cart"></i> 购物车0件</a></li>
<li><a href="">收藏夹<i class="fa fa-angle-down" style="color: #6d6e6a;"></i></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-mobile"></i> 手机版</a></li>
<li><a href="">淘宝网</a></li>
<li><a href="">商家支持<i class="fa fa-angle-down" style="color: #6d6e6a;"></i></a>
<div class="support">
<p>商家:</p>
<a href="">商家中心</a>
<a href="">天猫规则</a><br>
<a href="">商家入驻</a>
<a href="">运营服务</a><br>
<a href="">商家品控</a>
<a href="">商家工具</a><br>
<a href="">天猫智库</a>
<a href="">喵言喵语</a><br>
<!-- <span></span> -->
<p>帮助:</p>
<a href="">帮助中心</a>
<a href="">问商友 </a><br>
</div>
</li>
<li><a href=""><i class="fa fa-list-ul"></i> 网站导航<i class="fa fa-angle-down" style="color: #6d6e6a;"></i></a>
<div id="website">
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
2. CSS样式部分
* {margin: 0px;padding: 0px;}
ul {list-style: none;}
a {text-decoration: none;color: #6d6e6a;}
body {font-size: 13px;}
.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: 8px 0px;}
.dope {width: 100px;position: absolute;left: 0px;top: 35px;line-height: 23px;padding: 8px 0px;}
.support {width: 150px;position: absolute;right: 0px;top: 35px;line-height: 23px;padding: 8px 0px;}
.support p {text-align: left;margin-left:15px;}
/* .support span {width: 150px;border-bottom: 1px solid #6d6e6a;display: inline-block;} */
#website {width: 1300px;height: 250px;position: absolute;right: 0px;top: 35px;}
.right li:hover div {display: block;}
批改老师：查无此人批改时间：2019-05-14 09:16:09
老师总结：完成的不错。想学好编程，就要多看别人代码，多模仿别人功能。继续加油。
