代码拉取完成,页面将自动刷新
同步操作将从 神者X奇迹/xui 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/layout.css" type="text/css" rel="stylesheet" />
<link href="css/xui.css" type="text/css" rel="stylesheet" />
<title>xui</title>
</head>
<body>
<div class="page">
<div class="page_pr">
<div class="pleft">
<ul>
<li><a href="#input">表单 <form></a></li>
<li class="on son li_input"><a href="#input">文本框</a></li>
<li class="son li_textarea"><a href="#textarea">文本域</a></li>
<li class="son li_select"><a href="#select">下拉框</a></li>
<li class="son li_button"><a href="#button">按钮</a></li>
<li class="son li_radio"><a href="#radio">单选框</a></li>
<li class="son li_checkbox"><a href="#checkbox">复选框</a></li>
<li class="son li_switch"><a href="#switch">开关</a></li>
<li class="son li_file"><a href="#file">上传控件</a></li>
<li><a href="#table_1">表格 <table></a></li>
<li class="son li_table_1"><a href="#table_1">默认样式</a></li>
<li class="son li_table_2"><a href="#table_2">首行样式</a></li>
<li class="son li_table_3"><a href="#table_3">无外部边框样式</a></li>
<li class="son li_table_4"><a href="#table_4">无内部边框样式</a></li>
<li class="son li_table_5"><a href="#table_5">无全部边框样式</a></li>
<li class="son li_table_6"><a href="#table_6">水平边框样式</a></li>
<li class="son li_table_7"><a href="#table_7">水平边框无外边框样式</a></li>
<li class="son li_table_8"><a href="#table_8">圆角样式</a></li>
<li class="son li_table_9"><a href="#table_9">行间隔背景色</a></li>
<li class="son li_table_10"><a href="#table_10">鼠标悬停样式</a></li>
</ul>
</div><!--pleft-->
<div class="pright">
<div id="input" class="maindiv">
<div class="page_tit">文本框 <input></div>
<div class="table_row">
<div class="page_tit2">默认样式</div>
<div class="page_tit3">长度为<span>200px</span>,高度为<span>34px</span></div>
<div class="example">
<input class="xinput" type="text" placeholder="默认样式" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xinput" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">圆角样式</div>
<div class="page_tit3">border-radius为<span>5px</span></div>
<div class="example">
<input class="xinput xround" type="text" placeholder="圆角样式" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xinput <span>xround</span>" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">宽度</div>
<div class="page_tit3"><code>xwidth1</code>长度为<span>250px</span>,每次增加<span>50px</span></div>
<div class="example">
<input class="xinput xwidth1" type="text" placeholder="xwidth1: 250px" /><br><br>
<input class="xinput xwidth2" type="text" placeholder="xwidth2: 300px" /><br><br>
<input class="xinput xwidth3" type="text" placeholder="xwidth3: 350px" /><br><br>
<input class="xinput xwidth4" type="text" placeholder="xwidth4: 400px" /><br><br>
<input class="xinput xwidth5" type="text" placeholder="xwidth5: 450px" /><br><br>
<input class="xinput xwidth6" type="text" placeholder="xwidth6: 500px" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xinput <span>xwidth1</span>" /></span></li>
<li><span><input class="xinput <span>xwidth2</span>" /></span></li>
<li><span><input class="xinput <span>xwidth3</span>" /></span></li>
<li><span><input class="xinput <span>xwidth4</span>" /></span></li>
<li><span><input class="xinput <span>xwidth5</span>" /></span></li>
<li><span><input class="xinput <span>xwidth6</span>" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">高度</div>
<div class="page_tit3"><code>xheight1</code>高度为<span>38px</span>,每次增加<span>4px</span></div>
<div class="example">
<input class="xinput xheight1" type="text" placeholder="xheight1: 38px" /><br><br>
<input class="xinput xheight2" type="text" placeholder="xheight2: 42px" /><br><br>
<input class="xinput xheight3" type="text" placeholder="xheight3: 46px" /><br><br>
<input class="xinput xheight4" type="text" placeholder="xheight4: 50px" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xinput <span>xheight1</span>" /></span></li>
<li><span><input class="xinput <span>xheight2</span>" /></span></li>
<li><span><input class="xinput <span>xheight3</span>" /></span></li>
<li><span><input class="xinput <span>xheight4</span>" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">100%宽度</div>
<div class="page_tit3">宽度为<span>100%</span></div>
<div class="example">
<input class="xinput xful" type="text" placeholder="100%宽度" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xinput <span>xful</span>" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">下划线</div>
<div class="example">
<input class="xinput xunder" type="text" placeholder="下划线" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xinput <span>xunder</span>" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">只读文本框</div>
<div class="example">
<input class="xinput xreadonly" type="text" value="只读文本框" readonly="readonly" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xinput <span>xreadonly</span>" readonly="readonly" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">组合样式</div>
<div class="page_tit3">可多个样式随意组合</div>
<div class="example">
<input class="xinput xful xround" type="text" placeholder="组合样式: 宽度100%+圆角" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xinput <span>xful xround</span>" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
</div><!--input-->
<div id="textarea" class="maindiv">
<div class="page_tit">文本域 <textarea></div>
<div class="table_row">
<div class="page_tit2">默认样式</div>
<div class="page_tit3">长度为<span>200px</span>,高度为<span>80px</span></div>
<div class="example">
<textarea class="xtext" placeholder="默认样式"></textarea>
</div><!--example-->
<div class="pre">
<ol>
<li><span><textarea class="xtext"></textarea></span></li>
</ol>
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">圆角样式</div>
<div class="page_tit3">border-radius为<span>5px</span></div>
<div class="example">
<textarea class="xtext xround" placeholder="圆角样式"></textarea>
</div><!--example-->
<div class="pre">
<ol>
<li><span><textarea class="xtext <span>xround</span>"></textarea></span></li>
</ol>
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">宽度</div>
<div class="page_tit3"><code>xwidth1</code>长度为<span>250px</span>,每次增加<span>50px</span></div>
<div class="example">
<textarea class="xtext xwidth1" type="text" placeholder="xwidth1: 250px" /></textarea><br><br>
<textarea class="xtext xwidth2" type="text" placeholder="xwidth2: 300px" /></textarea><br><br>
<textarea class="xtext xwidth3" type="text" placeholder="xwidth3: 350px" /></textarea><br><br>
<textarea class="xtext xwidth4" type="text" placeholder="xwidth4: 400px" /></textarea><br><br>
<textarea class="xtext xwidth5" type="text" placeholder="xwidth5: 450px" /></textarea><br><br>
<textarea class="xtext xwidth6" type="text" placeholder="xwidth6: 500px" /></textarea>
</div><!--example-->
<div class="pre">
<ol>
<li><span><textarea class="xtext <span>xwidth1</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xwidth2</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xwidth3</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xwidth4</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xwidth5</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xwidth6</span>" ><textarea></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">高度</div>
<div class="page_tit3"><code>xheight1</code>高度为<span>100px</span>,每次增加<span>20px</span></div>
<div class="example">
<textarea class="xtext xheight1" type="text" placeholder="xheight1: 100px" /></textarea><br><br>
<textarea class="xtext xheight2" type="text" placeholder="xheight2: 120px" /></textarea><br><br>
<textarea class="xtext xheight3" type="text" placeholder="xheight3: 140px" /></textarea><br><br>
<textarea class="xtext xheight4" type="text" placeholder="xheight4: 160px" /></textarea><br><br>
<textarea class="xtext xheight5" type="text" placeholder="xheight5: 180px" /></textarea><br><br>
<textarea class="xtext xheight6" type="text" placeholder="xheight6: 200px" /></textarea>
</div><!--example-->
<div class="pre">
<ol>
<li><span><textarea class="xtext <span>xheight1</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xheight2</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xheight3</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xheight4</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xheight5</span>" ><textarea></span></li>
<li><span><textarea class="xtext <span>xheight6</span>" ><textarea></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">100%宽度</div>
<div class="page_tit3">长度为<span>100%</span></div>
<div class="example">
<textarea class="xtext xful" placeholder="100%宽度"></textarea>
</div><!--example-->
<div class="pre">
<ol>
<li><span><textarea class="xtext <span>xful</span>"></textarea></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">下划线</div>
<div class="example">
<textarea class="xtext xunder" placeholder="下划线"></textarea>
</div><!--example-->
<div class="pre">
<ol>
<li><span><textarea class="xtext <span>xunder</span>" ></textarea></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">组合样式</div>
<div class="page_tit3">可多个样式随意组合</div>
<div class="example">
<textarea class="xtext xful xround" placeholder="组合样式: 宽度100%+圆角"></textarea>
</div><!--example-->
<div class="pre">
<ol>
<li><span><textarea class="xtext <span>xful xround</span>"></textarea></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
</div><!--textarea-->
<div id="select" class="maindiv">
<div class="page_tit">下拉框 <select></div>
<div class="table_row">
<div class="page_tit2">默认样式</div>
<div class="page_tit3">长度为<span>200px</span>,高度为<span>34px</span></div>
<div class="example">
<select class="xselect"><option>默认样式</option><option>选项2</option><option>选项3</option></select>
</div><!--example-->
<div class="pre">
<ol>
<li><span><select class="xselect"></span></li>
<li class="level2"><span><option>选项1</option></span></li>
<li class="level2"><span><option>选项2</option></span></li>
<li class="level2"><span><option>选项3</option></span></li>
<li><span></select></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">圆角样式</div>
<div class="page_tit3">border-radius为<span>5px</span></div>
<div class="example">
<select class="xselect xround"><option>圆角样式</option><option>选项2</option><option>选项3</option></select>
</div><!--example-->
<div class="pre">
<ol>
<li><span><select class="xselect <span>xround</span>"></span></li>
<li class="level2"><span><option>选项1</option></span></li>
<li class="level2"><span><option>选项2</option></span></li>
<li class="level2"><span><option>选项3</option></span></li>
<li><span></select></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">深色样式</div>
<div class="page_tit3">适用于<span>暗色调</span>场景</div>
<div class="example">
<select class="xselect xblack"><option>黑色样式</option><option>选项2</option><option>选项3</option></select>
</div><!--example-->
<div class="pre">
<ol>
<li><span><select class="xselect <span>xblack</span>"></span></li>
<li class="level2"><span><option>选项1</option></span></li>
<li class="level2"><span><option>选项2</option></span></li>
<li class="level2"><span><option>选项3</option></span></li>
<li><span></select></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">宽度</div>
<div class="page_tit3"><code>xwidth1</code>长度为<span>250px</span>,每次增加<span>50px</span></div>
<div class="example">
<select class="xselect xwidth1"><option>xwidth1: 250px</option><option>选项2</option><option>选项3</option></select><br><br>
<select class="xselect xwidth2"><option>xwidth2: 300px</option><option>选项2</option><option>选项3</option></select><br><br>
<select class="xselect xwidth3"><option>xwidth3: 350px</option><option>选项2</option><option>选项3</option></select><br><br>
<select class="xselect xwidth4"><option>xwidth4: 400px</option><option>选项2</option><option>选项3</option></select><br><br>
<select class="xselect xwidth5"><option>xwidth5: 450px</option><option>选项2</option><option>选项3</option></select><br><br>
<select class="xselect xwidth6"><option>xwidth6: 500px</option><option>选项2</option><option>选项3</option></select>
</div><!--example-->
<div class="pre">
<ol>
<li><span><select class="xselect <span>xwidth1</span>"></span></li>
<li class="level2"><span><option>选项1</option></span></li>
<li class="level2"><span><option>选项2</option></span></li>
<li class="level2"><span><option>选项3</option></span></li>
<li><span></select></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">高度</div>
<div class="page_tit3"><code>xheight1</code>高度为<span>38px</span>,每次增加<span>4px</span></div>
<div class="example">
<select class="xselect xheight1"><option>xheight1: 38px</option><option>选项2</option><option>选项3</option></select><br><br>
<select class="xselect xheight2"><option>xheight2: 42px</option><option>选项2</option><option>选项3</option></select><br><br>
<select class="xselect xheight3"><option>xheight3: 46px</option><option>选项2</option><option>选项3</option></select><br><br>
<select class="xselect xheight4"><option>xheight4: 50px</option><option>选项2</option><option>选项3</option></select>
</div><!--example-->
<div class="pre">
<ol>
<li><span><select class="xselect <span>xheight1</span>"></span></li>
<li class="level2"><span><option>选项1</option></span></li>
<li class="level2"><span><option>选项2</option></span></li>
<li class="level2"><span><option>选项3</option></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">100%宽度</div>
<div class="page_tit3">长度为<span>100%</span></div>
<div class="example">
<select class="xselect xful"><option>100%宽度</option><option>选项2</option><option>选项3</option></select>
</div><!--example-->
<div class="pre">
<ol>
<li><span><select class="xselect <span>xful</span>"></span></li>
<li class="level2"><span><option>选项1</option></span></li>
<li class="level2"><span><option>选项2</option></span></li>
<li class="level2"><span><option>选项3</option></span></li>
<li><span></select></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">组合样式</div>
<div class="page_tit3">可多个样式随意组合</div>
<div class="example">
<select class="xselect xful xround"><option>组合样式: 宽度100%+圆角</option><option>选项2</option><option>选项3</option></select>
</div><!--example-->
<div class="pre">
<ol>
<li><span><select class="xselect <span>xful xround</span>"></span></li>
<li class="level2"><span><option>选项1</option></span></li>
<li class="level2"><span><option>选项2</option></span></li>
<li class="level2"><span><option>选项3</option></span></li>
<li><span></select></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
</div><!--select-->
<div id="button" class="maindiv">
<div class="page_tit">按钮 <button></div>
<table class="ptable">
<tr class="first">
<td width="180">class=""</td>
<td width="350">样式</td>
<td>代码</td>
</tr>
<tr>
<td><code>xbutton</code></td>
<td><button class="xbutton">默认按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton">按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xblue</code></td>
<td><button class="xbutton xblue">蓝色按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xblue</span>">按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xred</code></td>
<td><button class="xbutton xred">红色按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xred</span>">按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xyellow</code></td>
<td><button class="xbutton xyellow">黄色按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xyellow</span>">按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xgreen</code></td>
<td><button class="xbutton xgreen">绿色按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xgreen</span>">按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xblack</code></td>
<td><button class="xbutton xblack">黑色按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xblack</span>">按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xround</code></td>
<td><button class="xbutton xround">圆角按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xround</span>">按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xdisabled</code></td>
<td><button class="xbutton xdisabled">模拟禁用按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xdisabled</span>">按钮</button></td>
</tr>
<tr>
<td><code>xbutton:disabled</code></td>
<td><button class="xbutton" disabled="disabled">真禁用按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton" <span class="red">disabled="disabled"</span>>按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xlit</code></td>
<td><button class="xbutton xlit">小尺寸按钮</button> <button class="xbutton">普通按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xlit</span>" >按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xful</code></td>
<td><button class="xbutton xful">宽度100%按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xful</span>">按钮</button></td>
</tr>
<tr>
<td><code>xbutton</code> <code>xblue</code> <code>xround</code></td>
<td><button class="xbutton xblue xround">组合样式(蓝色+圆角)按钮</button></td>
<td style="white-space:nowrap;"><button class="xbutton <span class="red">xblue xround</span>">按钮</button></td>
</tr>
</table>
</div><!--button-->
<div id="radio" class="maindiv">
<div class="page_tit">单选框 <input type="radio"></div>
<div class="table_row">
<table class="ptable">
<tr class="first">
<td width="160" rowspan="6" align="center"><strong>颜色表</strong></td>
<td>描述</td>
<td>class</td>
</tr>
<tr>
<td>蓝色</td>
<td><code>xblue</code> <code>xblue2</code></td>
</tr>
<tr>
<td>红色</td>
<td><code>xred</code> <code>xred2</code></td>
</tr>
<tr>
<td>黄色</td>
<td><code>xyellow</code> <code>xyellow2</code></td>
</tr>
<tr>
<td>绿色</td>
<td><code>xgreen</code> <code>xgreen2</code></td>
</tr>
<tr>
<td>黑色</td>
<td><code>xblack</code> <code>xblack2</code></td>
</tr>
<tr>
<td colspan="3"><strong>颜色后面加 2 时,表示选中后文字一起变色,具体见下方例示代码</strong></td>
</tr>
</table>
<!-- <table class="ptable">
<tr class="first">
<td width="180">class=""</td>
<td>样式</td>
</tr>
<tr>
<td><code>xradio</code></td>
<td><div class="xradio"><label><input type="radio" checked="checked" /><em></em><span>默认样式</span></label></div></td>
</tr>
<tr>
<td><code>xradio</code> <code>xblue</code></td>
<td><div class="xradio xblue"><label><input type="radio" checked="checked" /><em></em><span>蓝色样式</span></label></div></td>
</tr>
<tr>
<td><code>xradio</code> <code>xred</code></td>
<td><div class="xradio xred"><label><input type="radio" checked="checked" /><em></em><span>红色样式</span></label></div></td>
</tr>
<tr>
<td><code>xradio</code> <code>xyellow</code></td>
<td><div class="xradio xyellow"><label><input type="radio" checked="checked" /><em></em><span>黄色样式</span></label></div></td>
</tr>
<tr>
<td><code>radio</code> <code>xgreen</code></td>
<td><div class="xradio xgreen"><label><input type="radio" checked="checked" /><em></em><span>绿色样式</span></label></div></td>
</tr>
<tr>
<td><code>xradio</code> <code>xblack</code></td>
<td><div class="xradio xblack"><label><input type="radio" checked="checked" /><em></em><span>黑色样式</span></label></div></td>
</tr>
</table> -->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">默认样式</div>
<div class="example">
<span class="xradio"><label><input type="radio" name="radio1_1" checked="checked" /><em></em><span>默认</span></label></span>
<span class="xradio xblue"><label><input type="radio" name="radio1_2" checked="checked" /><em></em><span>蓝色</span></label></span>
<span class="xradio xred"><label><input type="radio" name="radio1_3" checked="checked" /><em></em><span>红色</span></label></span>
<span class="xradio xyellow"><label><input type="radio" name="radio1_4" checked="checked" /><em></em><span>黄色</span></label></span>
<span class="xradio xgreen"><label><input type="radio" name="radio1_5" checked="checked" /><em></em><span>绿色</span></label></span>
<span class="xradio xblack"><label><input type="radio" name="radio1_6" checked="checked" /><em></em><span>黑色</span></label></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><span class="xradio"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="radio" name="radio1" /><em></em></span></li>
<li class="level3"><span><span>默认样式</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></span></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">选中后文字也一起变色</div>
<div class="example">
<span class="xradio"><label><input type="radio" name="radio2_1" checked="checked" /><em></em><span>默认</span></label></span>
<span class="xradio xblue2"><label><input type="radio" name="radio2_2" checked="checked" /><em></em><span>蓝色</span></label></span>
<span class="xradio xred2"><label><input type="radio" name="radio2_3" checked="checked" /><em></em><span>红色</span></label></span>
<span class="xradio xyellow2"><label><input type="radio" name="radio2_4" checked="checked" /><em></em><span>黄色</span></label></span>
<span class="xradio xgreen2"><label><input type="radio" name="radio2_5" checked="checked" /><em></em><span>绿色</span></label></span>
<span class="xradio xblack2"><label><input type="radio" name="radio2_6" checked="checked" /><em></em><span>黑色</span></label></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><span class="xradio <span>xblue2</span>"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="radio" name="radio1" /><em></em></span></li>
<li class="level3"><span><span>选中后文字也一起变色</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></span></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">纵向单选框</div>
<div class="example">
<div class="xradio xblue"><label><input type="radio" name="radio3_1" /><em></em><span>菠萝</span></label></div>
<div class="xradio xblue"><label><input type="radio" name="radio3_1" /><em></em><span>芒果</span></label></div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><<span>div</span> class="xradio"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="radio" name="radio1" /><em></em></span></li>
<li class="level3"><span><span>菠萝</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></<span>div</span>></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">横向单选框</div>
<div class="example">
<span class="xradio xgreen"><label><input type="radio" name="radio4_1" /><em></em><span>菠萝</span></label></span>
<span class="xradio xgreen"><label><input type="radio" name="radio4_1" /><em></em><span>芒果</span></label></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><<span>span</span> class="xradio"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="radio" name="radio1" /><em></em></span></li>
<li class="level3"><span><span>菠萝</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></<span>span</span>></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
</div><!--radio-->
<div id="checkbox" class="maindiv">
<div class="page_tit">复选框 <input type="checkbox"></div>
<div class="table_row">
<table class="ptable">
<tr class="first">
<td width="160" rowspan="6" align="center"><strong>颜色表</strong></td>
<td>描述</td>
<td>class</td>
</tr>
<tr>
<td>蓝色</td>
<td><code>xblue</code> <code>xblue2</code></td>
</tr>
<tr>
<td>红色</td>
<td><code>xred</code> <code>xred2</code></td>
</tr>
<tr>
<td>黄色</td>
<td><code>xyellow</code> <code>xyellow2</code></td>
</tr>
<tr>
<td>绿色</td>
<td><code>xgreen</code> <code>xgreen2</code></td>
</tr>
<tr>
<td>黑色</td>
<td><code>xblack</code> <code>xblack2</code></td>
</tr>
<tr>
<td colspan="3"><strong>颜色后面加 2 时,表示选中后文字一起变色,具体见下方例示代码</strong></td>
</tr>
</table>
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">无文字描述</div>
<div class="example">
<span class="xcheckbox"><label><input type="checkbox" checked="checked" /><em></em></label></span>
<span class="xcheckbox xblue"><label><input type="checkbox" checked="checked" /><em></em></label></span>
<span class="xcheckbox xred"><label><input type="checkbox" checked="checked" /><em></em></label></span>
<span class="xcheckbox xyellow"><label><input type="checkbox" checked="checked" /><em></em></label></span>
<span class="xcheckbox xgreen"><label><input type="checkbox" checked="checked" /><em></em></label></span>
<span class="xcheckbox xblack"><label><input type="checkbox" checked="checked" /><em></em></label></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><span class="xcheckbox"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="checkbox" name="checkbox1[]" /><em></em></span></li>
<li class="level2"><span></label></span></li>
<li><span></span></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">有文字描述</div>
<div class="example">
<span class="xcheckbox"><label><input type="checkbox" checked="checked" /><em></em><span>默认</span></label></span>
<span class="xcheckbox xblue"><label><input type="checkbox" checked="checked" /><em></em><span>蓝色</span></label></span>
<span class="xcheckbox xred"><label><input type="checkbox" checked="checked" /><em></em><span>红色</span></label></span>
<span class="xcheckbox xyellow"><label><input type="checkbox" checked="checked" /><em></em><span>黄色</span></label></span>
<span class="xcheckbox xgreen"><label><input type="checkbox" checked="checked" /><em></em><span>绿色</span></label></span>
<span class="xcheckbox xblack"><label><input type="checkbox" checked="checked" /><em></em><span>黑色</span></label></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><span class="xcheckbox"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="checkbox" name="checkbox1[]" /><em></em></span></li>
<li class="level3"><span><span><span>有文字描述</span></span></span></li>
<li class="level2"><span></label></span></li>
<li><span></span></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">选中后文字也一起变色</div>
<div class="example">
<span class="xcheckbox"><label><input type="checkbox" checked="checked" /><em></em><span>默认</span></label></span>
<span class="xcheckbox xblue2"><label><input type="checkbox" checked="checked" /><em></em><span>蓝色</span></label></span>
<span class="xcheckbox xred2"><label><input type="checkbox" checked="checked" /><em></em><span>红色</span></label></span>
<span class="xcheckbox xyellow2"><label><input type="checkbox" checked="checked" /><em></em><span>黄色</span></label></span>
<span class="xcheckbox xgreen2"><label><input type="checkbox" checked="checked" /><em></em><span>绿色</span></label></span>
<span class="xcheckbox xblack2"><label><input type="checkbox" checked="checked" /><em></em><span>黑色</span></label></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><span class="xcheckbox <span>xblue2</span>"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="checkbox" name="checkbox1[]" /><em></em></span></li>
<li class="level3"><span><span>选中后文字也一起变色</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></span></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">纵向显示</div>
<div class="example">
<div class="xcheckbox xblue"><label><input type="checkbox" checked="checked" /><em></em><span>菠萝</span></label></div>
<div class="xcheckbox xblue"><label><input type="checkbox" /><em></em><span>芒果</span></label></div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><<span>div</span> class="xcheckbox"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="checkbox" name="checkbox1[]" /><em></em></span></li>
<li class="level3"><span><span>菠萝</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></<span>div</span>></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">横向显示</div>
<div class="example">
<span class="xcheckbox xgreen"><label><input type="checkbox" checked="checked" /><em></em><span>菠萝</span></label></span>
<span class="xcheckbox xgreen"><label><input type="checkbox" /><em></em><span>芒果</span></label></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><<span>span</span> class="xcheckbox"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="checkbox" name="checkbox1[]" /><em></em></span></li>
<li class="level3"><span><span>菠萝</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></<span>span</span>></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
</div><!--checkbox-->
<div id="switch" class="maindiv">
<div class="page_tit">开关 <input type="checkbox"></div>
<div class="page_tit3">本质上是单个的复选框</div>
<div class="table_row">
<div class="page_tit2">默认样式</div>
<div class="example">
<input class="xswitch" type="checkbox" />
<input class="xswitch" type="checkbox" checked="checked" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xswitch" type="checkbox" name="checkbox1" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">带ON/OFF文字</div>
<div class="example">
<input class="xswitch xonoff" type="checkbox" />
<input class="xswitch xonoff" type="checkbox" checked="checked" />
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xswitch <span>xonoff</span>" type="checkbox" name="checkbox1" /></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">自定义文字描述</div>
<div class="page_tit3">class="<code>xswitch-tip</code>",为 <code><input></code> <span>自定义文字描述</span></div>
<div class="example">
<span class="xswitch-tip"><label><input type="checkbox" /><em></em><span>是否发射核弹</span><span>发射!!</span></label></span>
<span class="xswitch-tip"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射!!</span></label></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="xswitch-tip"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="checkbox" name="checkbox1" /><em></em></span></li>
<li class="level3"><span><span>是否发射核弹</span></span></li>
<li class="level3"><span><span>发射!!</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">其他颜色</div>
<div class="page_tit3">class="<code>xswitch</code>",为 <code><input></code> 额外添加一个<span>颜色CSS</span>即可</div>
<div class="page_tit3">class="<code>xswitch-tip</code>",为 <code><input></code> 父标签额外添加一个<span>颜色CSS</span>即可</div>
<div class="example">
<div class="page_tit4">
<input class="xswitch xblue" type="checkbox" checked="checked" />
<input class="xswitch xred" type="checkbox" checked="checked" />
<input class="xswitch xyellow" type="checkbox" checked="checked" />
<input class="xswitch xgreen" type="checkbox" checked="checked" />
<input class="xswitch xblack" type="checkbox" checked="checked" />
</div>
<div class="page_tit4">
<input class="xswitch xonoff xblue" type="checkbox" checked="checked" />
<input class="xswitch xonoff xred" type="checkbox" checked="checked" />
<input class="xswitch xonoff xyellow" type="checkbox" checked="checked" />
<input class="xswitch xonoff xgreen" type="checkbox" checked="checked" />
<input class="xswitch xonoff xblack" type="checkbox" checked="checked" />
</div>
<div class="page_tit4">
<span class="xswitch-tip xblue"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射!!</span></label></span>
<span class="xswitch-tip xred"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射!!</span></label></span>
<span class="xswitch-tip xyellow"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射!!</span></label></span>
<span class="xswitch-tip xgreen"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射!!</span></label></span>
<span class="xswitch-tip xblack"><label><input type="checkbox" checked="checked" /><em></em><span>是否发射核弹</span><span>发射!!</span></label></span>
</div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><input class="xswitch <span>xblue</span>" type="checkbox" /></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xswitch-tip <span>xblue</span>"></span></li>
<li class="level2"><span><label></span></li>
<li class="level3"><span><input type="checkbox" name="checkbox1" /><em></em></span></li>
<li class="level3"><span><span>是否发射核弹</span></span></li>
<li class="level3"><span><span>发射!!</span></span></li>
<li class="level2"><span></label></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
</div><!--switch-->
<div id="file" class="maindiv">
<div class="page_tit">上传控件 <input type="file"></div>
<div class="page_tit3">class="<code>xfile</code>",为 <code><input></code> 父标签内的上传控件增加默认样式</div>
<div class="table_row">
<div class="page_tit2">默认样式</div>
<div class="example">
<div class="xfile"><input type="file" /><span><i></i>默认样式</span></div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="xfile"></span></li>
<li class="level2"><span><input type="file" /></span></li>
<li class="level2"><span><span><i></i>默认样式</span></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="page_tit3">class="<code>xfile xlit</code>",为 <code><input></code> 父标签内的上传控件增加小尺寸样式</div>
<div class="table_row">
<div class="page_tit2">小尺寸</div>
<div class="example">
<span class="xfile xlit"><input type="file" /><span><i></i>小尺寸</span></span>
<span class="xfile xlit xblue"><input type="file" /><span><i></i>小尺寸</span></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><span class="xfile <span>xlit</span>"></span></li>
<li class="level2"><span><input type="file" /></span></li>
<li class="level2"><span><span><i></i>默认样式</span></span></li>
<li><span></span></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">其他颜色</div>
<div class="example">
<span class="xfile xblue"><input type="file" /><span><i></i>蓝色样式</span></span>
<span class="xfile xred"><input type="file" /><span><i></i>红色样式</span></span>
<span class="xfile xyellow"><input type="file" /><span><i></i>黄色样式</span></span>
<span class="xfile xgreen"><input type="file" /><span><i></i>绿色样式</span></span>
<span class="xfile xblack"><input type="file" /><span><i></i>黑色样式</span></span>
</div><!--example-->
<div class="pre">
<ol>
<li><span><span class="xfile <span>xblue</span>"></span></li>
<li class="level2"><span><input type="file" /></span></li>
<li class="level2"><span><span><i></i>默认样式</span></span></li>
<li><span></span></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">无图标样式</div>
<div class="example">
<div class="xfile"><input type="file" /><span>无图标样式</span></div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="xfile"></span></li>
<li class="level2"><span><input type="file" /></span></li>
<li class="level2"><span><span>无图片样式</span></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">自定义图片样式<img></div>
<div class="page_tit3">图片无尺寸要求</div>
<div class="example">
<div class="xfile"><input type="file" /><span><img src="css/img.png" />自定义图片样式</span></div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="xfile"></span></li>
<li class="level2"><span><input type="file" /></span></li>
<li class="level2"><span><span><span><img src="css/img.png" /></span>自定义图片样式</span></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">自定义font样式<i class="icon-<span>【自定义font class名】</span>"></div>
<div class="page_tit3">当<span><i></span>标签class包含<code>icon-</code> <code>ico-</code> <code>ion-</code> <code>glyphicon-</code> <code>fa-</code> <code>ti-</code> <code>zmdi-</code> <code>wi-</code>(常用图标库)时,默认图标会被替换成新的font图标</div>
<div class="example">
<div class="xfile"><input type="file" /><span><i class="icon-xiaolian"></i>自定义font样式</span></div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="xfile"></span></li>
<li class="level2"><span><input type="file" /></span></li>
<li class="level2"><span><span><span><i class="icon-"></i></span>自定义font样式</span></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
<div class="table_row">
<div class="page_tit2">选中文件反馈</div>
<div class="page_tit3">由于css不支持检测是否有选中文件,所以选中反馈需要添加额外的 <code>javascript</code> 代码,这是本项目唯一有用到 <code>javascript</code> 的地方</div>
<div class="page_tit3">当然这不是必要的,你可以选择不加,只是用户体验不好,用户不知道有没有选中文件</div>
<div class="page_tit3">本例使用了原生的 <code>javascript</code> 代码,无需加载 <code>jQuery</code></div>
<div class="example">
<span class="xfile"><input type="file" onchange="xfileok(this)" multiple data-oldname="sad" /><span><i></i>未选中文件</span></span>
<span class="xfile"><input type="file" onchange="xfileok(this)" multiple /><span>无图标样式</span></span>
<span class="xfile"><input type="file" onchange="xfileok(this)" multiple /><span><img src="css/img.png" />自定义图标样式</span></span>
<span class="xfile"><input type="file" onchange="xfileok(this)" multiple /><span><i class="icon-xiaolian"></i>自定义font样式</span></span>
<script>
function xfileok(o)
{
//获取文件名
let files = o.files;
let fval;
if(files.length>1){
fval = files.length+"个文件";
}else if(files.length==1){
fval = files[0].name;
}
//修改文本
let prefix = '已选择: ';
let reg = /(\<i(\s{1,}class\=[\"\'][A-z0-9_\-]*[\"\'])?\>\<\/i\>|\<img\s{1,}src\=[\"\'][A-z0-9_\/\.\-]*[\"\']\s{0,}\/{0,}\>)?(\S*)/;
let span = o.parentNode.getElementsByTagName("span")[0];
spanhtml = span.innerHTML;
match = spanhtml.match(reg);
oldname = span.dataset.oldname;
html = '';
if(match[1]){
html += match[1];
}
if(fval){
html += prefix + fval;
span.innerHTML = html;
if(!oldname){
span.dataset.oldname = match[3];
}
}else{
html += oldname;
span.innerHTML = html;
}
}
</script>
</div><!--example-->
<div class="pre">
<ol>
<li><span><div class="xfile"></span></li>
<li class="level2"><span><input type="file" <span>onchange="xfileok(this)"</span> /></span></li>
<li class="level2"><span><span><i></i>未选中文件</span></span></li>
<li><span></div></span></li>
<li><span></span></li>
<li><span><script></span></li>
<li><span>function xfileok(o)</span></li>
<li><span>{</span></li>
<li class="level2"><span>//获取文件名</span></li>
<li class="level2"><span>let files = o.files;</span></li>
<li class="level2"><span>let fval;</span></li>
<li class="level2"><span>if(files.length>1){</span></li>
<li class="level3"><span>fval = files.length+"个文件";</span></li>
<li class="level2"><span>}else if(files.length==1){</span></li>
<li class="level3"><span>fval = files[0].name;</span></li>
<li class="level2"><span>}</span></li>
<li><span></span></li>
<li class="level2"><span>//修改文本</span></li>
<li class="level2"><span>let prefix = '已选择: ';</span></li>
<li class="level2"><span>let reg = /(\<i(\s{1,}class\=[\"\'][A-z0-9_\-]*[\"\'])?\>\<\/i\>|\<img\s{1,}src\=[\"\'][A-z0-9_\/\.\-]*[\"\']\s{0,}\/{0,}\>)?(\S*)/;</span></li>
<li class="level2"><span>let span = o.parentNode.getElementsByTagName("span")[0];</span></li>
<li class="level2"><span>spanhtml = span.innerHTML;</span></li>
<li class="level2"><span>match = spanhtml.match(reg);</span></li>
<li class="level2"><span>oldname = span.dataset.oldname;</span></li>
<li><span></span></li>
<li class="level2"><span>html = '';</span></li>
<li class="level2"><span>if(match[1]){</span></li>
<li class="level3"><span>html += match[1];</span></li>
<li class="level2"><span>}</span></li>
<li class="level2"><span>if(fval){</span></li>
<li class="level3"><span>html += prefix + fval;</span></li>
<li class="level3"><span>span.innerHTML = html;</span></li>
<li class="level3"><span>if(!oldname){</span></li>
<li class="level4"><span>span.dataset.oldname = match[3];</span></li>
<li class="level3"><span>}</span></li>
<li class="level2"><span>}else{</span></li>
<li class="level3"><span>html += oldname;</span></li>
<li class="level3"><span>span.innerHTML = html;</span></li>
<li class="level2"><span>}</span></li>
<li><span>}</span></li>
<li><span></script></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div><!--pre-->
</div><!--table_row-->
</div><!--file-->
<div id="table" class="maindiv">
<div class="page_tit">表格 <table></div>
<div class="table_row">
<table class="ptable">
<tr class="first">
<td width="140">标签</td>
<td>class=""</td>
<td>描述</td>
</tr>
<tr>
<td><table></td>
<td><table class="<code>xtable</code>">…</table></td>
<td>表格本身</td>
</tr>
<tr>
<td><table>的父标签</td>
<td><div class="<code>xtablein</code>"><table>…</table></div></td>
<td>元素内的表格</td>
</tr>
</table>
</div><!--table_row-->
<div id="table_1" class="table_row">
<div class="page_tit2">默认样式:<span>少量的内边距(padding:8px)和边框</span></div>
<div class="page_tit3">class="<code>xtable</code>",为 <code><table></code> 标签增加<span>样式</span>,对下级表格不生效</div>
<div class="page_tit3">class="<code>xtablein</code>",为 <code><table></code> 父标签内的下一级表格增加<span>样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xtableall</code>",为 <code><table></code> 父标签内的所有下级表格增加<span>样式</span></div>
<div class="example">
<table class="xtable xodd">
<tr>
<td width="100">A</td>
<td width="200">B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>
<table class="xtable">
<tr>
<td>ASC</td>
<td>ASC</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>这是一个表格,</td>
<td>对下级的表格不会生效</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<div class="xtablein">
<table>
<tr>
<td width="100">A</td>
<td width="200">B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>
<table class="xtable">
<tr>
<td>ASC</td>
<td>ASC</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>这是一个表格,</td>
<td>对下级的表格不会生效</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<p> </p>
<div class="xtablein xtableall xround xodd">
<table>
<tr>
<td width="100">A</td>
<td width="200">B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>
<table class="xtable">
<tr>
<td>ASC</td>
<td>ASC</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>这是一个表格,</td>
<td>对所有下级的表格生效</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
<li></li>
<li><span><div class="xtablein xtableall"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_2" class="table_row">
<div class="page_tit2">首行样式</div>
<div class="page_tit3">class="<code>xtable</code> <code>xfirst</code>",为 <code><table></code> 标签增加<span>首行样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xfirst</code>",为 <code><table></code> 父标签内的表格增加<span>首行样式</span></div>
<div class="page_tit3">当表格存在 <span><thead></span> 时,需而外添加一个 class <code>xthead</code>,否则 <span><tbody></span> 第一行(实际上的表格第二行)也会变成<span>首行样式</span></div>
<div class="example">
<table class="xtable xfirst">
<tr>
<td rowspan="1" colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2" colspan="1">1</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2" colspan="1">f</td>
</tr>
<tr>
<td>2</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>3</td>
<td>i</td>
<td rowspan="1" colspan="2">j</td>
</tr>
</table>
<br / >
<table class="xtable xfirst xthead">
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</tbody>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xnobor-out</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xnobor-out</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
<li></li>
<li>/**********/</li>
<li></li>
<li><span><div class="xtablein <span>xthead</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span><thead></span></li>
<li class="level4"><span>…</span></li>
<li class="level3"><span></thead></span></li>
<li class="level3"><span><tbody></span></li>
<li class="level4"><span>…</span></li>
<li class="level3"><span></tbody></span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_3" class="table_row">
<div class="page_tit2">无外部边框样式</div>
<div class="page_tit3">class="<code>xtable</code> <code>xnobor-out</code>",为 <code><table></code> 标签增加<span>无外部边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xnobor-out</code>",为 <code><table></code> 父标签内的表格增加<span>无外部边框样式</span></div>
<div class="example">
<table class="xtable xnobor-out">
<tr>
<td rowspan="1" colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2" colspan="1">1</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2" colspan="1">f</td>
</tr>
<tr>
<td>2</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>3</td>
<td>i</td>
<td rowspan="1" colspan="2">j</td>
</tr>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xnobor-out</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xnobor-out</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_4" class="table_row">
<div class="page_tit2">无内部边框样式</div>
<div class="page_tit3">class="<code>xtable</code> <code>xnobor-in</code>",为 <code><table></code> 标签增加<span>无内部边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xnobor-in</code>",为 <code><table></code> 父标签内的表格增加<span>无内部边框样式</span></div>
<div class="example">
<table class="xtable xnobor-in">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xnobor-in</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xnobor-in</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_5" class="table_row">
<div class="page_tit2">无全部边框样式</div>
<div class="page_tit3">class="<code>xtable</code> <code>xnobor-all</code>",为 <code><table></code> 标签增加<span>无全部边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xnobor-all</code>",为 <code><table></code> 父标签内的表格增加<span>无全部边框样式</span></div>
<div class="example">
<table class="xtable xnobor-all">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xnobor-all</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xnobor-all</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_6" class="table_row">
<div class="page_tit2">水平边框样式</div>
<div class="page_tit3">class="<code>xtable</code> <code>xbor-tr</code>",为 <code><table></code> 标签增加<span>水平边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xbor-tr</code>",为 <code><table></code> 父标签内的表格增加<span>水平边框样式</span></div>
<div class="example">
<table class="xtable xbor-tr">
<tr>
<td rowspan="1" colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2" colspan="1">1</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2" colspan="1">f</td>
</tr>
<tr>
<td>2</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>3</td>
<td>i</td>
<td rowspan="1" colspan="2">j</td>
</tr>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xbor-tr</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xbor-tr</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_7" class="table_row">
<div class="page_tit2">水平边框无外边框样式</div>
<div class="page_tit3">class="<code>xtable</code> <code>xbor-tr-noout</code>",为 <code><table></code> 标签增加<span>水平边框无外边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xbor-tr-noout</code>",为 <code><table></code> 父标签内的表格增加<span>水平边框无外边框样式</span></div>
<div class="example">
<table class="xtable xbor-tr-noout">
<tr>
<td rowspan="1" colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2" colspan="1">1</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2" colspan="1">f</td>
</tr>
<tr>
<td>2</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>3</td>
<td>i</td>
<td rowspan="1" colspan="2">j</td>
</tr>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xbor-tr-noout</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xbor-tr-noout</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_8" class="table_row">
<div class="page_tit2">圆角样式</div>
<div class="page_tit3">class="<code>xtable</code> <code>xround</code>",为 <code><table></code> 标签增加<span>圆角样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xround</code>",为 <code><table></code> 父标签内的表格增加<span>圆角样式</span></div>
<div class="example">
<table class="xtable xround">
<tr>
<th>1</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xround</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xround</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_9" class="table_row">
<div class="page_tit2">行间隔背景色 <span>奇数(xodd) 或 偶数(xeven)</span></div>
<div class="page_tit3">class="<code>xtable</code> <code>xodd</code> / <code>xeven</code>",为 <code><table></code> 标签增加<span>行间隔背景色</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xodd</code> / <code>xeven</code>",为 <code><table></code> 父标签内的表格增加<span>行间隔背景色</span></div>
<div class="example">
<table class="xtable xodd">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>3</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</table>
<br />
<table class="xtable xeven">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>3</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xodd</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xodd</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
<li></li>
<li>/****************或****************/</li>
<li></li>
<li><span><table class="xtable <span>xeven</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xeven</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
<div id="table_10" class="table_row">
<div class="page_tit2">鼠标悬停样式</div>
<div class="page_tit3">class="<code>xtable</code> <code>xhover</code>",为 <code><table></code> 标签增加<span>鼠标悬停样式</span></div>
<div class="page_tit3">class="<code>xtable</code> <code>xhover</code>",为 <code><table></code> 父标签内的表格增加<span>鼠标悬停样式</span></div>
<div class="example">
<table class="xtable xhover">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>3</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</table>
</div><!--example-->
<div class="pre">
<ol>
<li><span><table class="xtable <span>xhover</span>"></span></li>
<li class="level2"><span>…</span></li>
<li><span></table></span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span><div class="xtablein <span>xhover</span>"></span></li>
<li class="level2"><span><table></span></li>
<li class="level3"><span>…</span></li>
<li class="level2"><span></table></span></li>
<li><span></div></span></li>
</ol>
<div class="precode"></div>
<div class="preicon">
<span class="precopy precopy1" title="格式化复制"></span>
<span class="precopy precopy2" title="复制"></span>
<span class="pretype" title="暗色调"></span>
</div><!--precopy-->
</div>
</div><!--table_row-->
</div><!--table-->
<div class="table_row">
<div class="page_tit3" style="text-align:right;">本项目为<span>纯css项目</span>,参考了Bootstrap</div>
</div><!--table_row-->
</div><!--pright-->
</div><!--page_pr-->
</div><!--page-->
<!--以下为非必要代码-->
<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="font/iconfont.css" type="text/css" rel="stylesheet" />
<script>
$(window).scroll(function()
{
saction();
});
function saction()
{
liarr = new Array("input","textarea","select","button","radio","checkbox","switch","file","table_1","table_2","table_3","table_4","table_5","table_6","table_7","table_8","table_9","table_10");
d = new Array();
t = $(window).scrollTop();
for(i=0;i<liarr.length;i++)
{
d[i] = $("#"+liarr[i]).offset().top-50; //提前50像素生效
if(t>d[i])
{
$(".li_"+liarr[i]).addClass("on").siblings().removeClass("on");
}
}
}
window.onload=function(){
bheight = window.innerHeight-20;
pheight = $(".pleft").height();
if(bheight<pheight){
$(".pleft").addClass("pleft_no");
}
}
//复制代码
$(document).on("click",".precopy",function(){
pa = $(this).parents(".pre");
olheight = $(pa).find("ol").height();
if($(pa).find(".precode").is(":hidden"))
{
ol = $(pa).find("ol li");
$(pa).find(".precode").css({"height":olheight+"px"});
html = '<textarea class="xtext xful">';
for(i=0;i<ol.length;i++)
{
if($(this).hasClass("precopy2"))
{
if($(ol[i]).hasClass("level2")){
html += " ";
}else if($(ol[i]).hasClass("level3")){
html += " ";
}else if($(ol[i]).hasClass("level4")){
html += " ";
}else if($(ol[i]).hasClass("level5")){
html += " ";
}else if($(ol[i]).hasClass("level6")){
html += " ";
}else if($(ol[i]).hasClass("level7")){
html += " ";
}else if($(ol[i]).hasClass("level8")){
html += " ";
}else if($(ol[i]).hasClass("level9")){
html += " ";
}else if($(ol[i]).hasClass("level9")){
html += " ";
}
}
if($(ol[i]).find("span").html())
{
text = $(ol[i]).find("span").html();
text = text.replace(/\<\/{0,1}span\>/g,""); //去除span标签
html += text;
}
if(i!=ol.length-1 && $(this).hasClass("precopy2")){
html += "\n";
}
}
html += '</textarea>';
$(pa).find(".precode").html(html);
$(pa).find("ol").hide();
$(pa).find(".precode").show();
$(pa).find(".precode textarea").select();
}
else
{
$(pa).find("ol").show();
$(pa).find(".precode").hide();
$(pa).find(".precode").html("");
$(pa).find(".precode").css({"height":""});
}
})
$(document).on("blur",".precode textarea",function(){
$(this).parents(".pre").find("ol").show();
$(this).parent(".precode").hide();
$(this).parent(".precode").html("");
})
//代码暗色调
$(document).on("click",".pretype",function(){
$(this).parents(".pre").toggleClass("on");
})
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。