leoyi520

移动端导航分享-样式1

这个主要是为了方便自己后面开发的时候需要可以拿出来用所以存的代码分享。

这个是移动端导航分享样式1：【图片是生成效果】

CSS代码：

/*公用样式*/

body{
font-family: "微软雅黑";
}
ul,li{
list-style: none;
margin:0;
padding: 0;
}
hr,h3,h4,h5{
margin:0;
padding: 0;
}

/*清除浮动*/

.clear{
overflow: hidden;
*zoom:1;
z-index: 100;
}/*底部导航*/
.bottomNavBox{
width: 100%;
background: #2B71B8;
position: fixed;
bottom: 0;
left: 0;
}
.bottomNavBox ul li{
float: left;
width: 25%;
height:50px;
text-align: center;
padding-top: 2px;
}
.bottomNavBox ul li a{
color:#fff;
display: inline-block;
width: 100%;
height: 100%;
}
.ico-nav{
display: inline-block;
width: 25px;
height: 25px;
margin:0 auto;
}
.ico-nav-1{
background: url("../images/dl_07.jpg")no-repeat center;
}
.ico-nav-2{
background: url("../images/dl_14.jpg")no-repeat;
}
.ico-nav-3{
background: url("../images/dl_09.jpg")no-repeat;
}
.ico-nav-4{
background: url("../images/dl_11.jpg")no-repeat;
}
.bottomNavBox ul h3{
margin-top: 0;
padding:0;
font-size: 15px;
text-align: center;
}

HTML代码：

<!-- 底部导航 -->
<div class="bottomNavBox clear">
<ul class="clear">
<li><a href="#">
<span class="ico-nav ico-nav-1"></span>
<h3>首页</h3>
</a></li>
<li><a href="#">
<span class="ico-nav ico-nav-2"></span>
<h3>电话咨询</h3>
</a></li>
<li><a href="#">
<span class="ico-nav ico-nav-3"></span>
<h3>产品服务</h3>
</a></li>
<li><a href="#">
<span class="ico-nav ico-nav-4"></span>
<h3>在线咨询</h3>
</a></li>
</ul>
</div>