正文

html页面典型页面制作

IP云
IP云V管理员/6 阅读
10/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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:;
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;
}