手机端H5页面-矩形布局

简介

手机端的H5界面由于屏幕尺寸小和多适配，一般采用矩形布局来展现页面元素

矩形布局中可一行展现多列，每个单元格中可实现上、下内容布局或左右内容布局

以下就上、下布局为例来分析

效果图

代码分析

HTML元素采用ui和li来布局，每个li为一个单元格，单元格中采用p和a元素来定义单元格中的上、下布局，如：

<p class="d-price-title">总金额(元)</p>
<a class="d-price">88888.00</a>

元素样式采用相对布局，每个单元格左浮动布局，关键样式

每行展现几列通过li的宽度来控制，如一行四列，li的宽度则为width:25%

元素之间的间隔线，通过设置li的左方border线和下方border线是实现，如：border-left: 1px solid #F2F2F2;和border-bottom: 1px solid #F2F2F2;

具体代码：

.price-list li {
position: relative;
float: left;
width: 50%;
height: 60px;
overflow: hidden;
text-align: center;
line-height: 40px;
border-radius: 0.25rem;
border-left: 1px solid #F2F2F2;
border-bottom: 1px solid #F2F2F2;
background-color: #f67f12;
}

完整代码

样式：

.price-region {
background-color: #FFF;
margin: 0;
padding: 0;
width: 100%;
}

.price-list {
position: relative;
overflow: hidden;
padding: 8px 8px 8px 8px;
}

.price-list,.price-list li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

.price-list li {
position: relative;
float: left;
width: 50%;
height: 60px;
overflow: hidden;
text-align: center;
line-height: 40px;
border-radius: 0.25rem;
border-left: 1px solid #F2F2F2;
border-bottom: 1px solid #F2F2F2;
background-color: #f67f12;
}
.d-price {
font-size: 1.125rem;
color: #fff;
}

.d-price-title {
padding: 0px 0px 0px;
height: 20px;
width: 100%;
color: #F2F2F5;
/* line-height: 20px; */
vertical-align: middle;
}

/* 价格区域2 */
.price2-list {
position: relative;
overflow: hidden;
padding: 0px 8px 8px 8px;
}

.price2-list,.price2-list li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

.price2-list li {
position: relative;
float: left;
width: 50%;
height: 50px;
overflow: hidden;
text-align: center;
line-height: 40px;
border-left: 1px solid #E4E4E4;
border-bottom: 1px solid #E4E4E4;
background-color: #fff;
}

.d-price2 {
font-size: 1.25rem;
color: #FF6600;
}

.d-price2-title {
padding: 0px;
height: 10px;
width: 100%;
color: #949494;
line-height: 20px;
vertical-align: middle;
}

布局：

<div class="price-region">
<ul class="price-list">
<li id="l1" onclick=""><div>
<p class="d-price-title">总金额(元)</p>
<a class="d-price">88888.00</a>
</div></li>
<li id="l2" onclick=""><div>
<p class="d-price-title">昨日收入(元)</p>
<a class="d-price">34.852</a>
</div></li>
</ul>

<ul class="price2-list">
<li id="l1" onclick="" style="border-left: 0px;"><div>
<p class="d-price2-title">累计收入(元)</p>
<a class="d-price2">12834.5</a>
</div></li>
<li id="l2" onclick=""><div>
<p class="d-price2-title">当月收入(元)</p>
<a class="d-price2">3058.50</a>
</div></li>
</ul>
</div>