大佬教程收集整理的这篇文章主要介绍了模仿微信朋友圈样式 html5 响应式布局，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
先上图，
说明：使用了jquery weui样式模板
<!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">
<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.
">
<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;
}
</style>
</head>
<body ontouchstart>
<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>
<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>
</div>
</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>
以上是大佬教程为你收集整理的模仿微信朋友圈样式 html5 响应式布局全部内容，希望文章能够帮你解决模仿微信朋友圈样式 html5 响应式布局所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。