微信样式库weui使用教程之列表视图cell(第三课)

2017年07月31日 09:31 | 6016次浏览 作者原创 版权保护

【实例源码下载】

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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程