Tom Template基础模板框架

组件

模块包装 ui-mod

通用的模块包装样式。

Demo：

模块名称

二级名称
更多»
模块内容

代码：

  <div class="ui-mod">
  	<div class="ui-mod-hd">
  		<h2 class="tit">模块名称</h2>
  		<div class="subtit">二级名称</div>
  		<div class="extra">
  			<a href="#" class="more">更多»</a>
  		</div>
  	</div>
  	<div class="ui-mod-bd">
  		模块内容
  	</div>
  </div>

图标 ui-icon

Demo：

代码：

  <i class="ui-icon"></i>

评星 ui-rating

Demo：

代码：

  <div class="ui-rating"><span class="bar" style="width:80%;"></span></div>

进度 ui-progress

Demo：

代码：

  <div class="ui-progress"><span class="bar" style="width:60%;"></span></div>

按钮 ui-btn

Demo：

代码：

  <input type="button" class="ui-btn" value="确定" />

主导航 ui-nav

Demo：

代码：

  <div class="pri-nav">
  	<ul>
  		<li class="active"><a href="#">首页</a></li>
  		<li><a href="#">新闻</a></li>
  		<li><a href="#">体育</a></li>
  		<li><a href="#">娱乐</a></li>
  		<li><a href="#">数码</a></li>
  		<li><a href="#">女人</a></li>
  		<li><a href="#">财经</a></li>
  		<li><a href="#">汽车</a></li>
  		<li><a href="#">旅游</a></li>
  	</ul>
  </div>

面包屑 ui-crumb

Demo：

首页 > 电影 > 详情

代码：

  <div class="ui-crumb">
  	<a href="#">首页</a> > <a href="#">电影</a> > 详情
  </div>

标签 ui-tab

Demo：

代码：

  <div class="ui-tab">
  	<ul>
  		<li class="active"><a href="#">新闻</a></li>
  		<li><a href="#">图片</a></li>
  		<li><a href="#">军事</a></li>
  	</ul>
  </div>

分页 ui-pagination

Demo：

首页 1 2 3 4 5 6 7 8 9 10 尾页

代码：

  <div class="ui-pagination">
  	<a href="#" class="first">首页</a>
  	<a href="#" class="prev">上一页</a>
  	<a href="#">1</a>
  	<span>2</span>
  	<a href="#">3</a>
  	<a href="#">4</a>
  	<a href="#">5</a>
  	<a href="#">6</a>
  	<a href="#">7</a>
  	<a href="#">8</a>
  	<a href="#">9</a>
  	<a href="#">10</a>
  	<a href="#" class="next">下一页</a>
  	<a href="#" class="last">尾页</a>
  </div>

图文 ui-figure | ui-figure-v（竖向） | ui-figure-h（横向）

默认是竖向的样式，修改 class="ui-figure-h" 可改为横向。

Demo：

标题标题标题标题

Demo（横向）：

标题标题标题标题

简介简介简介简介简介

代码：

  <div class="ui-figure" style="width:130px;">
  	<div class="pic">
  		<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt="" /></a>
  	</div>
  	<div class="cont">
  		<h3><a href="#">标题标题标题标题</a></h3>
  	</div>
  </div>

  <!-- 横向 -->
  <div class="ui-figure-h">
  	<div class="pic">
  		<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt="" /></a>
  	</div>
  	<div class="cont">
  		<h3><a href="#">标题标题标题标题</a></h3>
  		<p>简介简介简介简介简介</p>
  	</div>
  </div>

定义列表 ui-dl | ui-dl-v（竖向） | ui-dl-h（横向）

默认是竖向的样式，修改 class="ui-dl-h" 可改为横向。

Demo：

会计师
初级会计师 中级会计师 高级会计
教师
幼儿教师 小学教师 中学教师

Demo（横向）：

会计师
初级会计师 中级会计师 高级会计
教师
幼儿教师 小学教师 中学教师

代码：

  <dl class="ui-dl">
  	<dt>会计师</dt>
  	<dd>初级会计师 中级会计师 高级会计</dd>
  	<dt>教师</dt>
  	<dd>幼儿教师 小学教师 中学教师</dd>
  </dl>

  <!-- 横向 -->
  <dl class="ui-dl-h">
  	<dt>会计师</dt>
  	<dd>初级会计师 中级会计师 高级会计</dd>
  	<dt>教师</dt>
  	<dd>幼儿教师 小学教师 中学教师</dd>
  </dl>

