leoyi520

移动端列表样式-1和2

首先是移动端，导航时的列表图标和新闻的列表功能样式。

导航列表：

 

新闻列表：

           

导航的CSS：

.fl{
float: left;
}
.fr{
float: right;
}

/*首页导航列表*/
.nav-list-box{
margin:20px 0;
}
.nav-list-box li{
width: 24.5%;
text-align: center;
float: left;
}
.nav-list-box li:nth-child(1,2,3,5,6,7){
margin-right: 10px;
}
.nav-list-box li a{
color:#fff;
display: inline-block;
width: 100%;
height: 100%;
}
.ico-index{
display: inline-block;
width: 50px;
height: 50px;
}
.ico-index-1{
background: url("../images/h_03.jpg")no-repeat center;
}
.ico-index-2{
background: url("../images/h_05.jpg")no-repeat center;
}
.ico-index-3{
background: url("../images/h_07.jpg")no-repeat center;
}
.ico-index-4{
background: url("../images/h_09.jpg")no-repeat center;
}
.ico-index-5{
background: url("../images/h_16.jpg")no-repeat center;
}
.ico-index-6{
background: url("../images/h_17.jpg")no-repeat center;
}
.ico-index-7{
background: url("../images/h_19.jpg")no-repeat center;
}
.ico-index-8{
background: url("../images/h_20.jpg")no-repeat center;
}

导航的HTML：

<ul class="nav-list-box clear">
<li><a href="index.html">
<span class="ico-index ico-index-1"></span>
<p class="colorGray">首页</p>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-2"></span>
<p class="colorGray">旅馆介绍</p>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-3"></span>
<p class="colorGray">预订酒店</p>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-4"></span>
<p class="colorGray">客房中心</p>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-5"></span>
<p class="colorGray">会议宴会</p>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-6"></span>
<p class="colorGray">酒店服务</p>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-7"></span>
<p class="colorGray">新闻资讯</p>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-8"></span>
<p class="colorGray">联系我们</p>
</a></li>
</ul>

新闻列表的CSS：

.fl{
float: left;
}
.fr{
float: right;
}

/*新闻列表*/
.newsTitle{
width: 100%;
height: 30px;
line-height: 30px;
background: #C2C2C2;
}
.newsTitle span{
display: inline-block;
width: 7px;
height: 30px;
background: #FF4400;
float: left;
}
.newsTitle h4{
width: 100px;
line-height: 30px;
margin-left: 10px;
color:#383838;
}
.newsTitle a{
color: #FF4400;
margin-right: 5px;
}
.newsBox ul li{
width: 100%;
height: 25px;
line-height: 25px;
}
.newsDashed{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #FEC12B;
margin:0 4px;
}
.newsBox{
box-shadow: 0 2px 2px #999;
margin-bottom: 30px;
}
.newsBox ul li{
border-bottom: 1px solid #eee;
}
.newsBox ul li a{
color:#383838;
}
.rightMore{
margin-right: 3px;
color:#ccc;
}

新闻列表的HTML:

<!-- 新闻列表 -->
<div class="newsBox clear">
<div class="newsTitle clear">
<div class="fl">
<span class="newsSpan"></span>
<h4>新闻资讯</h4>
</div>
<a href="#" class="fr"><b>more >></b></a>
</div>
<ul>
<li><span class="newsDashed"></span><a href="#">未来五年我国旅馆行业前景乐观</a> <span class="rightMore fr">></span></li>
<li><span class="newsDashed"></span><a href="#">八大公寓发展轨迹盘点“独角兽”尚在路上 <span class="rightMore fr">></span></a></li>
<li><span class="newsDashed"></span><a href="#">今年上半年中国旅馆行业增速趋于平缓</a><span class="rightMore fr">></span></li>
<li><span class="newsDashed"></span><a href="#">高水准的国际商务，现代豪华感全球旅馆 <span class="rightMore fr">></span></a></li>
</ul>
</div>