weui样式库weui.css和example.css请前往https://github.com/weui/weui下载。记得是最新版本，不要下载错了。其实weui使用起来非常简单，本案例引用的是网络地址，建议开发者最好下载下来放在自己项目中。使用方法如下
一，引入css文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
二、列表list效果html代码
在<body></body>之间添加如下代码
<div class="page__hd"> <h1 class="page__title">List</h1> <p class="page__desc">列表</p> </div> <div class="page__bd"> <div class="weui-cells__title">带说明的列表项</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> </div> <div class="weui-cells__title">带图标、说明的列表项</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> </div> <div class="weui-cells__title">带跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft"> </div> </a> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft"> </div> </a> </div> <div class="weui-cells__title">带说明、跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> </div> <div class="weui-cells__title">带图标、说明、跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> </div> </div> <div class="page__ft"> <a href="javascript:home()"><img src="https://weui.io/images/icon_footer_link.png" /></a> </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=""> <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <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__hd"> <h1 class="page__title">List</h1> <p class="page__desc">列表</p> </div> <div class="page__bd"> <div class="weui-cells__title">带说明的列表项</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> </div> <div class="weui-cells__title">带图标、说明的列表项</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> </div> <div class="weui-cells__title">带跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft"> </div> </a> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft"> </div> </a> </div> <div class="weui-cells__title">带说明、跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> </div> <div class="weui-cells__title">带图标、说明、跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> </div> </div> <div class="page__ft"> <a href="javascript:home()"><img src="https://weui.io/images/icon_footer_link.png" /></a> </div> </body> </html>
此文章本站原创，地址 https://www.vxzsk.com/713.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：新版weui input使用
下一篇：spring aop的@aspect
^