abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淘宝网</title>
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1257000_89gg54nh7po.css">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.iconfonts {
margin: 0px 0px 0px 0px;
float: left;
color: coral;
}
.iconfontss {
margin: 0px 5px;
float: left;
}
.margins {
margin-left: 16px;
}
a {
text-decoration: none;
color: black;
}
a[href='##'] {
color: chocolate;
}
a:hover {
color: chocolate;
}
.clear {
clear: both;
}
ul li {
list-style: none;
float: left;
font-size: 12px;
margin-left: 8px;
}
.top_menu {
height: 50px;
}
.content {
width: 1200px;
height: 36px;
line-height: 36px;
text-align: center;
margin: 0px auto;
}
.left {
float: left;
}
.right {
float: right;
}
.list ul {
border: 1px solid #f5f5f5;
margin: 0px 0px 0px 38px;
display: none;
}
.list ul li {
clear: both;
width: 80px;
text-align: left;
margin: 0px -40px;
}
.lists:hover ul {
display: block;
position: absolute;
}
.lists {
position: relative;
}
</style>
</head>
<body>
<!-- 跟着老师的视频做了这个导航。但是写的方法跟老师的不太一样。还有些地方老师加了浮动，我没有加也能正常显示。现在虽然能写出来，但是懵懵懂懂，可能写的多了自己就明白了-->
<div class="top_menu">
<div class="content">
<div class="left">
<ul>
<li class="lists">中国大陆
<div class="list">
<ul>
<li>中国大陆</li>
<li>中国台湾</li>
<li>中国香港</li>
<li>美国</li>
<li>韩国</li>
</ul>
</div>
</li>
<i class="iconfont iconRectangleCopy iconfontss"></i>
<li><a href="##">亲，请登录</a> </li>
<li><a href="#">免费注册</a></li>
<li class="margins"><a href="#">手机逛淘宝</a></li>
</ul>
</div>
<div class="right">
<ul>
<li class="lists"><a href="">我的淘宝</a>
<div class="list">
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</div>
</li>
<i class="iconfont iconRectangleCopy iconfontss"></i>
<li><a href=""></a>
<i class="iconfont iconicon-test iconfonts"></i>
<a href="#">购物车</a>
</li>
<i class="iconfont iconRectangleCopy iconfontss"></i>
<li class="lists"><a href=""></a>
<i class="iconfont iconaixin iconfonts"></i>
<a href="#">收藏夹</a>
<div class="list">
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</div>
</li>
<i class="iconfont iconRectangleCopy iconfontss"></i>
<li><a href=""></a>商品分类</li>
<i class=" iconfont iconvertical_line iconfontss"></i>
<li><a href=""></a>千牛卖家中心</li>
<i class="iconfont iconRectangleCopy iconfontss"></i>
<li><a href=""></a>联系客服</li>
<i class="iconfont iconRectangleCopy iconfontss"></i>
<li><a href=""></a>
<i class="iconfont icondingdan iconfonts"></i>网站导航
</li>
<i class="iconfont iconRectangleCopy iconfontss"></i>
</ul>
</div>
</div>
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-06-25 17:48:51
Teacher's summary：完成的不错。学编程，先从模仿开始，继续加油。