前面几个章节介绍了最新的微信weui表单组件的使用方法，由于微信weui的样式库更新比较快，所以可能导致案例失效，在此我把当前最新的微信weui样式库下载下来上传到百度网盘了，地址http://pan.baidu.com/s/1cvQlLc
一，引入css文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
建议不要引用网络地址，最好把css文件下载到本地，下载地址http://pan.baidu.com/s/1cvQlLc
记得html设置成移动浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"
二、Article文章页html代码
在<body></body>之间添加如下代码
<div class="page article js_show"> <div class="page__hd"> <h1 class="page__title">Article</h1> <p class="page__desc">文章(V型知识库原创 www.vxzsk.com)</p> </div> <div class="page__bd"> <article class="weui-article"> <h1>大标题</h1> <section> <h2 class="title">章标题</h2> <section> <h3>1.1 节标题</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> <img src="https://weui.io/images/pic_article.png" alt=""> <img src="https://weui.io/images/pic_article.png" alt=""> </p> </section> <section> <h3>1.2 节标题</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section> </section> </article> </div> <div class="page__ft"> <a href="javascript:home()"><img src="https://weui.io/images/icon_footer_link.png"></a> </div> </div>
三、效果
打开谷歌浏览器，设置手机网页模式浏览案例网页
四、完整html代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css"> <body> <div class="page article js_show"> <div class="page__hd"> <h1 class="page__title">Article</h1> <p class="page__desc">文章(V型知识库 www.vxzsk.com)</p> </div> <div class="page__bd"> <article class="weui-article"> <h1>大标题</h1> <section> <h2 class="title">章标题</h2> <section> <h3>1.1 节标题</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> <img src="https://weui.io/images/pic_article.png" alt=""> <img src="https://weui.io/images/pic_article.png" alt=""> </p> </section> <section> <h3>1.2 节标题</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section> </section> </article> </div> <div class="page__ft"> <a href="javascript:home()"><img src="https://weui.io/images/icon_footer_link.png"></a> </div> </div> </body> </html>
此文章本站原创，地址 https://www.vxzsk.com/796.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程