Cell
Cell，列表视图，用于将信息以列表的结构显示在页面上，是 wap 上最常用的内容结构。Cell 由多个 section 组成，每个 section 包括 section header weui_cells_title以及 cells weui_cells。
Cell 由 thumbnail weui_cell_hd、body weui_cell_bd、accessory weui_cell_ft 三部分组成，cell 采用自适应布局，在需要自适应的部分加上 class weui_cell_primary即可：
新建cell.jsp 引入<link rel="stylesheet" type="text/css" href="resources/css/weui.css">
weui.css文件可在实例源码中下载
cell.jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>列表视图</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <link rel="stylesheet" type="text/css" href="resources/css/weui.css"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <div class="weui_cells_title">带说明的列表项</div> <div class="weui_cells"> <div class="weui_cell"> <div class="weui_cell_bd weui_cell_primary"> <p>标题文字</p> </div> <div class="weui_cell_ft"> 说明文字 </div> </div> </div> <br><br> <div class="weui_cells_title">带图标、说明、跳转的列表项</div> <div class="weui_cells weui_cells_access"> <a class="weui_cell" href="#"> <div class="weui_cell_hd"> <img src="" alt="icon" style="width:20px;margin-right:5px;display:block"> </div> <div class="weui_cell_bd weui_cell_primary"> <p>cell standard</p> </div> <div class="weui_cell_ft"> 说明文字 </div> </a> <a class="weui_cell" href="#"> <div class="weui_cell_hd"> <img src="" alt="icon" style="width:20px;margin-right:5px;display:block"> </div> <div class="weui_cell_bd weui_cell_primary"> <p>cell standard</p> </div> <div class="weui_cell_ft"> 说明文字 </div> </a> </div> </body> </html>
注意上面代码第40行 和51行 引入图标的src路径是空的，读者可根据实际情况自行引入图标
效果:
此文章本站原创，地址 https://www.vxzsk.com/62.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程