摘要：淘宝导航布局案例<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>淘宝</title> <link rel="stylesheet" type="text/css"&nbs
淘宝导航布局案例
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>淘宝</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"> </head> <body> <div class="header"> <div class="header_content"> <!-- 左边导航 --> <div class="content-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="content-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;}/*对网页初始化，去除内外边距*/
.clear{clear: both;}
a{text-decoration: none;color: #000;font-size: 13px;}/*去除a的样式*/
.header{ width: 100%;height:40px; background-color:#F5F5F5;}
.header_content{width: 1200px;height: 40px;margin:0px auto;}
.content-left{height: 40px;float:left;line-height: 40px;}
.content-left a{margin-right: 5px;}
.content-right{height: 40px;float:right;line-height: 40px;}
.header_a{display: inline-block;height: 40px;width:75px;text-align: center;}
.header_content a:hover{color: #FF5000;}
.header_a:hover{background: #fff;}
批改老师：灭绝师太批改时间：2018-11-03 09:17:44
老师总结：布局的时候不要一味按照老师的模式，可以试着用所学的知识做自己 想做的页面，代码最好有自己发风格