文字列表 ui-tlist | ui-tlist-v（竖向） | ui-tlist-h（横向） | ui-tlist-rank（带数字排行）

默认是竖向的样式，修改 class="ui-tlist-h" 可改为横向。

Demo：

Demo（横向）：

Demo（带数字排行）：

代码：

  <ul class="ui-tlist">
  	<li>• <a href="#">曼联宣布新主帅</a></li>
  	<li>• <a href="#">东莞警方查涉毒酒店</a></li>
  	<li>• <a href="#">张柏芝赴台会好友叙旧</a></li>
  	<li>• <a href="#">刘德华为女儿庆生</a></li>
  	<li>• <a href="#">平安证券被罚7575万</a></li>
  </ul>

  <!-- 横向 -->
  <ul class="ui-tlist-h">
  	<li>• <a href="#">曼联宣布新主帅</a></li>
  	<li>• <a href="#">东莞警方查涉毒酒店</a></li>
  	<li>• <a href="#">张柏芝赴台会好友叙旧</a></li>
  	<li>• <a href="#">刘德华为女儿庆生</a></li>
  	<li>• <a href="#">平安证券被罚7575万</a></li>
  	<li>• <a href="#">曼联宣布新主帅</a></li>
  </ul>

  <!-- 带数字排行 -->
  <ul class="ui-tlist-rank">
  	<li class="hot first"><em class="num">1</em><a href="#">曼联宣布新主帅</a></li>
  	<li class="hot second"><em class="num">2</em><a href="#">东莞警方查涉毒酒店</a></li>
  	<li class="hot third"><em class="num">3</em><a href="#">张柏芝赴台会好友叙旧</a></li>
  	<li><em class="num">4</em><a href="#">刘德华为女儿庆生</a></li>
  	<li><em class="num">5</em><a href="#">平安证券被罚7575万</a></li>
  	<li><em class="num">6</em><a href="#">曼联宣布新主帅</a></li>
  </ul>

图片列表 ui-plist | ui-plist-h（横向） | ui-plist-v（竖向）

默认是横向的样式，修改 class="ui-plist-v" 可改为竖向。

Demo：

Demo（竖向）：

代码：

  <div class="ui-plist">
  	<ul>
  		<li class="ui-figure">
  			<div class="pic">
  				<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt="" /></a>
  			</div>
  			<div class="cont">
  				<h3><a href="#">曼联宣布新主帅</a></h3>
  			</div>
  		</li>
  		<li class="ui-figure">
  			<div class="pic">
  				<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt="" /></a>
  			</div>
  			<div class="cont">
  				<h3><a href="#">曼联宣布新主帅</a></h3>
  			</div>
  		</li>
  		<li class="ui-figure">
  			<div class="pic">
  				<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt="" /></a>
  			</div>
  			<div class="cont">
  				<h3><a href="#">曼联宣布新主帅</a></h3>
  			</div>
  		</li>
  		<li class="ui-figure">
  			<div class="pic">
  				<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt="" /></a>
  			</div>
  			<div class="cont">
  				<h3><a href="#">曼联宣布新主帅</a></h3>
  			</div>
  		</li>
  		<li class="ui-figure">
  			<div class="pic">
  				<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt="" /></a>
  			</div>
  			<div class="cont">
  				<h3><a href="#">曼联宣布新主帅</a></h3>
  			</div>
  		</li>
  	</ul>
  </div>

  <!-- 竖向 -->
  <div class="ui-plist-v">
  	<ul>
  		<li class="ui-figure" style="width:130px;">
  			<div class="pic">
  				<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt=""></a>
  			</div>
  			<div class="cont">
  				<h3><a href="#">曼联宣布新主帅</a></h3>
  			</div>
  		</li>
  		<li class="ui-figure" style="width:130px;">
  			<div class="pic">
  				<a href="#"><img src="./static/img/common/cat.jpg" width="130" height="108" alt=""></a>
  			</div>
  			<div class="cont">
  				<h3><a href="#">曼联宣布新主帅</a></h3>
  			</div>
  		</li>
  	</ul>
  </div>

混合列表 ui-list | ui-list-v（竖向） | ui-list-h（横向）

默认是竖向的样式，修改 class="ui-list-h" 可改为横向。

Demo：

  • 混合列表项1
  • 混合列表项2
  • 混合列表项3

Demo（横向）：

  • 混合列表项1
  • 混合列表项2
  • 混合列表项3

