手机端H5页面-矩形布局

简介

手机端的H5界面由于屏幕尺寸小和多适配，一般采用矩形布局来展现页面元素
矩形布局中可一行展现多列，每个单元格中可实现上、下内容布局或左右内容布局
以下就上、下布局为例来分析

效果图

代码分析

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

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

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

1. 每行展现几列通过li的宽度来控制，如一行四列，li的宽度则为width:25%
2. 元素之间的间隔线，通过设置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>