仿淘宝顶部导航布局

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用导航布局案例</title> <link rel="stylesheet"&

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>常用导航布局案例</title>
    <link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
	<style type="text/css">
    *{margin: 0;padding: 0;}
    .header{
    	width: 100%;
    	background: #F5F5F5;
    }
    .header_content{
    	width: 1200px;	
    	margin: 0 auto;
        line-height: 40px;
    }
    .header_content a:hover{color:#FF5000;}
    .header_left{
    	height: 40px;
/*    	background: red;*/
    	float: left;
    }
    .header_left a{margin-right: 5px;}
    .header_right{
        height: 40px;
/*        background: red;*/
        float: right;
    }
    .clear{clear: both;}
    a{
        text-decoration: none;
        color: #000;
        font-size: 13px;
    }
    .header_a{
        display: inline-block;
        height:40px;
        width: 90px;
        /*background: red; */
        text-align: center;
    }
    .header_a:hover{background: #fff;}
    </style>
</head>
<body>
<div class="header">
     <div class="header_content">
          <div class="header_left">
              <a href=""class="header_a">中国大陆 &nbsp <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> 购物车 &nbsp<i class="fa fa-angle-down"></i></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>

Correcting teacher：西门大官人Correction time：2019-04-01 10:10:42
Teacher's summary：代码结构比较清晰，样式命名也不错。最好能上传一下程序运行的效果图

仿淘宝顶部导航布局

Popular Entries