摘要：HTML代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>淘宝导航</title><link rel="stylesheet" href="index.css&qu
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝导航</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header-content">
<div class="header-left">
<a href="" class="header-a">中国大陆 <i class="fa fa-angle-down"></i></a>
<a href="" style="color:#ff5000;">亲,请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="header-right">
<a href="" class="header-a">我的淘宝 <i class="fa fa-angle-down"></i></a>
<a href=""><span class="fa fa-cart-plus"></span> 购物车</a>
<a href="" class="header-a"><span class="fa fa-star"></span> 收藏夹 <i class="fa fa-angle-down"></i></a>
<a href="">商品分类</a>
|
<a href="" class="header-a">卖家中心 <i class="fa fa-angle-down"></i></a>
<a href="" class="header-a">联系客服 <i class="fa fa-angle-down"></i></a>
<a href="" class="header-a">网站导航 <i class="fa fa-angle-down"></i></a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS代码:
*{margin: 0px;padding: 0px;}
.header{width: 100%;background-color: #f5f5f5}
.header-content{
width: 1200px;
margin: 0 auto;
line-height: 40px;
}
.header-left{
width: 300px;
height: 40px;
float: left;
}
.header-right{
width: 600px;
height: 40px;
float: right;
}
.clear{clear: both;}
a{text-decoration: none;color: #000;font-size: 13px;}
.header-a{
display: inline-block;
height: 40px;
width: 80px;
text-align: center;
}
.header-left a{margin-right: 5px;}
.header-content a:hover{
color: #ff5000;
}
.header-a:hover{
background: #fff;
}
批改老师：韦小宝批改时间：2019-01-20 12:57:14
老师总结：写的很不错 下次记得这种可以直接写在一起就可以了
