移动端常用布局（二）

65 阅读 0 评论 43 点赞

我是靠谱客的博主殷勤路人，最近开发中收集的这篇文章主要介绍移动端常用布局（二），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.商品列表布局

<div class="product-list fl-clr">
<ul class="fl-clr">

<li>

<dl>

<dt>

<img src="images/img-2.jpg">

</dt>

<dd>

<span>毛巾两件套</span>

</dd>

<dd class="fl-clr">

<i>￥1000.00</i>

<em class="on">20</em>

</dd>

</dl>

</li>

</ul>

</div>

样式：

.product-list li{

float: left;

width: 50%;

box-sizing: border-box;

}

.product-list li:nth-child(odd){

padding: 0 1.125% 0 2.5%;

}

.product-list li:nth-child(even){

padding: 0 2.5% 0 1.125%;

}

.product-list li dl{

padding: 6px;

margin-bottom: 6px;

background: #ebebeb;

}

.product-list li dt{

width: 100%;

height: 0;

padding-bottom: 100%;

}

.product-list li dt img{

width: 100%;

}

.product-list li dd{

text-align: center;

}

.product-list li dd span{

display: inline-block;

width: 100%;

padding: 5px 0 2px;

font-size: 1.5rem;

color: #585858;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

box-sizing: border-box;

}

.product-list li dd:last-child{

margin: 0 auto;

}

.product-list li dd i{

float: left;

display: inline-block;

width: 60%;

font-size: 1.5rem;

line-height: 20px;

color: #eb603c;

}

.product-list li dd em{

float: left;

display: inline-block;

width: 40%;

font-size: 1.5rem;

line-height: 20px;

color: #282828;

text-align: left;

padding-left: 18px;

box-sizing: border-box;

background-image: url(../images/heart-ico.png);

background-repeat: no-repeat;

background-position: 0px 1px;

background-size: 17px;

}

.product-list li dd em.on{

color: #eb603c;

background-position: 0px -18px;

}

2.我的账户列表布局

<ul>

<li>

<table width="100%" cellpadding="0" cellspacing="0" border="0">

<tr>

<td>

<span class="icons icons-1">我喜欢的</span>

</td>

</tr>

</table>

</li>

</ul>

样式：

.acc-wrap ul{

width: 90%;

color: #fff;

font-size: 1.4rem;

}

.acc-wrap li{

padding: 5px 0;

border-top: 1px solid #fff;

}

.acc-wrap .icons{

display: inline-block;

padding-left: 45px;

line-height: 42px;

background-image: url(../images/p2-ico.png);

background-size: 24px;

background-repeat: no-repeat;

}

.acc-wrap td:last-child{

font-size: 1.3rem;

line-height: 42px;

}

.icons-1{

background-position: 14px 11px;

}