html部分
<!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" href="css/淘宝导航.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header-content clearfix">
<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>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #6c6c6c;
font-size: 12px;
}
.header{
background: #f5f5f5;
}
.header-content{
width: 1200px;
margin: 0 auto;
line-height: 40px;
}
.header-content a:hover{
color: #ff5000;
}
.header-left{
height: 40px;
float: left;
}
.header-left a{
margin-right: 5px;
}
.header-right{
width: 600px;
height: 40px;
float: right;
}
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
.header-a{
display: inline-block;
width: 90px;
height: 40px;
text-align: center;
}
.header-a:hover{
background: #fff;
}
1.在写左边导航的时候,宽度不够,导致内容在第二行显示,我的想法是给
父级标签增加宽度,视频中老师的解决方法是去掉父标签的宽度,这样子标签
里的内容就把宽度撑开了，这样代码量也减少了。
