html5自适应页面

好久没写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+端口号访问文件位置就可以啦。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,001评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,210评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,874评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,001评论 1赞 291
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,022评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,005评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,929评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,742评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,193评论 1赞 309
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,305评论 5赞 342
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,911评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2赞 352

推荐阅读更多精彩内容

  • 关于Mongodb的全面总结
    关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 31,928评论 2赞 89
  • 乡下生活，因为粗糙，所以鲜活
    我经常会想，乡下生活吸引我的是什么？作为一枚馋嘴儿，某一天我在菜场找到了支点，或许可以以此一点点撬开乡下的魅力。 ...
    薛家事儿妈阅读 212评论 0赞 0
  • 大学
    大学像一片大海，而我们如同每一舟小船，扬起自己的风帆，拥有自己的航线。 大学教会了你不断成长，教会了你拥有梦想，教...
    你的小雨g阅读 310评论 0赞 0
  • 午梦
    最近提的一口气，松了下来。但是身体应该还没有恢复过来，整个人都是昏昏沉沉的。刚做了一个奇怪的梦，梦中不知因何原...
    药师哎阅读 196评论 0赞 0
  • 在日本死亡中国女教师笑容的背后是什么
    近日,中国福建女教师危秋洁在日本北海道海边死亡的消息得到确认，从宾馆视频看她总是面带笑容。 对于死亡原因众说纷纭，...
    西蒙分享阅读 474评论 2赞 3