html5自适应页面
2018-09-08 本文已影响0人
fangcaiwen
好久没写html5页面了，今天兴致来了，随便写了几个页面，由于时间关系，样式就没有抽出来。感觉功力比当年退步了。在此分享，希望能帮到需要的朋友们，赠人玫瑰，手有余香。也希望得到帮助的朋友们加个关注，点个赞，谢谢。我会不定期出更好的作品。下面看图，一图一代码。
github地址：https://github.com/fangcaiwen/html5/tree/master
主页图.png
<html>
<head>
<title>社区</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body style="font-size: 12px;
overflow-y: scroll;
padding: 10px">
<div>
<div>
<b style="font-size: 1.2rem;">邻里分享</b>
<a href="shareList.html" style="float: right; color: #ed4545; font-size: 1rem;text-decoration:none;">看更多 ></a>
</div>
<div style="margin-top: 10px;
margin-bottom: 10px;
color: #bbb;
font-size: 0.8rem;"><span>本小区</span></div>
<ul style="list-style: none;margin:0px;padding: 0;">
<li style="margin-bottom: 20px;">
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 4rem;
height: 4rem;
border-radius: 2rem;display: inline-block;"
/>
<div style="display: inline-block;margin-left: 10px;margin-right:20px;height:4rem;position: absolute;">
<div style="font-size: 0.9rem;">138元季度健身，诺德天街四楼24小诺德天街诺德天街四楼24小诺德天街诺德天 </div>
<div style="margin-bottom: 1rem;color:#bbb;">0条讨论</div>
<div style="height:1px;background-color: #ddd;"></div>
</div>
</li>
<li style="margin-bottom: 20px;">
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 4rem;
height: 4rem;
border-radius: 2rem;display: inline-block;"
/>
<div style="display: inline-block;margin-left: 10px;margin-right:20px;height:4rem;position: absolute;">
<div style="font-size: 0.9rem;">138元季度健身，诺德天街四楼24小诺德天街诺德天街四楼24小诺德天街诺德天 </div>
<div style="margin-bottom: 1rem;color:#bbb;">0条讨论</div>
<div style="height:1px;background-color: #ddd;"></div>
</div>
</li>
<li style="margin-bottom: 20px;">
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 4rem;
height: 4rem;
border-radius: 2rem;display: inline-block;"
/>
<div style="display: inline-block;margin-left: 10px;margin-right:20px;height:4rem;position: absolute;">
<div style="font-size: 0.9rem;">138元季度健身，诺德天街四楼24小诺德天街诺德天街四楼24小诺德天街诺德天 </div>
<div style="margin-bottom: 1rem;color:#bbb;">0条讨论</div>
<div style="height:1px;background-color: #ddd;"></div>
</div>
</li>
</ul>
</div>
<div style="margin-top: 30px;">
<div>
<b style="font-size: 1.2rem;">邻里互助</b>
<a href="helpList.html" style="float: right; color: #ed4545; font-size: 1rem;text-decoration:none;">看更多 ></a>
</div>
<div style="margin-top: 10px;
margin-bottom: 10px;
color: #bbb;
font-size: 0.8rem;"><span>本小区</span></div>
<ul style="list-style: none;margin:0px;padding: 0;">
<li style="margin-bottom: 20px;">
<img src="https://img.manmi.com/n/5,06f0ba5f1c5954,150x150" style="width: 4rem;
height: 4rem;
border-radius: 2rem;display: inline-block;"
/>
<div style="display: inline-block;margin-left: 10px;margin-right:20px;height:4rem;position: absolute;">
<div style="font-size: 0.9rem;">想买车，因为广州牌摇不到，想上东莞或佛山牌，但要听说 </div>
<div style="margin-bottom: 1rem;color:#bbb;">0条讨论</div>
<div style="height:1px;background-color: #ddd;"></div>
</div>
</li>
<li style="margin-bottom: 20px;">
<img src="https://img.manmi.com/n/5,06f0ba5f1c5954,150x150" style="width: 4rem;
height: 4rem;
border-radius: 2rem;display: inline-block;"
/>
<div style="display: inline-block;margin-left: 10px;margin-right:20px;height:4rem;position: absolute;">
<div style="font-size: 0.9rem;">想买车，因为广州牌摇不到，想上东莞或佛山牌，但要听说 </div>
<div style="margin-bottom: 1rem;color:#bbb;">0条讨论</div>
<div style="height:1px;background-color: #ddd;"></div>
</div>
</li>
<li style="margin-bottom: 20px;">
<img src="https://img.manmi.com/n/5,06f0ba5f1c5954,150x150" style="width: 4rem;
height: 4rem;
border-radius: 2rem;display: inline-block;"
/>
<div style="display: inline-block;margin-left: 10px;margin-right:20px;height:4rem;position: absolute;">
<div style="font-size: 0.9rem;">想买车，因为广州牌摇不到，想上东莞或佛山牌，但要听说 </div>
<div style="margin-bottom: 1rem;color:#bbb;">0条讨论</div>
<div style="height:1px;background-color: #ddd;"></div>
</div>
</li>
</ul>
</div>
<div style="margin-top: 30px;">
<div>
<b style="font-size: 1.2rem;">社区活动</b>
<span style="font-size: 0.8rem;color:#bbb;margin-left: 10px;">好吃好喝好玩的都在这</span>
<a href="activeList.html" style="float: right; color: #ed4545; font-size: 1rem;text-decoration:none;">看更多 ></a>
</div>
<div style="margin-top: 10px;
margin-bottom: 10px;
color: #bbb;
font-size: 0.8rem;">
<img src="https://img.manmi.com/n/4,02dbc2a63cb555" style="width:100%;height:8rem;border-top-right-radius: 8px;border-top-left-radius: 8px;"/>
<div style="height:8rem;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;border:1px solid #ddd;border-top-width: 0px;text-align: center;">
<b style="font-size: 1rem;
color: #000;
margin-top: 10px;
display: inline-block;">万科欧泊2018年中秋晚会节目征集令！</b>
<div style="margin-top: 5px; ">
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;margin-right:5px;border: 1px solid #fff;"
/>
<span style="display: inline-block;
height: 2rem;
line-height: 2rem;
position: relative;
top: -0.7rem;">已有8人参与</span>
</div>
<div style="width: 100px;
height: 30px;
border: 1px solid #ed4545;
border-radius: 15px;
text-align: center;
font-size: 1rem;
margin: auto;
line-height: 30px;
color: #ed4545;">去报名</div>
</div>
</div>
</body>
</html>
常用列表.png
<html>
<head>
<title>邻里分享</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body style="font-size: 12px; overflow-y: scroll;padding: 10px">
<ul style="list-style: none;margin:0px;padding: 0;">
<li style="margin-bottom: 20px;">
<div>
<div>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 3rem;
height: 3rem;
border-radius: 1.5rem;display: inline-block; "
/>
<div style="display: inline-block;margin-left: 10px;height:3rem;position: absolute;line-height: 1.5rem;">
<div style="font-size: 0.9rem;">大西瓜 </div>
<div style="color:#bbb;">广州欧泊</div>
</div>
</div>
<div style="font-size: 0.9rem;margin-top: 10px;margin-bottom: 10px;">想买车，因为广州拍照摇不到想买车爱家居啊撒。是是的，的的都是多撒大声地所多撒大声地服务网我看我可我饿哦我饿哦为二位费大幅度发了发了的两份的反馈来看到付款方大发了登飞来峰劳动力等发了反垄断法？ </div>
<ul style="list-style: none;margin:0px;padding: 0;display: inline-block;">
<li style="margin-right: 10px; float: left">
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
</li>
</ul>
<div style="margin-top: 20px;clear: both;">
<div style="color:#bbb;display: inline-block;">09月05日 10:22</div>
<div style="color:#bbb;display: inline-block;float: right;">0评论</div>
<div style="color:#bbb;display: inline-block;float:right;margin-right: 20px;">0点赞</div>
</div>
<div style="height:1px;background-color: #eee;margin-top: 20px;"></div>
</div>
</li>
<li style="margin-bottom: 20px;">
<div>
<div>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 3rem;
height: 3rem;
border-radius: 1.5rem;display: inline-block; "
/>
<div style="display: inline-block;margin-left: 10px;height:3rem;position: absolute;line-height: 1.5rem;">
<div style="font-size: 0.9rem;">大西瓜 </div>
<div style="color:#bbb;">广州欧泊</div>
</div>
</div>
<div style="font-size: 0.9rem;margin-top: 10px;margin-bottom: 10px;">想买车，因为广州拍照摇不到想买车爱家居啊撒。是是的，的的都是多撒大声地所多撒大声地服务网我看我可我饿哦我饿哦为二位费大幅度发了发了的两份的反馈来看到付款方大发了登飞来峰劳动力等发了反垄断法？ </div>
<ul style="list-style: none;margin:0px;padding: 0;display: inline-block;">
<li style="margin-right: 10px; float: left">
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
</li>
</ul>
<div style="margin-top: 20px;clear: both;">
<div style="color:#bbb;display: inline-block;">09月05日 10:22</div>
<div style="color:#bbb;display: inline-block;float: right;">0评论</div>
<div style="color:#bbb;display: inline-block;float:right;margin-right: 20px;">0点赞</div>
</div>
<div style="height:1px;background-color: #eee;margin-top: 20px;"></div>
</div>
</li>
<li style="margin-bottom: 20px;">
<div>
<div>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 3rem;
height: 3rem;
border-radius: 1.5rem;display: inline-block; "
/>
<div style="display: inline-block;margin-left: 10px;height:3rem;position: absolute;line-height: 1.5rem;">
<div style="font-size: 0.9rem;">大西瓜 </div>
<div style="color:#bbb;">广州欧泊</div>
</div>
</div>
<div style="font-size: 0.9rem;margin-top: 10px;margin-bottom: 10px;">想买车，因为广州拍照摇不到想买车爱家居啊撒。是是的，的的都是多撒大声地所多撒大声地服务网我看我可我饿哦我饿哦为二位费大幅度发了发了的两份的反馈来看到付款方大发了登飞来峰劳动力等发了反垄断法？ </div>
<ul style="list-style: none;margin:0px;padding: 0;display: inline-block;">
<li style="margin-right: 10px; float: left">
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
</li>
</ul>
<div style="margin-top: 20px;clear: both;">
<div style="color:#bbb;display: inline-block;">09月05日 10:22</div>
<div style="color:#bbb;display: inline-block;float: right;">0评论</div>
<div style="color:#bbb;display: inline-block;float:right;margin-right: 20px;">0点赞</div>
</div>
<div style="height:1px;background-color: #eee;margin-top: 20px;"></div>
</div>
</li>
<li style="margin-bottom: 20px;">
<div>
<div>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 3rem;
height: 3rem;
border-radius: 1.5rem;display: inline-block; "
/>
<div style="display: inline-block;margin-left: 10px;height:3rem;position: absolute;line-height: 1.5rem;">
<div style="font-size: 0.9rem;">大西瓜 </div>
<div style="color:#bbb;">广州欧泊</div>
</div>
</div>
<div style="font-size: 0.9rem;margin-top: 10px;margin-bottom: 10px;">想买车，因为广州拍照摇不到想买车爱家居啊撒。是是的，的的都是多撒大声地所多撒大声地服务网我看我可我饿哦我饿哦为二位费大幅度发了发了的两份的反馈来看到付款方大发了登飞来峰劳动力等发了反垄断法？ </div>
<ul style="list-style: none;margin:0px;padding: 0;display: inline-block;">
<li style="margin-right: 10px; float: left">
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
</li>
</ul>
<div style="margin-top: 20px;clear: both;">
<div style="color:#bbb;display: inline-block;">09月05日 10:22</div>
<div style="color:#bbb;display: inline-block;float: right;">0评论</div>
<div style="color:#bbb;display: inline-block;float:right;margin-right: 20px;">0点赞</div>
</div>
<div style="height:1px;background-color: #eee;margin-top: 20px;"></div>
</div>
</li>
<li style="margin-bottom: 20px;">
<div>
<div>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 3rem;
height: 3rem;
border-radius: 1.5rem;display: inline-block; "
/>
<div style="display: inline-block;margin-left: 10px;height:3rem;position: absolute;line-height: 1.5rem;">
<div style="font-size: 0.9rem;">大西瓜 </div>
<div style="color:#bbb;">广州欧泊</div>
</div>
</div>
<div style="font-size: 0.9rem;margin-top: 10px;margin-bottom: 10px;">想买车，因为广州拍照摇不到想买车爱家居啊撒。是是的，的的都是多撒大声地所多撒大声地服务网我看我可我饿哦我饿哦为二位费大幅度发了发了的两份的反馈来看到付款方大发了登飞来峰劳动力等发了反垄断法？ </div>
<ul style="list-style: none;margin:0px;padding: 0;display: inline-block;">
<li style="margin-right: 10px; float: left">
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
<img src="https://img.manmi.com/n/4,07067c148d06f8" style="width:6rem;height:6rem;"/>
</li>
</ul>
<div style="margin-top: 20px;clear: both;">
<div style="color:#bbb;display: inline-block;">09月05日 10:22</div>
<div style="color:#bbb;display: inline-block;float: right;">0评论</div>
<div style="color:#bbb;display: inline-block;float:right;margin-right: 20px;">0点赞</div>
</div>
<div style="height:1px;background-color: #eee;margin-top: 20px;"></div>
</div>
</li>
</ul>
</body>
</html>
活动列表.png
<html>
<head>
<title>社区活动</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body style="font-size: 12px; overflow-y: scroll;padding: 10px">
<div>
<ul style="list-style: none;margin:0px;padding: 0;">
<li style="margin-bottom: 20px;">
<div style="margin-top: 10px;
margin-bottom: 10px;
color: #bbb;
font-size: 0.8rem;">
<img src="https://img.manmi.com/n/4,02dbc2a63cb555" style="width:100%;height:8rem;border-top-right-radius: 8px;border-top-left-radius: 8px;"/>
<div style="height:8rem;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;border:1px solid #ddd;border-top-width: 0px;text-align: center;">
<b style="font-size: 1rem;
color: #000;
margin-top: 10px;
display: inline-block;">万科欧泊2018年中秋晚会节目征集令！</b>
<div style="margin-top: 5px; ">
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;margin-right:5px;border: 1px solid #fff;"
/>
<span style="display: inline-block;
height: 2rem;
line-height: 2rem;
position: relative;
top: -0.7rem;">已有8人参与</span>
</div>
<div style="width: 100px;
height: 30px;
border: 1px solid #ed4545;
border-radius: 15px;
text-align: center;
font-size: 1rem;
margin: auto;
line-height: 30px;
color: #ed4545;">去报名</div>
</div>
</div>
</li>
<li style="margin-bottom: 20px;">
<div style="margin-top: 10px;
margin-bottom: 10px;
color: #bbb;
font-size: 0.8rem;">
<img src="https://img.manmi.com/n/4,02dbc2a63cb555" style="width:100%;height:8rem;border-top-right-radius: 8px;border-top-left-radius: 8px;"/>
<div style="height:8rem;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;border:1px solid #ddd;border-top-width: 0px;text-align: center;">
<b style="font-size: 1rem;
color: #000;
margin-top: 10px;
display: inline-block;">万科欧泊2018年中秋晚会节目征集令！</b>
<div style="margin-top: 5px; ">
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;margin-right:5px;border: 1px solid #fff;"
/>
<span style="display: inline-block;
height: 2rem;
line-height: 2rem;
position: relative;
top: -0.7rem;">已有8人参与</span>
</div>
<div style="width: 100px;
height: 30px;
border: 1px solid #ed4545;
border-radius: 15px;
text-align: center;
font-size: 1rem;
margin: auto;
line-height: 30px;
color: #ed4545;">去报名</div>
</div>
</div>
</li>
<li style="margin-bottom: 20px;">
<div style="margin-top: 10px;
margin-bottom: 10px;
color: #bbb;
font-size: 0.8rem;">
<img src="https://img.manmi.com/n/4,02dbc2a63cb555" style="width:100%;height:8rem;border-top-right-radius: 8px;border-top-left-radius: 8px;"/>
<div style="height:8rem;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;border:1px solid #ddd;border-top-width: 0px;text-align: center;">
<b style="font-size: 1rem;
color: #000;
margin-top: 10px;
display: inline-block;">万科欧泊2018年中秋晚会节目征集令！</b>
<div style="margin-top: 5px; ">
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;margin-right:5px;border: 1px solid #fff;"
/>
<span style="display: inline-block;
height: 2rem;
line-height: 2rem;
position: relative;
top: -0.7rem;">已有8人参与</span>
</div>
<div style="width: 100px;
height: 30px;
border: 1px solid #ed4545;
border-radius: 15px;
text-align: center;
font-size: 1rem;
margin: auto;
line-height: 30px;
color: #ed4545;">去报名</div>
</div>
</div>
</li>
<li style="margin-bottom: 20px;">
<div style="margin-top: 10px;
margin-bottom: 10px;
color: #bbb;
font-size: 0.8rem;">
<img src="https://img.manmi.com/n/4,02dbc2a63cb555" style="width:100%;height:8rem;border-top-right-radius: 8px;border-top-left-radius: 8px;"/>
<div style="height:8rem;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;border:1px solid #ddd;border-top-width: 0px;text-align: center;">
<b style="font-size: 1rem;
color: #000;
margin-top: 10px;
display: inline-block;">万科欧泊2018年中秋晚会节目征集令！</b>
<div style="margin-top: 5px; ">
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;border: 1px solid #fff;"
/>
<img src="https://img.manmi.com/n/5,014ccc0a717fea,150x150" style="width: 2rem;
height: 2rem;
border-radius: 1rem;display: inline-block;margin-left: -10px;margin-right:5px;border: 1px solid #fff;"
/>
<span style="display: inline-block;
height: 2rem;
line-height: 2rem;
position: relative;
top: -0.7rem;">已有8人参与</span>
</div>
<div style="width: 100px;
height: 30px;
border: 1px solid #ed4545;
border-radius: 15px;
text-align: center;
font-size: 1rem;
margin: auto;
line-height: 30px;
color: #ed4545;">去报名</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
想看效果的话，直接复制代码，在本地新建一个txt文件，粘贴保存，再修改文件拓展名为.html格式，拖到任何浏览器就可以看了。页面都为自适应的，在手机上看更美观。如果想手机上看，最好是本地搭建一个服务器如nginx，把文件放到里面，再到手机上输入电脑ip+端口号访问文件位置就可以啦。
