leoyi520

移动端导航样式列表

CSS

.bg-white{
background: #fff;
}
.border{
border:1px solid #ccc;
}
.bg-gray{
background: #666666;
}
.bg_eee{
background: #F0F0F0;
}

.nav-list-box{
margin:10px 0;
}
.nav-list-box li{
float: left;
width: 32%;
text-align: center;
margin-bottom: 5px;
background: #fff;
padding:10px;
}
.nav-list-box li:nth-child(1){
margin-right: 5px;
}
.nav-list-box li:nth-child(2){
margin-right: 5px;
}
.nav-list-box li:nth-child(4){
margin-right: 5px;
}
.nav-list-box li:nth-child(5){
margin-right: 5px;
}
.nav-list-box li a{
color:#333;
display: inline-block;
width: 100%;
height: 100%;
font-weight: bold;
font-size: 14px;
}
.nav-list-box li h4{
font-size: 14px;
}
.ico-index{
display: inline-block;
width: 40px;
height: 40px;
}
.ico-index-1{
background: url("../images/i_05.jpg")no-repeat right;
}
.ico-index-2{
background: url("../images/i_07.jpg")no-repeat center;
}
.ico-index-3{
background: url("../images/i_14.jpg")no-repeat center;
}
.ico-index-4{
background: url("../images/i_15.jpg")no-repeat center;
}
.ico-index-5{
background: url("../images/i_16.jpg")no-repeat center;
}

<div class="row">

<div class="col-xs-12 bg_eee">
<ul class="nav-list-box clear ">
<li><a href="index.html">
<span class="ico-index ico-index-1"></span>
<h4>我们是谁</h4>
</a></li>
<li><a href="liebiao.html">
<span class="ico-index ico-index-2"></span>
<h4>公益项目</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-3"></span>
<h4>资讯中心</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-4"></span>
<h4>爱的影像</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-5"></span>
<h4>我们的捐款</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-5"></span>
<h4>我要参与</h4>
</a></li>
</ul>

</div>

</div>