philosophyship-mobile
Version:
philosophship-mobile 手机端H5 ui 样式库
57 lines (56 loc) • 2.33 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">
<!-- 九宫格 -->
<div class="tt-grid tt-grid-2 no-border">
<div class="tt-grid-item">
<i class="fa fa-area-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子1</p>
</div>
<div class="tt-grid-item">
<i class="fa fa-area-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子2</p>
</div>
<div class="tt-grid-item">
<i class="fa fa-bar-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子3</p>
</div>
<div class="tt-grid-item">
<i class="fa fa-area-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子4</p>
</div>
<div class="tt-grid-item">
<i class="fa fa-area-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子5</p>
</div>
<div class="tt-grid-item">
<i class="fa fa-bar-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子6</p>
</div>
<div class="tt-grid-item">
<i class="fa fa-area-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子7</p>
</div>
<div class="tt-grid-item">
<i class="fa fa-area-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子8</p>
</div>
<div class="tt-grid-item">
<i class="fa fa-bar-chart tt-grid-icon"></i>
<p class="tt-grid-label">格子9</p>
</div>
</div>
<br>
<!-- 多列网格 -->
<div class="tt-grid">
</div>
</div>
</body>
</html>