摘要:<!doctype html> <html> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="css\font-awes
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>注册</title> <link rel="stylesheet" href="css\font-awesome-4.7.0\css\font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css\index.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> <ul> <li>已买到的宝贝</li> <li>足迹</li> </ul> </a> <a href="" > <i class="fa fa-cart-plus" style="color: #ff5000"></i> 购物车</a> <a href="" class="header_a"><i class="fa fa-star" ></i> 收藏夹 <i class="fa fa-angle-down"></i></a> <a href="">商品分类</a> <a style="color: #ccc"> |</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-align-justify" style="color: #ff5000"></i> 网站导航 <i class="fa fa-angle-down"></i></a> </div> </div> <div class="clear"></div> </div> </body> </html>
*{
margin:0px;padding: 0px;
}
a{
text-decoration: none;
color: #6c6c6c;
font-size: 13px;
}
li{
list-style: none;
}
.clear{
clear: both;
}
.header{
width: 100%;
background-color: #f5f5f5f5;
}
.header_top{
width: 100%;
height: 40px;
margin: 0px auto;
background-color: #fc0f3d;
}
.header_top_content{
width: 1200px;
height: 40px;
margin: 0px auto;
background-color: #fc0f3d;
}
.header_content{
width: 1200px;
/*height: 40px;*/
margin: 0px auto;
line-height: 40px;
}
.header_left{
height: 40px;
float: left;
}
.header_left a{
margin-right: 5px;
}
.header_content a:hover{
color: #ff5000;
}
.header_right{
height: 40px;
float: right;
}
.header_a{
display: inline-block;
height: 40px;
width: 90px;
text-align: center;
position: relative;
}
.header_a:hover{
background-color: #fff;
}
.header_a ul{
border: 1px solid #f5f5f5f5;
display: none;
border-top: none;
}
.header_a:hover ul{
display: block;
position: absolute;
width: 100px
}
.header_a ul li:hover{
background-color: #f5f5f5f5;
}
.header_a ul li{
color: #6c6c6c;
line-height: 30px;
text-align: left;
padding: 0px 3px;
margin: 5px 0px;
}
批改老师:灭绝师太批改时间:2018-11-08 15:57:27
老师总结:还是那句话,要找点小案例做做哦……有问题及时反馈到工单