加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
index.html 100.95 KB
一键复制 编辑 原始数据 按行查看 历史
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101
<!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">表单 &lt;form&gt;</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">表格 &lt;table&gt;</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">文本框 &lt;input&gt;</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>&lt;input class=&quot;xinput&quot; /&gt;</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>&lt;input class=&quot;xinput <span>xround</span>&quot; /&gt;</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>&lt;input class=&quot;xinput <span>xwidth1</span>&quot; /&gt;</span></li>
<li><span>&lt;input class=&quot;xinput <span>xwidth2</span>&quot; /&gt;</span></li>
<li><span>&lt;input class=&quot;xinput <span>xwidth3</span>&quot; /&gt;</span></li>
<li><span>&lt;input class=&quot;xinput <span>xwidth4</span>&quot; /&gt;</span></li>
<li><span>&lt;input class=&quot;xinput <span>xwidth5</span>&quot; /&gt;</span></li>
<li><span>&lt;input class=&quot;xinput <span>xwidth6</span>&quot; /&gt;</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>&lt;input class=&quot;xinput <span>xheight1</span>&quot; /&gt;</span></li>
<li><span>&lt;input class=&quot;xinput <span>xheight2</span>&quot; /&gt;</span></li>
<li><span>&lt;input class=&quot;xinput <span>xheight3</span>&quot; /&gt;</span></li>
<li><span>&lt;input class=&quot;xinput <span>xheight4</span>&quot; /&gt;</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>&lt;input class=&quot;xinput <span>xful</span>&quot; /&gt;</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>&lt;input class=&quot;xinput <span>xunder</span>&quot; /&gt;</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>&lt;input class=&quot;xinput <span>xreadonly</span>&quot; readonly=&quot;readonly&quot; /&gt;</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>&lt;input class=&quot;xinput <span>xful xround</span>&quot; /&gt;</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">文本域 &lt;textarea&gt;</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>&lt;textarea class=&quot;xtext&quot;&gt;&lt;/textarea&gt;</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>&lt;textarea class=&quot;xtext <span>xround</span>&quot;&gt;&lt;/textarea&gt;</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>&lt;textarea class=&quot;xtext <span>xwidth1</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xwidth2</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xwidth3</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xwidth4</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xwidth5</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xwidth6</span>&quot; &gt;&lt;textarea&gt;</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>&lt;textarea class=&quot;xtext <span>xheight1</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xheight2</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xheight3</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xheight4</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xheight5</span>&quot; &gt;&lt;textarea&gt;</span></li>
<li><span>&lt;textarea class=&quot;xtext <span>xheight6</span>&quot; &gt;&lt;textarea&gt;</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>&lt;textarea class=&quot;xtext <span>xful</span>&quot;&gt;&lt;/textarea&gt;</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>&lt;textarea class=&quot;xtext <span>xunder</span>&quot; &gt;&lt;/textarea&gt;</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>&lt;textarea class=&quot;xtext <span>xful xround</span>&quot;&gt;&lt;/textarea&gt;</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">下拉框 &lt;select&gt;</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>&lt;select class=&quot;xselect&quot;&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
<li><span>&lt;/select&gt;</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>&lt;select class=&quot;xselect <span>xround</span>&quot;&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
<li><span>&lt;/select&gt;</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>&lt;select class=&quot;xselect <span>xblack</span>&quot;&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
<li><span>&lt;/select&gt;</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>&lt;select class=&quot;xselect <span>xwidth1</span>&quot;&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
<li><span>&lt;/select&gt;</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>&lt;select class=&quot;xselect <span>xheight1</span>&quot;&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</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>&lt;select class=&quot;xselect <span>xful</span>&quot;&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
<li><span>&lt;/select&gt;</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>&lt;select class=&quot;xselect <span>xful xround</span>&quot;&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
<li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
<li><span>&lt;/select&gt;</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">按钮 &lt;button&gt;</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;">&lt;button class=&quot;xbutton&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton</code> <code>xblue</code></td>
<td><button class="xbutton xblue">蓝色按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xblue</span>&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton</code> <code>xred</code></td>
<td><button class="xbutton xred">红色按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xred</span>&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton</code> <code>xyellow</code></td>
<td><button class="xbutton xyellow">黄色按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xyellow</span>&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton</code> <code>xgreen</code></td>
<td><button class="xbutton xgreen">绿色按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xgreen</span>&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton</code> <code>xblack</code></td>
<td><button class="xbutton xblack">黑色按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xblack</span>&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton</code> <code>xround</code></td>
<td><button class="xbutton xround">圆角按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xround</span>&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton</code> <code>xdisabled</code></td>
<td><button class="xbutton xdisabled">模拟禁用按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xdisabled</span>&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton:disabled</code></td>
<td><button class="xbutton" disabled="disabled">真禁用按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton&quot; <span class="red">disabled="disabled"</span>&gt;按钮&lt;/button&gt;</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;">&lt;button class=&quot;xbutton <span class="red">xlit</span>&quot; &gt;按钮&lt;/button&gt;</td>
</tr>
<tr>
<td><code>xbutton</code> <code>xful</code></td>
<td><button class="xbutton xful">宽度100%按钮</button></td>
<td style="white-space:nowrap;">&lt;button class=&quot;xbutton <span class="red">xful</span>&quot;&gt;按钮&lt;/button&gt;</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;">&lt;button class=&quot;xbutton <span class="red">xblue xround</span>&quot;&gt;按钮&lt;/button&gt;</td>
</tr>
</table>
</div><!--button-->
<div id="radio" class="maindiv">
<div class="page_tit">单选框 &lt;input type="radio"&gt;</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>&lt;span class="xradio"&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;默认样式&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/span&gt;</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>&lt;span class="xradio <span>xblue2</span>"&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;选中后文字也一起变色&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/span&gt;</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>&lt;<span>div</span> class="xradio"&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/<span>div</span>&gt;</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>&lt;<span>span</span> class="xradio"&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/<span>span</span>&gt;</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">复选框 &lt;input type="checkbox"&gt;</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>&lt;span class=&quot;xcheckbox&quot;&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/span&gt;</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>&lt;span class=&quot;xcheckbox&quot;&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span><span>&lt;span&gt;有文字描述&lt;/span&gt;</span></span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/span&gt;</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>&lt;span class=&quot;xcheckbox <span>xblue2</span>&quot;&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;选中后文字也一起变色&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/span&gt;</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>&lt;<span>div</span> class=&quot;xcheckbox&quot;&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/<span>div</span>&gt;</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>&lt;<span>span</span> class=&quot;xcheckbox&quot;&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/<span>span</span>&gt;</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">开关 &lt;input type="checkbox"&gt;</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>&lt;input class=&quot;xswitch&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;</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>&lt;input class=&quot;xswitch <span>xonoff</span>&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;</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>&lt;input&gt;</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>&lt;div class=&quot;xswitch-tip&quot;&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;是否发射核弹&lt;/span&gt;</span></li>
<li class="level3"><span>&lt;span&gt;发射!!&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;input&gt;</code> 额外添加一个<span>颜色CSS</span>即可</div>
<div class="page_tit3">class="<code>xswitch-tip</code>",为 <code>&lt;input&gt;</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>&lt;input class=&quot;xswitch <span>xblue</span>&quot; type=&quot;checkbox&quot; /&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class=&quot;xswitch-tip <span>xblue</span>&quot;&gt;</span></li>
<li class="level2"><span>&lt;label&gt;</span></li>
<li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1&quot; /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
<li class="level3"><span>&lt;span&gt;是否发射核弹&lt;/span&gt;</span></li>
<li class="level3"><span>&lt;span&gt;发射!!&lt;/span&gt;</span></li>
<li class="level2"><span>&lt;/label&gt;</span></li>
<li><span>&lt;/div&gt;</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">上传控件 &lt;input type="file"&gt;</div>
<div class="page_tit3">class="<code>xfile</code>",为 <code>&lt;input&gt;</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>&lt;div class="xfile"&gt;</span></li>
<li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
<li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;input&gt;</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>&lt;span class="xfile <span>xlit</span>"&gt;</span></li>
<li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
<li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
<li><span>&lt;/span&gt;</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>&lt;span class="xfile <span>xblue</span>"&gt;</span></li>
<li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
<li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
<li><span>&lt;/span&gt;</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>&lt;div class="xfile"&gt;</span></li>
<li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
<li class="level2"><span>&lt;span&gt;无图片样式&lt;/span&gt;</span></li>
<li><span>&lt;/div&gt;</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">自定义图片样式&lt;img&gt;</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>&lt;div class="xfile"&gt;</span></li>
<li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
<li class="level2"><span>&lt;span&gt;<span>&lt;img src=&quot;css/img.png&quot; /&gt;</span>自定义图片样式&lt;/span&gt;</span></li>
<li><span>&lt;/div&gt;</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样式&lt;i class=&quot;icon-<span>【自定义font class名】</span>&quot;&gt;</div>
<div class="page_tit3"><span>&lt;i&gt;</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>&lt;div class="xfile"&gt;</span></li>
<li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
<li class="level2"><span>&lt;span&gt;<span>&lt;i class="icon-"&gt;&lt;/i&gt;</span>自定义font样式&lt;/span&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;div class="xfile"&gt;</span></li>
<li class="level2"><span>&lt;input type=&quot;file&quot; <span>onchange=&quot;xfileok(this)&quot;</span> /&gt;</span></li>
<li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;未选中文件&lt;/span&gt;</span></li>
<li><span>&lt;/div&gt;</span></li>
<li><span></span></li>
<li><span>&lt;script&gt;</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+&quot;个文件&quot;;</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 = &#39;已选择: &#39;;</span></li>
<li class="level2"><span>let reg = /(\&lt;i(\s{1,}class\=[\&quot;\&#39;][A-z0-9_\-]*[\&quot;\&#39;])?\&gt;\&lt;\/i\&gt;|\&lt;img\s{1,}src\=[\&quot;\&#39;][A-z0-9_\/\.\-]*[\&quot;\&#39;]\s{0,}\/{0,}\&gt;)?(\S*)/;</span></li>
<li class="level2"><span>let span = o.parentNode.getElementsByTagName(&quot;span&quot;)[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 = &#39;&#39;;</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>&lt;/script&gt;</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">表格 &lt;table&gt;</div>
<div class="table_row">
<table class="ptable">
<tr class="first">
<td width="140">标签</td>
<td>class=""</td>
<td>描述</td>
</tr>
<tr>
<td>&lt;table&gt;</td>
<td>&lt;table class="<code>xtable</code>"&gt;&lt;/table&gt;</td>
<td>表格本身</td>
</tr>
<tr>
<td>&lt;table&gt;的父标签</td>
<td>&lt;div class="<code>xtablein</code>"&gt;&lt;table&gt;&lt;/table&gt;&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>样式</span>,对下级表格不生效</div>
<div class="page_tit3">class="<code>xtablein</code>",为 <code>&lt;table&gt;</code> 父标签内的下一级表格增加<span>样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xtableall</code>",为 <code>&lt;table&gt;</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>&nbsp;</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>&nbsp;</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>&lt;table class="xtable"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</span></li>
<li></li>
<li><span>&lt;div class="xtablein xtableall"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>首行样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xfirst</code>",为 <code>&lt;table&gt;</code> 父标签内的表格增加<span>首行样式</span></div>
<div class="page_tit3">当表格存在 <span>&lt;thead&gt;</span> 时,需而外添加一个 class <code>xthead</code>,否则 <span>&lt;tbody&gt;</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>&lt;table class="xtable <span>xnobor-out</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xnobor-out</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</span></li>
<li></li>
<li>/**********/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xthead</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span>&lt;thead&gt;</span></li>
<li class="level4"><span></span></li>
<li class="level3"><span>&lt;/thead&gt;</span></li>
<li class="level3"><span>&lt;tbody&gt;</span></li>
<li class="level4"><span></span></li>
<li class="level3"><span>&lt;/tbody&gt;</span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>无外部边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xnobor-out</code>",为 <code>&lt;table&gt;</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>&lt;table class="xtable <span>xnobor-out</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xnobor-out</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>无内部边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xnobor-in</code>",为 <code>&lt;table&gt;</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>&lt;table class="xtable <span>xnobor-in</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xnobor-in</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>无全部边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xnobor-all</code>",为 <code>&lt;table&gt;</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>&lt;table class="xtable <span>xnobor-all</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xnobor-all</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>水平边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xbor-tr</code>",为 <code>&lt;table&gt;</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>&lt;table class="xtable <span>xbor-tr</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xbor-tr</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>水平边框无外边框样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xbor-tr-noout</code>",为 <code>&lt;table&gt;</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>&lt;table class="xtable <span>xbor-tr-noout</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xbor-tr-noout</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>圆角样式</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xround</code>",为 <code>&lt;table&gt;</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>&lt;table class="xtable <span>xround</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xround</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>行间隔背景色</span></div>
<div class="page_tit3">class="<code>xtablein</code> <code>xodd</code> / <code>xeven</code>",为 <code>&lt;table&gt;</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>&lt;table class="xtable <span>xodd</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xodd</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</span></li>
<li></li>
<li>/****************或****************/</li>
<li></li>
<li><span>&lt;table class="xtable <span>xeven</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xeven</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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>&lt;table&gt;</code> 标签增加<span>鼠标悬停样式</span></div>
<div class="page_tit3">class="<code>xtable</code> <code>xhover</code>",为 <code>&lt;table&gt;</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>&lt;table class="xtable <span>xhover</span>"&gt;</span></li>
<li class="level2"><span></span></li>
<li><span>&lt;/table&gt;</span></li>
<li></li>
<li>/****或****/</li>
<li></li>
<li><span>&lt;div class="xtablein <span>xhover</span>"&gt;</span></li>
<li class="level2"><span>&lt;table&gt;</span></li>
<li class="level3"><span></span></li>
<li class="level2"><span>&lt;/table&gt;</span></li>
<li><span>&lt;/div&gt;</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 += "&nbsp;&nbsp;";
}else if($(ol[i]).hasClass("level3")){
html += "&nbsp;&nbsp;&nbsp;&nbsp;";
}else if($(ol[i]).hasClass("level4")){
html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}else if($(ol[i]).hasClass("level5")){
html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}else if($(ol[i]).hasClass("level6")){
html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}else if($(ol[i]).hasClass("level7")){
html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}else if($(ol[i]).hasClass("level8")){
html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}else if($(ol[i]).hasClass("level9")){
html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}else if($(ol[i]).hasClass("level9")){
html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
}
}
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>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化