模仿微信朋友圈樣式 html5 響應式佈局

時間  2019-12-05
標籤 模仿 微信 朋友 樣式 html5 html 響應 佈局 欄目 HTML5 简体版
原文   原文鏈接

先上圖，javascript

說明：使用了jquery weui樣式模板css

 

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">html

<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">java

<link rel="stylesheet" href="../lib/weui.min.css">
<link rel="stylesheet" href="../css/jquery-weui.css">
<link rel="stylesheet" href="css/demos.css">
    <style>
      .weui-row {
        margin-top: 10px;
      }
      [class*="weui-col-"] {
        //border: 1px solid #ccc;
        height: 100px;
        line-height: 40px;
        text-align: center;
      }
      
        
        .weui_media_hd_c1{
            margin-bottom: 5.5cm;
        }
        
        .weui_media_hd_c2{
            margin-bottom: 2.5cm;
        }jquery

    </style>
  </head>es6

  
  <body ontouchstart>app


    <div class="weui_panel weui_panel_access">
      <div class="weui_panel_hd">圖文組合列表</div>
      <div class="weui_panel_bd">
        <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
        
          <div class="weui_media_hd weui_media_hd_c1">
            <img class="weui_media_appmsg_thumb" src="./images/test.jpg" alt="666">
          </div>
          
          <div class="weui_media_bd">
            <h4 class="weui_media_title">標題一</h4>
            <p class="weui_media_desc">由各類物質組成的巨型球狀天體，叫作星球。星球有必定的形狀，有本身的運行軌道。</p>ui

            <div class="weui-row">
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              
              <!-- 自動增長刪減， 注意頭像樣式的變化，須要本身設置，默認是居中
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              <div class="weui-col-33"></div>
              -->
            </div>this

          </div>scala

        </a>
        
        <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
          <div class="weui_media_hd weui_media_hd_c2">
            <img class="weui_media_appmsg_thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
          </div>
          <div class="weui_media_bd">
            <h4 class="weui_media_title">標題二</h4>
            <p class="weui_media_desc">由各類物質組成的巨型球狀天體，叫作星球。星球有必定的形狀，有本身的運行軌道。</p>
            
            <div class="weui-row">
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
              <div class="weui-col-33"><img class="weui_media_appmsg_thumb" src="./images/test.jpg"></div>
            </div>

            
          </div>
        </a>
      </div>
      <a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
    </div>
   
    <script src="../lib/jquery-2.1.4.js"></script>
<script src="../js/jquery-weui.js"></script>

  </body> </html>  

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程