美文网首页
html5自适应页面

html5自适应页面

作者: fangcaiwen | 来源:发表于2018-09-08 09:36 被阅读0次

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

    相关文章

      网友评论

          本文标题：html5自适应页面

          本文链接：https://www.haomeiwen.com/subject/lydkgftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|html5自适应页面|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！