代码：

  <ul class="ui-list">
  	<li>混合列表项1</li>
  	<li>混合列表项2</li>
  	<li>混合列表项3</li>
  </ul>

  <!-- 横向 -->
  <ul class="ui-list-h">
  	<li>混合列表项1</li>
  	<li>混合列表项2</li>
  	<li>混合列表项3</li>
  </ul>

表格 ui-table

Demo：

说明文字
时间 轮次 对阵 播放
2013-05-19 23:00 第38轮 维甘2:2阿斯顿维拉 全场 集锦
2013-05-19 23:00 第38轮 维甘2:2阿斯顿维拉 全场 集锦
2013-05-19 23:00 第38轮 维甘2:2阿斯顿维拉 全场 集锦
2013-05-19 23:00 第38轮 维甘2:2阿斯顿维拉 全场 集锦
2013-05-19 23:00 第38轮 维甘2:2阿斯顿维拉 全场 集锦

代码：

  <table border="0" cellpadding="0" cellspacing="0" class="ui-table" width="100%">
  	<caption>说明文字</caption>
  	<tr>
  		<th>时间</th>
  		<th>轮次</th>
  		<th>对阵</th>
  		<th>播放</th>
  	</tr>
  	<tr>
  		<td>2013-05-19 23:00</td>
  		<td>第38轮</td>
  		<td>维甘2:2阿斯顿维拉</td>
  		<td>全场 集锦</td>
  	</tr>
  	<tr class="even">
  		<td>2013-05-19 23:00</td>
  		<td>第38轮</td>
  		<td>维甘2:2阿斯顿维拉</td>
  		<td>全场 集锦</td>
  	</tr>
  	<tr>
  		<td>2013-05-19 23:00</td>
  		<td>第38轮</td>
  		<td>维甘2:2阿斯顿维拉</td>
  		<td>全场 集锦</td>
  	</tr>
  	<tr class="even">
  		<td>2013-05-19 23:00</td>
  		<td>第38轮</td>
  		<td>维甘2:2阿斯顿维拉</td>
  		<td>全场 集锦</td>
  	</tr>
  	<tr>
  		<td>2013-05-19 23:00</td>
  		<td>第38轮</td>
  		<td>维甘2:2阿斯顿维拉</td>
  		<td>全场 集锦</td>
  	</tr>
  </table>

表单 ui-form

Demo：

提示提示提示
     
错误提示
        

代码：

  <form class="ui-form">
    <div class="ui-form-item">
      <label class="ui-form-label">姓名：</label>
      <div class="ui-form-cont">
        <input type="text" class="ui-input" /> <span>提示提示提示</span>
      </div>
    </div>
    <div class="ui-form-item">
      <label class="ui-form-label">性别：</label>
      <div class="ui-form-cont">
        <input type="radio" id="radio_male" name="sex" /> <label for="radio_male">男</label>  
        <input type="radio" id="radio_female" name="sex" /> <label for="radio_female">女</label>  
        <input type="radio" id="radio_secret" name="sex" checked="checked" /> <label for="radio_secret">保密</label>
      </div>
    </div>
    <div class="ui-form-item">
      <label class="ui-form-label">年龄：</label>
      <div class="ui-form-cont">
        <select class="ui-select">
          <option>- 请选择 -</option>
          <option>18</option>
          <option>19</option>
          <option>20</option>
        </select>
      </div>
    </div>
    <div class="ui-form-item">
      <label class="ui-form-label">邮箱：</label>
      <div class="ui-form-cont">
        <input type="text" class="ui-input ui-input-error" /> <span class="ui-red">错误提示</span>
      </div>
    </div>
    <div class="ui-form-item">
      <label class="ui-form-label">兴趣：</label>
      <div class="ui-form-cont">
        <input type="checkbox" id="cbox_1" /> <label for="cbox_1">文学</label>  
        <input type="checkbox" id="cbox_2" /> <label for="cbox_2">电影</label>  
        <input type="checkbox" id="cbox_3" /> <label for="cbox_3">天文</label>  
      </div>
    </div>
    <div class="ui-form-item">
      <label class="ui-form-label">留言：</label>
      <div class="ui-form-cont">
        <textarea class="ui-textarea" style="width:400px;height:150px;"></textarea>
      </div>
    </div>
    <div class="ui-form-item">
      <label class="ui-form-label"></label>
      <div class="ui-form-cont">
        <input type="button" class="ui-btn" value="确定" /> <input type="button" class="ui-btn" value="取消" />
      </div>
    </div>
  </form>
© 2013-2019 Tom Template