导航布局。。。。。

html结构

<div class="severce-tabs">

<ul class="service-tabs-inner">

<li class="on">

<a href="#">主页</a>

</li>

<li>

<a href="#">推荐</a>

</li>

<li>

<a href="#">导航</a>

</li>

<li>

<a href="#">购物</a>

</li>

</ul>

</div>

css

.service-tabs-inner{

width:1200px;

margin:0 auto;

}

.service-tabs-inner:after{

content:"";

display: block;

clear:both;

}

.service-tabs-inner li{

float: left;

list-style: none;

text-align: center;

position: relative;

}

.service-tabs-inner li a{

display: block;

width:120px;

height:60px;

text-decoration: none;

line-height: 60px;

color:#666;

font-size: 20px;

}

--------------------- 

作者：dcwang316 

来源：CSDN 

原文：https://blog.csdn.net/dcwang316/article/details/54288750 

版权声明：本文为博主原创文章，转载请附上博文链接！