leoyi520

移动端首页导航块样式

.clear{

overflow:hidden;

*zoom:1;

z-index:100;

}

.nav-list-box{
margin:20px 0;
}
.nav-list-box li{
float: left;
}
.nav-list-box li a{
color:#fff;
display: inline-block;
width: 100%;
height: 100%;
font-weight: bold;
font-size: 14px;
}
.nav-list-box li:nth-child(1){
width: 35%;
margin-right: 5px;
margin-bottom: 5px;
background: #F4B613;
text-align: right;
}
.nav-list-box li:nth-child(1) h4{
padding:5px 0;
margin-left: 10px;
text-align: left;
}
.nav-list-box li:nth-child(2){
width: 30%;
margin-right: 5px;
margin-bottom: 5px;
background: #FF8A4A;
text-align: right;
text-align: center;
padding-bottom: 8px;
}
.nav-list-box li:nth-child(3){
width: 30%;
margin-bottom: 5px;
background: #FC5265;
text-align: right;
text-align: center;
padding-bottom: 8px;
}
.nav-list-box li:nth-child(3) h4{
padding:1px 0;
}
.nav-list-box li:nth-child(4){
width: 48%;
margin-right: 5px;
margin-bottom: 5px;
background: #84D018;
text-align: right;
text-align: center;
padding-bottom: 8px;
text-align: right;
}
.nav-list-box li:nth-child(4) h4{
text-align: left;
padding:5px 0;
margin-left: 10px;
}
.nav-list-box li:nth-child(5){
width: 48%;
margin-bottom: 5px;
background: #14C761;
text-align: right;
text-align: center;
padding-bottom: 8px;
text-align: right;
}
.nav-list-box li:nth-child(5) h4{
text-align: left;
padding:5px 0;
margin-left: 10px;
}
.ico-index{
display: inline-block;
width: 50px;
height: 50px;
}
.ico-index-1{
background: url("../images/i_15.jpg")no-repeat right;
margin-right: 15px;
}
.ico-index-2{
background: url("../images/i_09.jpg")no-repeat center;
}
.ico-index-3{
background: url("../images/i_12.jpg")no-repeat center;
}
.ico-index-4{
background: url("../images/i_20.jpg")no-repeat center;
margin-right: 15px;
}
.ico-index-5{
background: url("../images/i_23.jpg")no-repeat center;
margin-right: 15px;
}

<ul class="nav-list-box clear">
<li><a href="index.html">
<h4>首页</h4>
<span class="ico-index ico-index-1"></span>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-2"></span>
<h4>品牌故事</h4>
</a></li>
<li><a href="index.html">
<h4>彩色欣赏</h4>
<span class="ico-index ico-index-3"></span>
</a></li>
<li><a href="index.html">
<h4>新闻动态</h4>
<span class="ico-index ico-index-4"></span>
</a></li>
<li><a href="index.html">
<h4>留言板</h4>
<span class="ico-index ico-index-5"></span>
</a></li>
</ul>