html页面典型页面制作

1、多列多行式

这种样式最好通过百分比来制作，因为不同手机浏览宽度是不一样的

像这种，中间图片的制作，html:

<ul class="person-list">
                <li class="person-item"><img src="/resources/img/training_plan/scry.png"></li>
                <li class="person-item"><div class="person-name">郭子阳</div>
                    <div class="person-type">(市场运营人员)</div></li>
                <li class="person-item"><img src="/resources/img/training_plan/pxzxry.png"></li>
                <li class="person-item"><div class="person-name">周乃容</div>
                    <div class="person-type">(培训执行人员)</div></li>
            </ul>

css:

.person-list {
    display: inline-block;
    margin: 0;
    margin-top: 20px;
    padding: 10px 0;
}

.person-item>img {
    width: 100%;
}

.person-item {
    float: left;
    list-style: none;
}

.person-item:nth-child(2n-1) {
    width: 15%;
}

.person-item:nth-child(2n) {
    width: 35%;
    margin-top: 2%;
}

.person-name {
    font-size: 11pt;
    padding-left: 10px;
}

.person-type {
    font-size: 10pt;
    color: #888;
    padding-left: 10px;
}