philosophyship-mobile
Version:
philosophship-mobile 手机端H5 ui 样式库
124 lines (123 loc) • 6.13 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="../src/tuitui-ui.css">
<title>推推UI-列表</title>
</head>
<body>
<div class="tt-content">
<h1 class="tt-panel-title">简单列表</h1>
<div class="tt-panel-body no-padding">
<!-- 简单列表 -->
<ul class="tt-list">
<li class="tt-list-item">北京</li>
<li class="tt-list-item">上海</li>
<li class="tt-list-item">天津</li>
<li class="tt-list-item">重庆</li>
<li class="tt-list-item">厦门</li>
<li class="tt-list-item">广州</li>
<li class="tt-list-item">...</li>
</ul>
</div>
<h1 class="tt-panel-title">复杂列表</h1>
<div class="tt-panel-body no-padding">
<!-- 复杂列表 -->
<ul class="tt-list">
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<h1 class="item-title">FILCO斐尔可 机械键盘87游戏无线圣手忍者二代红轴茶青黑蓝牙双模</h1>
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<h1 class="item-title">FILCO斐尔可 机械键盘87游戏无线圣手忍者二代红轴茶青黑蓝牙双模</h1>
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<!-- ...其他多个列表项 -->
</ul>
</div>
<h1 class="tt-panel-title">两列列表</h1>
<div class="tt-panel-body no-padding">
<!-- 两列列表 -->
<ul class="tt-list-wrap">
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<li class="tt-list-item">
<div class="item-img-wrap">
<img class="item-img" src="img/list-img.jpg" alt="机械键盘">
</div>
<div class="item-content-wrap">
<p class="item-price">￥998</p>
<p class="item-desc">已售1834件</p>
</div>
</li>
<!-- ...其他多个列表项 -->
</ul>
</div>
</div>
</body>
</html>