H-ui.css 154 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406
  1. @charset "utf-8";
  2. /* -----------H-ui前端框架-------------
  3. * H-ui.css v2.2.58
  4. * http://www.h-ui.net/
  5. * Created & Modified by guojunhui
  6. * Date modified 2016.03.20
  7. *
  8. * Copyright 2013-2016 北京颖杰联创科技有限公司 All rights reserved.
  9. * Licensed under MIT license.
  10. * http://opensource.org/licenses/MIT
  11. *
  12. */
  13. /*------------------------------------
  14. 结构目录:
  15. 1. css reset重定义浏览器默认样式
  16. 2. 框架
  17. 2.1 响应式栅格系统
  18. 2.2 响应式隐藏显示
  19. 3. 基础CSS
  20. 3.1 排版
  21. 3.1.1 标题
  22. 3.1.2 强调
  23. 3.1.3 对齐
  24. 3.1.4 定位
  25. 3.1.5 浮动
  26. 3.1.6 文字单行溢出省略号
  27. 3.1.7 线条
  28. 3.1.8 外边距
  29. 3.1.9 内填充
  30. 3.1.10 边框,css3圆角
  31. 3.1.11 css3阴影
  32. 3.1.12 行内分割竖线
  33. 3.1.13 文字尺寸
  34. 3.1.14 文字行距
  35. 3.1.15 文字颜色
  36. 3.1.16 文字颜色强调
  37. 3.1.17 缩略语
  38. 3.1.18 地址
  39. 3.1.19 引用
  40. 3.1.20 上标 下标
  41. 3.1.21 内容样式
  42. 3.1.22 列表
  43. 3.1.23 描述
  44. 3.1.24 隐藏 显示
  45. 3.1.25 尺寸
  46. 3.2 代码
  47. 3.3 表格
  48. 3.4 表单
  49. 3.4.1 input,textarea 文本域 文本区域
  50. 3.4.2 radio,checkbox 单选 多选
  51. 3.4.3 select 下拉框
  52. 3.4.4 input-file 文件上传
  53. 3.4.5 表单布局
  54. 3.4.6 表单验证
  55. 3.5 按钮
  56. 3.6 图片
  57. 3.7 图标
  58. 3.8 动画
  59. 4. 组件
  60. 4.1 按钮组
  61. 4.2 导航
  62. 4.2.1 导航条
  63. 4.2.2 面包屑导航
  64. 4.2.3 翻页导航
  65. 4.2.4 顶部导航
  66. 4.2.5 向导
  67. 4.2.6 竖向导向tab导航
  68. 4.2.7 横向tab
  69. 4.3 菜单
  70. 4.3.1 下拉菜单
  71. 4.3.2 多级菜单
  72. 4.3.3 树状菜单(暂无)
  73. 4.4 幻灯片
  74. 4.4.1 焦点图效果(自动播放,圆点控制)
  75. 4.4.2 带缩略图效果
  76. 4.5 选项卡
  77. 4.6 便签与标号
  78. 4.7 缩略图
  79. 4.8 警告
  80. 4.9 进度条 loading
  81. 4.10 对话框 弹出层
  82. 4.11 客服
  83. 4.12 返回顶部
  84. 4.13 分享
  85. 4.14 面板
  86. 4.15 案例
  87. 4.16 滚动
  88. 4.17 搜索
  89. 4.18 广告
  90. 4.19 标签
  91. 4.19.1 标签输入效果
  92. 4.19.2 标签混排效果
  93. 4.19.3 tag云标签
  94. 4.20 折叠
  95. 4.21 遮罩条
  96. 4.22 评论列表
  97. 5. 页面
  98. 5.1 404页面
  99. 5.2 博客列表页(暂无)
  100. 5.3 博客详情页(暂无)
  101. 5.4 关于我们页(暂无)
  102. 5.5 帮助列表页(暂无)
  103. 5.6 帮助详情页(暂无)
  104. ----------------------------------
  105. CSS写作注意事项:
  106. 1. 页面编码规范
  107. 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。
  108. 1.2. 全局字体设置:
  109. windows 7系统:微软雅黑 Arial;
  110. windows XP及以下:新宋体,宋体,Arial
  111. MAC默认字体:Helvetica Neue和Helvetica Hiragino Sans GB。
  112. 1.3. 中文字体使用编码转换,请参阅下节“中文字体css编码转换”
  113. 1.4. 推荐使用216web安全色
  114. 2. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间应减少空格,去掉最后一个“;”,例如:.class{width:200px;height:100px}
  115. 3. 属性的书写顺序:
  116. 3.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:
  117. 位置:position,left,right,float
  118. 盒模型属性:display,margin,padding,width,height
  119. 边框与背景:border,background
  120. 段落与文本:line-height,text-indent,font,color,text-decoration,...
  121. 其他属性:overflow,cursor,visibility,...
  122. 3.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;
  123. 4. 带有前缀的属性,单独一行,通过缩进,让每个属性的值垂直对齐,方便编辑维护。
  124. 5. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式
  125. 6. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> Clearfix
  126. 7. 避免使用各种 CSS Hack,如需对 IE 进行特殊定义,请参阅下节“关于 CSS Hack 的说明”
  127. 8. 勿使用冗余低效的 CSS 写法,例如:ul li a span{... }
  128. 9. 慎用 !important
  129. 10. 建议使用具有语义化的classname或id,请参阅下节“css 命名规范及对应的缩写”
  130. 11.避免使用兼容性不好的使用滤镜
  131. 12.开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理。
  132. 13.注释格式,统一使用双斜杠加*。
  133. 14.上下模块之间的间距统一使用下一个模块的margin-top来实现,好处是:如果没有下一个模块也不会多出一段空隙。
  134. 15.hover,selected,disabled,current等具有特定意义的请勿直接占用。
  135. 16.:link :visited :hover :active书写顺序 L-V-H-A,速记:LoVe(喜欢)HAte(讨厌)。
  136. 17.不要使用 @import
  137. ----------------------------------
  138. 中文字体css编码转换
  139. 微软雅黑 \5FAE\8F6F\96C5\9ED1 或 Microsoft YaHei
  140. 黑体 \9ED1\4F53
  141. 新宋体 \65b0\5b8b\4f53
  142. 宋体 \5b8b\4f53
  143. ----------------------------------
  144. 关于 CSS Hack 的说明:
  145. 1. _ IE6
  146. 2. * IE6/7
  147. 3. !important IE7/Firefox
  148. 4. *+ IE7
  149. 5. \9 IE6/7/8
  150. 6. \0 IE8
  151. 7. 条件hack
  152. <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本
  153. <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7
  154. <!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8
  155. <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上
  156. ----------------------------------
  157. css 命名规范
  158. 1. 内容优先,表现为辅
  159. 2. css命名中英文对照
  160. current 当前 hover 悬停 selected 挑选 disabled 禁用 focus 得到焦点 blur 失去焦点 checked 勾选 success 成功 error 出错
  161. header(hd) 头部 content(cnt) 内容 title(tit) 标题 item 项目(条) cell 单元 image/pic(img) 图片 text(txt) 文字 top 顶部 scrubber 时序菜单
  162. nav 导航 mainNav 主导航 subNav 子导航 topNav 顶部导航 breadcrumb 面包屑导航
  163. flink 友情链接 footer 尾 copyright 版权
  164. menu 菜单 submenu 子菜单 dropdown 下拉菜单
  165. searchBar 搜索条 search 搜索条 searchTxt 搜索框 searchBtn 搜索按钮 search_key 搜索词
  166. member 会员 ucenter 用户中心 loginBar 登陆条 login 登录 loginBtn 登录按钮 regsiter 注册按钮 btn-regsiter注册按钮 name 用户名 password 密码 nickname 昵称 mobilephone/mobile 手机 telephone/tel 电话 defaultavatar 默认头像
  167. hot 热点 news 新闻 banner/AD 广告 download 下载
  168. content 内容 title 标题 summary 摘要 time 时间
  169. share 分享 digg 顶 like 喜欢
  170. list/-list 列表 pList 图片列表 tList 文字列表 tpList 图文列表
  171. table 表格 row 行 column 列 gutter 间隔 viewport 视口
  172. tab 标签 tags 标签 scroll 滚动
  173. sidebar 侧边栏 column 栏目 section 区块 msg 提示信息 status 状态 vote 投票 tips 小技巧 guild 指南 note 注释
  174. icon- 图标 btn- 按钮
  175. goods 商品 goods-list 商品列表 goods-detail 商品详情 goods-info 商品信息
  176. tuan 团购 tuan-list 团购列表 tuan-detail 团购详情 tuan-info 团购信息
  177. transition 动画 shadow 阴影 fade 淡入淡出 flip 翻页效 slide 滑动 slideup 上滑动 slidedown 下滑动 turn 翻页 horizontal 水平 vertical 垂直 collapsible 折叠 corners 拐角 flow 流 reverse 反向 pop 弹窗
  178. count 总数/计数 plus 加号/正 minus 减号/负 controlgroup 控制组
  179. ----------------------------------
  180. html命名规范:
  181. default/index.html 首页
  182. 404.html 404错误页
  183. print.html 打印页
  184. header.html 页头
  185. footer.html 页脚
  186. sitemap.html 网站地图
  187. passport.html 通行证
  188. rank.html 排行榜
  189. roll.html 滚动新闻
  190. solution.html 解决方案
  191. joinus.html 加入我们
  192. partner.html 合作伙伴
  193. service.html 服务
  194. aboutus.html 关于我们
  195. contact.html 联系我们
  196. company.html 公司介绍
  197. organization.html 组织结构
  198. culture.html 企业文化
  199. strategy.html 发展策略
  200. honor.html 公司荣誉
  201. aptitudes.html 企业资质
  202. events.html 大事记
  203. business.html 商务合作
  204. contract.html 服务条款
  205. privacy.html 隐私声明
  206. CSR.html 企业社会责任
  207. news-开头.html 新闻相关
  208. article-开头.html 资讯相关
  209. picture-开头.html 图片相关
  210. photo-开头.html 相册相关
  211. product-开头.html 产品相关
  212. goods-开头.html 商品相关
  213. system-开头.html 系统相关
  214. tag-开头.html tag相关
  215. brand-开头.html 品牌相关
  216. help-开头.html 帮助相关
  217. member-开头.html 会员相关
  218. search-开头.html 搜索相关
  219. ---------------------------------- */
  220. /*1 重定义浏览器默认样式
  221. Name: style_reset
  222. Explain: 重定义浏览器默认样式
  223. */
  224. *{word-wrap:break-word}
  225. html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}
  226. ul,ol,dl{list-style-type:none}
  227. html,body{*position:static}
  228. html{font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
  229. address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}
  230. input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
  231. input,button{overflow: visible;vertical-align:middle;outline:none}
  232. input[type="submit"],input[type="reset"],input[type="button"],input[type="text"],input[type="password"]{-webkit-appearance:none;outline:none}
  233. body,th,td,button,input,select,textarea{font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";font-size:12px;color: #333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
  234. @media ( max-width : 767px) {
  235. html{ overflow-y:auto}
  236. body,th,td,button,input,select,textarea{ font-size:14px}
  237. }
  238. body{line-height:1.6}
  239. h1,h2,h3,h4,h5,h6{font-size:100%}
  240. a,area{outline:none;blr:expression(this.onFocus=this.blur())}
  241. a{text-decoration:none;cursor: pointer}
  242. a:hover{text-decoration:underline;outline:none}
  243. a.ie6:hover{zoom:1}
  244. a:focus{outline:none}
  245. a:hover,a:active{outline:none}:focus{outline:none}
  246. sub,sup{vertical-align:baseline}
  247. button,input[type="button"], input[type="submit"] {line-height:normal !important}
  248. /*img*/
  249. img{border:0;vertical-align:middle}
  250. a img,img{-ms-interpolation-mode:bicubic}
  251. /*IE下a:hover 背景闪烁*/
  252. *html{overflow:-moz-scrollbars-vertical;zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))}
  253. /*HTML5 reset*/
  254. header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend{display:block;margin:0;padding:0}time{display:inline}
  255. audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
  256. audio:not([controls]){display:none}
  257. legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5}
  258. legend small{font-size:15px;color:#999}
  259. svg:not(:root) {overflow: hidden}
  260. fieldset {border-width:0;padding: 0.35em 0.625em 0.75em;margin: 0 2px;border: 1px solid #c0c0c0}
  261. input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto}
  262. input[type="search"] {-webkit-appearance: textfield; /* 1 */}
  263. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}
  264. /*清楚浮动
  265. Name: style_clearfix
  266. Example: class="clearfix|cl"
  267. Explain: clearfix(简写cl)避免因子元素浮动而导致的父元素高度缺失能问题
  268. */
  269. .cl:after,.clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}
  270. /*2.1 栅格系统
  271. Name: style_span
  272. Example:
  273. <div class="responsive">
  274. <div class="row cl" role="grid">
  275. <div class="col-1">……</div>
  276. ……
  277. </div>
  278. </div>
  279. Explain: 栅格系统
  280. */
  281. /*2.1 响应式栅格系统*/
  282. .container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}
  283. .container-fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}
  284. @media ( min-width : 992px) {
  285. .container{width: 960px}
  286. }
  287. @media ( min-width : 1200px) {
  288. .container {width: 1170px}
  289. }
  290. @media ( min-width : 1300px) {
  291. .container {width: 1270px}
  292. }
  293. @media print{
  294. .container{width:auto}
  295. }
  296. .row.cl{}
  297. .row{box-sizing:border-box; margin-left:-15px; margin-right:-15px}
  298. .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {min-height: 1px;position: relative; padding-left:15px; padding-right:15px; box-sizing:border-box;-webkit-transition:all 0.3s ease-in;
  299. -moz-transition:all 0.3s ease-in;
  300. -o-transition:all 0.3s ease-in;
  301. transition:all 0.3s ease-in}
  302. .col-1{width:8.33333%}
  303. .col-2{width:16.66667%}
  304. .col-3{width:25%}
  305. .col-4{width:33.33333%}
  306. .col-5{width:41.66667%}
  307. .col-6{width:50%}
  308. .col-7{width:58.33333%}
  309. .col-8{width:66.66667%}
  310. .col-9{width:75%}
  311. .col-10{width:83.33333%}
  312. .col-11{width:91.66667%}
  313. .col-12{width:100%}
  314. .col-offset-0{margin-left:0}
  315. .col-offset-1{margin-left:8.33333%}
  316. .col-offset-2{margin-left:16.66667%}
  317. .col-offset-3{margin-left:25%}
  318. .col-offset-4{margin-left:33.33333%}
  319. .col-offset-5{margin-left:41.66667%}
  320. .col-offset-6{margin-left:50%}
  321. .col-offset-7{margin-left:58.33333%}
  322. .col-offset-8{margin-left:66.66667%}
  323. .col-offset-9{margin-left:75%}
  324. .col-offset-10{margin-left:83.33333%}
  325. .col-offset-11{margin-left:91.66667%}
  326. .col-push-0{position:relative;left:0;right:auto}
  327. .col-pull-0{right:0;left:auto}
  328. .col-push-1{left:8.33333%;right:auto}
  329. .col-pull-1{right:8.33333%;left:auto}
  330. .col-push-2{left:16.66667%;right:auto}
  331. .col-pull-2{right:16.66667%;left:auto}
  332. .col-push-3{left:25%;right:auto}
  333. .col-pull-3{right:25%;left:auto}
  334. .col-push-4{left:33.33333%;right:auto}
  335. .col-pull-4{right:33.33333%;left:auto}
  336. .col-push-5{left:41.66667%;right:auto}
  337. .col-pull-5{right:41.66667%;left:auto}
  338. .col-push-6{left:50%;right:auto}
  339. .col-pull-6{right:50%;left:auto}
  340. .col-push-7{left:58.33333%;right:auto}
  341. .col-pull-7{right:58.33333%;left:auto}
  342. .col-push-8{left:66.66667%;right:auto}
  343. .col-pull-8{right:66.66667%;left:auto}
  344. .col-push-9{left:75%;right:auto}
  345. .col-pull-9{right:75%;left:auto}
  346. .col-push-10{left:83.33333%;right:auto}
  347. .col-pull-10{right:83.33333%;left:auto}
  348. .col-push-11{left:91.66667%;right:auto}
  349. .col-pull-11{right:91.66667%;left:auto}
  350. /*局部模块平分*/
  351. .col-1-1{ width:100%}
  352. .col-2-1{ width:50%}
  353. .col-3-1{ width:33.333333%}
  354. .col-3-2{ width:66.666667%}
  355. .col-4-1{ width:25%}
  356. .col-4-3{ width:75%}
  357. .col-5-1{ width:20%}
  358. .col-5-2{ width:40%}
  359. .col-5-3{ width:60%}
  360. .col-5-4{ width:80%}
  361. .col-6-1{ width:16.666667%}
  362. .col-6-5{ width:83.333333%}
  363. .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left}
  364. .col-xs-12 {width: 100%}
  365. .col-xs-11 {width: 91.66666667%}
  366. .col-xs-10 {width: 83.33333333%}
  367. .col-xs-9 {width: 75%}
  368. .col-xs-8 {width: 66.66666667%}
  369. .col-xs-7 {width: 58.33333333%}
  370. .col-xs-6 {width: 50%}
  371. .col-xs-5 {width: 41.66666667%}
  372. .col-xs-4 {width: 33.33333333%}
  373. .col-xs-3 {width: 25%}
  374. .col-xs-2 {width: 16.66666667%}
  375. .col-xs-1 {width: 8.33333333%}
  376. .col-xs-pull-12 {right: 100%}
  377. .col-xs-pull-11 {right: 91.66666667%}
  378. .col-xs-pull-10 {right: 83.33333333%}
  379. .col-xs-pull-9 {right: 75%}
  380. .col-xs-pull-8 {right: 66.66666667%}
  381. .col-xs-pull-7 {right: 58.33333333%}
  382. .col-xs-pull-6 {right: 50%}
  383. .col-xs-pull-5 {right: 41.66666667%}
  384. .col-xs-pull-4 {right: 33.33333333%}
  385. .col-xs-pull-3 {right: 25%}
  386. .col-xs-pull-2 {right: 16.66666667%}
  387. .col-xs-pull-1 {right: 8.33333333%}
  388. .col-xs-pull-0 {right: auto}
  389. .col-xs-push-12 {left: 100%}
  390. .col-xs-push-11 {left: 91.66666667%}
  391. .col-xs-push-10 {left: 83.33333333%}
  392. .col-xs-push-9 {left: 75%}
  393. .col-xs-push-8 {left: 66.66666667%}
  394. .col-xs-push-7 {left: 58.33333333%}
  395. .col-xs-push-6 {left: 50%}
  396. .col-xs-push-5 {left: 41.66666667%}
  397. .col-xs-push-4 {left: 33.33333333%}
  398. .col-xs-push-3 {left: 25%}
  399. .col-xs-push-2 {left: 16.66666667%}
  400. .col-xs-push-1 {left: 8.33333333%}
  401. .col-xs-push-0 {left: auto}
  402. .col-xs-offset-12 {margin-left: 100%}
  403. .col-xs-offset-11 {margin-left: 91.66666667%}
  404. .col-xs-offset-10 {margin-left: 83.33333333%}
  405. .col-xs-offset-9 {margin-left: 75%}
  406. .col-xs-offset-8 {margin-left: 66.66666667%}
  407. .col-xs-offset-7 {margin-left: 58.33333333%}
  408. .col-xs-offset-6 {margin-left: 50%}
  409. .col-xs-offset-5 {margin-left: 41.66666667%}
  410. .col-xs-offset-4 {margin-left: 33.33333333%}
  411. .col-xs-offset-3 {margin-left: 25%}
  412. .col-xs-offset-2 {margin-left: 16.66666667%}
  413. .col-xs-offset-1 {margin-left: 8.33333333%}
  414. .col-xs-offset-0 {margin-left: 0}
  415. @media (max-width:767px){
  416. .responsive [class^="col-"],.responsive [class*=" col-"]{float:none!important;width:auto!important}
  417. .responsive [class^="col-offset-"],.responsive [class*=" col-offset-"]{ margin-left:0px!important}
  418. }
  419. @media(min-width:768px){
  420. .col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}
  421. .col-sm-12{width:100%}
  422. .col-sm-11{width:91.66666666666666%}
  423. .col-sm-10{width:83.33333333333334%}
  424. .col-sm-9{width:75%}
  425. .col-sm-8{width:66.66666666666666%}
  426. .col-sm-7{width:58.333333333333336%}
  427. .col-sm-6{width:50%}
  428. .col-sm-5{width:41.66666666666667%}
  429. .col-sm-4{width:33.33333333333333%}
  430. .col-sm-3{width:25%}
  431. .col-sm-2{width:16.666666666666664%}
  432. .col-sm-1{width:8.333333333333332%}
  433. .col-sm-pull-12{right:100%}
  434. .col-sm-pull-11{right:91.66666666666666%}
  435. .col-sm-pull-10{right:83.33333333333334%}
  436. .col-sm-pull-9{right:75%}
  437. .col-sm-pull-8{right:66.66666666666666%}
  438. .col-sm-pull-7{right:58.333333333333336%}
  439. .col-sm-pull-6{right:50%}
  440. .col-sm-pull-5{right:41.66666666666667%}
  441. .col-sm-pull-4{right:33.33333333333333%}
  442. .col-sm-pull-3{right:25%}
  443. .col-sm-pull-2{right:16.666666666666664%}
  444. .col-sm-pull-1{right:8.333333333333332%}
  445. .col-sm-pull-0{right:0}
  446. .col-sm-push-12{left:100%}
  447. .col-sm-push-11{left:91.66666666666666%}
  448. .col-sm-push-10{left:83.33333333333334%}
  449. .col-sm-push-9{left:75%}
  450. .col-sm-push-8{left:66.66666666666666%}
  451. .col-sm-push-7{left:58.333333333333336%}
  452. .col-sm-push-6{left:50%}
  453. .col-sm-push-5{left:41.66666666666667%}
  454. .col-sm-push-4{left:33.33333333333333%}
  455. .col-sm-push-3{left:25%}
  456. .col-sm-push-2{left:16.666666666666664%}
  457. .col-sm-push-1{left:8.333333333333332%}
  458. .col-sm-push-0{left:0}
  459. .col-sm-offset-12{margin-left:100%}
  460. .col-sm-offset-11{margin-left:91.66666666666666%}
  461. .col-sm-offset-10{margin-left:83.33333333333334%}
  462. .col-sm-offset-9{margin-left:75%}
  463. .col-sm-offset-8{margin-left:66.66666666666666%}
  464. .col-sm-offset-7{margin-left:58.333333333333336%}
  465. .col-sm-offset-6{margin-left:50%}
  466. .col-sm-offset-5{margin-left:41.66666666666667%}
  467. .col-sm-offset-4{margin-left:33.33333333333333%}
  468. .col-sm-offset-3{margin-left:25%}
  469. .col-sm-offset-2{margin-left:16.666666666666664%}
  470. .col-sm-offset-1{margin-left:8.333333333333332%}
  471. .col-sm-offset-0{margin-left:0}
  472. }
  473. @media(min-width:992px){
  474. .col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}
  475. .col-md-12{width:100%}
  476. .col-md-11{width:91.66666666666666%}
  477. .col-md-10{width:83.33333333333334%}
  478. .col-md-9{width:75%}
  479. .col-md-8{width:66.66666666666666%}
  480. .col-md-7{width:58.333333333333336%}
  481. .col-md-6{width:50%}
  482. .col-md-5{width:41.66666666666667%}
  483. .col-md-4{width:33.33333333333333%}
  484. .col-md-3{width:25%}
  485. .col-md-2{width:16.666666666666664%}
  486. .col-md-1{width:8.333333333333332%}
  487. .col-md-pull-12{right:100%}
  488. .col-md-pull-11{right:91.66666666666666%}
  489. .col-md-pull-10{right:83.33333333333334%}
  490. .col-md-pull-9{right:75%}
  491. .col-md-pull-8{right:66.66666666666666%}
  492. .col-md-pull-7{right:58.333333333333336%}
  493. .col-md-pull-6{right:50%}
  494. .col-md-pull-5{right:41.66666666666667%}
  495. .col-md-pull-4{right:33.33333333333333%}
  496. .col-md-pull-3{right:25%}
  497. .col-md-pull-2{right:16.666666666666664%}
  498. .col-md-pull-1{right:8.333333333333332%}
  499. .col-md-pull-0{right:0}
  500. .col-md-push-12{left:100%}
  501. .col-md-push-11{left:91.66666666666666%}
  502. .col-md-push-10{left:83.33333333333334%}
  503. .col-md-push-9{left:75%}
  504. .col-md-push-8{left:66.66666666666666%}
  505. .col-md-push-7{left:58.333333333333336%}
  506. .col-md-push-6{left:50%}
  507. .col-md-push-5{left:41.66666666666667%}
  508. .col-md-push-4{left:33.33333333333333%}
  509. .col-md-push-3{left:25%}
  510. .col-md-push-2{left:16.666666666666664%}
  511. .col-md-push-1{left:8.333333333333332%}
  512. .col-md-push-0{left:0}
  513. .col-md-offset-12{margin-left:100%}
  514. .col-md-offset-11{margin-left:91.66666666666666%}
  515. .col-md-offset-10{margin-left:83.33333333333334%}
  516. .col-md-offset-9{margin-left:75%}
  517. .col-md-offset-8{margin-left:66.66666666666666%}
  518. .col-md-offset-7{margin-left:58.333333333333336%}
  519. .col-md-offset-6{margin-left:50%}
  520. .col-md-offset-5{margin-left:41.66666666666667%}
  521. .col-md-offset-4{margin-left:33.33333333333333%}
  522. .col-md-offset-3{margin-left:25%}
  523. .col-md-offset-2{margin-left:16.666666666666664%}
  524. .col-md-offset-1{margin-left:8.333333333333332%}
  525. .col-md-offset-0{margin-left:0}
  526. }
  527. @media(min-width:1200px){
  528. .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}
  529. .col-lg-12{width:100%}
  530. .col-lg-11{width:91.66666666666666%}
  531. .col-lg-10{width:83.33333333333334%}
  532. .col-lg-9{width:75%}
  533. .col-lg-8{width:66.66666666666666%}
  534. .col-lg-7{width:58.333333333333336%}
  535. .col-lg-6{width:50%}
  536. .col-lg-5{width:41.66666666666667%}
  537. .col-lg-4{width:33.33333333333333%}
  538. .col-lg-3{width:25%}
  539. .col-lg-2{width:16.666666666666664%}
  540. .col-lg-1{width:8.333333333333332%}
  541. .col-lg-pull-12{right:100%}
  542. .col-lg-pull-11{right:91.66666666666666%}
  543. .col-lg-pull-10{right:83.33333333333334%}
  544. .col-lg-pull-9{right:75%}
  545. .col-lg-pull-8{right:66.66666666666666%}
  546. .col-lg-pull-7{right:58.333333333333336%}
  547. .col-lg-pull-6{right:50%}
  548. .col-lg-pull-5{right:41.66666666666667%}
  549. .col-lg-pull-4{right:33.33333333333333%}
  550. .col-lg-pull-3{right:25%}
  551. .col-lg-pull-2{right:16.666666666666664%}
  552. .col-lg-pull-1{right:8.333333333333332%}
  553. .col-lg-pull-0{right:0}
  554. .col-lg-push-12{left:100%}
  555. .col-lg-push-11{left:91.66666666666666%}
  556. .col-lg-push-10{left:83.33333333333334%}
  557. .col-lg-push-9{left:75%}
  558. .col-lg-push-8{left:66.66666666666666%}
  559. .col-lg-push-7{left:58.333333333333336%}
  560. .col-lg-push-6{left:50%}
  561. .col-lg-push-5{left:41.66666666666667%}
  562. .col-lg-push-4{left:33.33333333333333%}
  563. .col-lg-push-3{left:25%}
  564. .col-lg-push-2{left:16.666666666666664%}
  565. .col-lg-push-1{left:8.333333333333332%}
  566. .col-lg-push-0{left:0}
  567. .col-lg-offset-12{margin-left:100%}
  568. .col-lg-offset-11{margin-left:91.66666666666666%}
  569. .col-lg-offset-10{margin-left:83.33333333333334%}
  570. .col-lg-offset-9{margin-left:75%}
  571. .col-lg-offset-8{margin-left:66.66666666666666%}
  572. .col-lg-offset-7{margin-left:58.333333333333336%}
  573. .col-lg-offset-6{margin-left:50%}
  574. .col-lg-offset-5{margin-left:41.66666666666667%}
  575. .col-lg-offset-4{margin-left:33.33333333333333%}
  576. .col-lg-offset-3{margin-left:25%}
  577. .col-lg-offset-2{margin-left:16.666666666666664%}
  578. .col-lg-offset-1{margin-left:8.333333333333332%}
  579. .col-lg-offset-0{margin-left:0}
  580. }
  581. /*2.2 响应式隐藏显示
  582. Name: style_Layout
  583. Explain: 左右两栏|左中右三栏|上中下
  584. Last Modify: guojunhui
  585. */
  586. .visible-xs,
  587. .visible-sm,
  588. .visible-md,
  589. .visible-lg,
  590. .visible-xs-block,
  591. .visible-xs-inline,
  592. .visible-xs-inline-block,
  593. .visible-sm-block,
  594. .visible-sm-inline,
  595. .visible-sm-inline-block,
  596. .visible-md-block,
  597. .visible-md-inline,
  598. .visible-md-inline-block,
  599. .visible-lg-block,
  600. .visible-lg-inline,
  601. .visible-lg-inline-block {
  602. display: none !important}
  603. @media ( max-width : 767px) {
  604. .visible-xs {display: block !important}
  605. table.visible-xs {display: table}
  606. tr.visible-xs {display: table-row !important}
  607. th.visible-xs,td.visible-xs {display: table-cell !important}
  608. .hidden-xs {display: none !important}
  609. .visible-xs-block {display: block !important}
  610. .visible-xs-inline {display: inline !important}
  611. .visible-xs-inline-block {display: inline-block !important}
  612. }
  613. @media ( min-width : 768px) and (max-width: 991px) {
  614. .visible-sm {display: block !important}
  615. table.visible-sm {display: table}
  616. tr.visible-sm {display: table-row !important}
  617. th.visible-sm,td.visible-sm {display: table-cell !important}
  618. .hidden-sm {display: none !important}
  619. .visible-sm-block {display: block !important}
  620. .visible-sm-inline {display: inline !important}
  621. .visible-sm-inline-block {display: inline-block !important}
  622. }
  623. @media ( min-width : 992px) and (max-width: 1199px) {
  624. .visible-md {display: block !important}
  625. table.visible-md {display: table}
  626. tr.visible-md {display: table-row !important}
  627. th.visible-md,td.visible-md {display: table-cell !important}
  628. .hidden-md {display: none !important}
  629. .visible-md-block {display: block !important}
  630. .visible-md-inline {display: inline !important}
  631. .visible-md-inline-block {display: inline-block !important}
  632. }
  633. @media ( min-width : 1200px) {
  634. .visible-lg {display: block !important}
  635. table.visible-lg {display: table}
  636. tr.visible-lg {display: table-row !important}
  637. th.visible-lg,td.visible-lg {display: table-cell !important}
  638. .hidden-lg {display: none !important}
  639. .visible-lg-block {display: block !important}
  640. .visible-lg-inline {display: inline !important}
  641. .visible-lg-inline-block {display: inline-block !important}
  642. }
  643. .visible-print {display: none !important}
  644. .visible-print-block {display: none !important}
  645. .visible-print-inline {display: none !important}
  646. .visible-print-inline-block {display: none !important}
  647. @media print {
  648. .visible-print {display: block !important}
  649. table.visible-print {display: table}
  650. tr.visible-print {display: table-row !important}
  651. th.visible-print,td.visible-print {display: table-cell !important}
  652. .visible-print-block {display: block !important}
  653. .visible-print-inline {display: inline !important}
  654. .visible-print-inline-block {display: inline-block !important}
  655. .hidden-print {display: none !important}
  656. }
  657. /*2.3 常用布局
  658. Name: style_Layout
  659. Explain: 左右两栏|左中右三栏|上中下
  660. Last Modify: guojunhui
  661. */
  662. .Hui-wraper,.wp{margin-left:auto;margin-right:auto;text-align:left}
  663. .sd{float:right}
  664. .ct2 .mn{float:left}
  665. .ct2 .sd{float:right}
  666. .ct2_r .leftmenu{float:left}
  667. .ct2_r .mn{float:right}
  668. .ct3 .app{float:left;margin-right:20px}
  669. .ct3 .mn{float:left;border-left:solid 1px #ddd}
  670. .ct3 .sd{float:right}
  671. .w-1000{width:1000px}
  672. .w-980{width:980px}
  673. .w-300{width:300px}
  674. .w-200{width:200px}
  675. @media (max-width: 1000px) {
  676. .Hui-wraper,.wp,{ width:auto!important;padding:0 15px!important}
  677. }
  678. @media print{
  679. .Hui-wraper{width:auto}
  680. }
  681. /*3.0 基础样式*/
  682. /*3.1 排版*/
  683. /*3.1.1 标题
  684. Example:
  685. <h1>h1. 大标题<small>小标题</small></h1>
  686. <h2>h2. 大标题<small>小标题</small></h2>
  687. <h3>h3. 大标题<small>小标题</small></h3>
  688. <h4>h4. 大标题<small>小标题</small></h4>
  689. <h5>h5. 大标题<small>小标题</small></h5>
  690. <h6>h6. 大标题<small>小标题</small></h6>
  691. */
  692. h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;color:inherit}
  693. h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{font-weight:400;line-height:1;color:#999}
  694. h1,h2,h3{padding-top:20px;padding-bottom:10px}
  695. h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small{font-size:65%}
  696. h4,h5,h6{margin-top:10px;margin-bottom:10px}
  697. h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small{font-size:75%}
  698. h1{font-size:36px}
  699. h2{font-size:30px}
  700. h3{font-size:24px}
  701. h4{font-size:18px}
  702. h5{font-size:14px}
  703. h6{font-size:12px}
  704. /*3.1.2 强调
  705. Example:
  706. <p>这是段落,向下10像素间距</p>
  707. <smail>小型文本,是父容器字体大小的85%</smail>
  708. <strong>重要文本,加粗显示</strong>
  709. <em>被强调的文本,斜体显示</em>
  710. <u>带下划线的文本</u>
  711. <cite>引用</cite>
  712. <mark>突出显示文本</mark>
  713. <del>带删除线的文本</del>
  714. <pre class="prettyprint linenums">预格式化的文本</pre>
  715. */
  716. p{margin-bottom:10px} /*段落*/
  717. small{font-size:85%} /*小型文本*/
  718. b,strong {font-weight: bold} /*重要的文本,加粗*/
  719. em{font-style:italic} /*被强调的文本*/
  720. i{} /*斜体*/
  721. u{} /*加下划线*/
  722. cite{font-style:normal} /*引用*/
  723. mark{color:#000;background:#ff0}/*突出显示文本*/
  724. var{} /*变量*/
  725. kbd{} /*键盘文本*/
  726. code{} /*计算机代码文本*/
  727. dfn{font-style: italic} /*一个定义项目*/
  728. del{font-family:Simsun} /*删除线*/
  729. code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em}
  730. pre{white-space: pre-wrap} /*预格式化的文本*/
  731. .uppercase{text-transform:uppercase} /*文字大写*/
  732. .lowercase{text-transform:lowercase} /*文字小写*/
  733. .capitalize{text-transform:capitalize} /*首字母大写*/
  734. .en{font-family:Arial!important}
  735. /*3.1.3 对齐
  736. Name: style_text-align
  737. Example: class="text-l|text-r|text-c|va-t|va-m|va-b"
  738. Explain: .text-水平对齐 (.text-l左对齐|.text-r右对齐|.text-c居中对齐)
  739. .va-上下对齐 (.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐)
  740. */
  741. .text-l{text-align:left}.text-r{text-align:right}.text-c{text-align:center}
  742. .va *{vertical-align:sub!important;*vertical-align:middle!important;_vertical-align:middle!important}
  743. .va-t{vertical-align:top!important}.va-m{vertical-align:middle!important}.va-b{vertical-align:bottom!important}
  744. /*3.1.4 定位
  745. Name: style_position
  746. Example: class="pos-r|pos-a|pos-f"
  747. Explain: .pos-r 相对定位|.pos-a 绝对定位|.pos-f 固定
  748. */
  749. .pos-r{position:relative}.pos-a{position:absolute}.pos-f{position:fixed}
  750. /*3.1.5 浮动
  751. Name: style_float
  752. Example: class="l|r"
  753. Explain: .l 左浮动|.r 右浮动
  754. */
  755. .l,.f-l{float:left!important;_display:inline}
  756. .r,.f-r{float:right!important;_display:inline}
  757. [class*="span"].r,
  758. [class*="span"].f-r{float:right}
  759. /*控制元素对定位的位置:居左|居右|j居上|居下*/
  760. .left{ left:0; right:auto}
  761. .right{ right:0; left:auto}
  762. .top{ top:auto; bottom:0}
  763. .bottom{ top:0; bottom:auto}
  764. /*3.1.6 文字单行溢出省略号
  765. Name: style_text-overflow
  766. Example: class="text-overflow"
  767. */
  768. .text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  769. /*3.1.7 线条
  770. Name: style_line
  771. Example: class="line"
  772. */
  773. .line{font-size: 0px; line-height: 0px; border-top: solid 1px #eee; float: none}
  774. /*3.1.8 外边距
  775. Name: style_margin
  776. Example: class="mt-5|mt-10..."
  777. Explain: .mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距
  778. */
  779. .mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-35{margin-top:35px}.mt-40{margin-top:40px}.mt-50{margin-top:50px}
  780. .mb-5{margin-bottom:5px}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}.mb-40{margin-bottom:40px}.mb-50{margin-bottom:50px}
  781. .ml-5{margin-left:5px}.ml-10{margin-left:10px}.ml-15{margin-left:15px}.ml-20{margin-left:20px}.ml-30{margin-left:30px}.ml-40{margin-left:40px}.ml-50{margin-left:50px}
  782. .mr-5{margin-right:5px}.mr-10{margin-right:10px}.mr-15{margin-right:15px}.mr-20{margin-right:20px}.mr-30{margin-right:30px}.mr-40{margin-right:40px}.mr-50{margin-right:50px}
  783. /*3.1.9 内填充
  784. Name: style_padding
  785. Example: class="pt-5|pt-10|……"
  786. Explain: .pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充
  787. */
  788. .pt-5{padding-top:5px}.pt-10{padding-top:10px}.pt-20{padding-top:20px}
  789. .pb-5{padding-bottom:5px}.pb-10{padding-bottom:10px}.pb-20{padding-bottom:20px}.pb-30{padding-bottom:30px}
  790. .pl-5{padding-left:5px}.pl-10{padding-left:10px}.pl-20{padding-left:20px}.pl-30{padding-left:30px}
  791. .pr-5{padding-right:5px}.pr-10{padding-right:10px}.pr-20{padding-right:20px}
  792. .pd-5{padding:5px}.pd-10{padding:10px}.pd-15{padding:15px}.pd-20{padding:20px}.pd-30{padding:30px}.pd-40{padding:40px}
  793. /*3.1.10 边框,css3圆角
  794. Name: style-border
  795. Example: class="bk_gray radius"
  796. Explain: .bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
  797. */
  798. .bk-gray{border:solid 1px #eee}
  799. .radius{border-radius:4px}
  800. .size-MINI.radius{ border-radius:3px}
  801. .size-L.radius{ border-radius:5px}
  802. .size-XL.radius{ border-radius:6px}
  803. .round{border-radius:50%; overflow:hidden}
  804. /*3.1.11 css3阴影
  805. Name: style_shadow
  806. Example: class="box_shadow|text-shadow"
  807. Explain: box_shadow 块级元素阴影,全局样式,可用在表格,文本框,文本域,div等块级元素上。
  808. text-shadow 文字阴影
  809. */
  810. .box-shadow{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
  811. .text-shadow{-webkit-text-shadow:0 0 2px rgba(0,0,0,0.2);text-shadow:0 0 2px rgba(0,0,0,0.2)}
  812. /*3.1.12 行内分割竖线
  813. Name: style_pipe
  814. Example: <span class="pipe">|</span>
  815. */
  816. .pipe{margin:0 5px;color:#CCC;font-size:10px!important}
  817. /*3.1.13 文字尺寸
  818. Name: style_font-size
  819. Example: class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
  820. Explain: 12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体
  821. */
  822. .f-12{font-size:12px}.f-14{font-size:14px}.f-16{font-size:16px}.f-18{font-size:18px}.f-20{font-size:20px}.f-24{font-size:24px}.f-26{font-size:26px}.f-28{font-size:28px}.f-30{font-size:30px}
  823. /*3.1.14 文字行距
  824. Name: mod_line-height
  825. Example: class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
  826. Explain: 16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高
  827. */
  828. .lh-16{line-height:16px}.lh-18{line-height:18px}.lh-20{line-height:20px}.lh-22{line-height:22px}.lh-24{line-height:24px}.lh-26{line-height:26px}.lh-28{line-height:28px}.lh-30{line-height:30px}
  829. /*2.0以前的兼容版本*/
  830. .l16{line-height:16px}.l18{line-height:18px}.l20{line-height:20px}.l22{line-height:22px}.l-24{line-height:24px}.l-26{line-height:26px}.l-28{line-height:28px}.l-30{line-height:30px}
  831. /*3.1.15 文字颜色
  832. Name: style_color
  833. Example: class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange"
  834. Explain: 主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色
  835. */
  836. /*全局默认链接颜色*/
  837. body{ background-color:#fff; color:#333}
  838. .bg-fff{ background-color:#fff}
  839. a{color:#333}
  840. a:hover,.active a{color:#06c}
  841. /*主要颜色*/
  842. .c-primary,.c-primary a,a.c-primary{color:#5a98de}
  843. .c-primary a:hover,a.c-primary:hover{ color:#5a98de}
  844. /*次主色*/
  845. .c-secondary,.c-secondary a,a.c-secondary{color:#555}
  846. .c-secondary a:hover,a.c-secondary:hover{ color:#555}
  847. /*强调色—成功*/
  848. .c-success,.c-success a,a.c-success{color:#5eb95e}
  849. .c-success a:hover,a.c-success:hover{ color:#5eb95e}
  850. /*强调色—危险*/
  851. .c-danger,.c-danger a,a.c-danger{color:#dd514c}
  852. .c-danger a:hover,a.c-danger:hover{ color:#dd514c}
  853. /*强调色—警告*/
  854. .c-warning,.c-warning a,a.c-warning{color:#f37b1d}
  855. .c-warning a:hover,a.c-warning:hover{ color:#f37b1d}
  856. /*强调色—错误*/
  857. .c-error,.c-error a,a.c-error{color:#c00}
  858. .c-error a:hover,a.c-error:hover{ color:#c00}
  859. /*辅助色—浅黑*/
  860. .c-333,.c-333 a,a.c-333{color:#333}
  861. .c-333 a:hover,a.c-333:hover{ color:#333}
  862. /*辅助色—灰色*/
  863. .c-666,.c-666 a,a.c-666{color:#666}
  864. .c-666 a:hover,a.c-666:hover{ color:#666}
  865. .c-999,.c-999 a,a.c-999{color:#999}
  866. .c-999 a:hover,a.c-999:hover{color:#999}
  867. /*标准色—红色*/
  868. .c-red,.c-red a,a.c-red{color:red}
  869. .c-red a:hover,a.c-red:hover{ color:red}
  870. /*标准色—绿色*/
  871. .c-green,.c-green a,a.c-green{color:green}
  872. .c-red a:hover,a.c-red:hover{color:green}
  873. /*标准色—蓝色*/
  874. .c-blue,.c-blue a,a.c-blue{color:blue}
  875. .c-blue a:hover,a.c-blue:hover{color:blue}
  876. /*标准色—白色*/
  877. .c-white,.c-white a,a.c-white{color:white}
  878. .c-white a:hover,a.c-white:hover{color:white}
  879. /*标准色—黑色*/
  880. .c-black,.c-black a{color:black}
  881. .c-black a:hover,a.c-black:hover{color:black}
  882. /*标准色—橙色*/
  883. .c-orange,.c-orange a,a.c-orange{color:orange}
  884. .c-orange a:hover,a.c-orange:hover{color:orange}
  885. /*3.1.16 文字颜色强调 从2.0起废弃3.1.16 文字强调,字体颜色全部放入到3.1.15
  886. Example: class="text-muted|text-primary|text-warning|text-error|text-danger|text-success|text-info"
  887. Explain: 柔和|重要|警告|错误|危险|成功|信息
  888. */
  889. /*3.1.17 缩略语
  890. Example: <abbr title="User Interface" class="initialism">UI</abbr>
  891. Explain:
  892. */
  893. abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}
  894. abbr.initialism{font-size:90%;text-transform:uppercase}
  895. /*3.1.18 地址
  896. Example: <address>北京市海淀区上地……</address>
  897. Explain:
  898. */
  899. address{display:block;margin-bottom:20px;font-style:normal;line-height:20px}
  900. /*3.1.19 引用
  901. Example: <blockquote>这是引用的内容</blockquote>
  902. Explain:
  903. */
  904. blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}
  905. blockquote p{margin-bottom:0;font-size:17.5px;font-weight:300;line-height:1.25}
  906. blockquote small{display:block;line-height:20px;color:#999}
  907. blockquote small:before{content:'\2014 \00A0'}
  908. blockquote.text-r{padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0}
  909. blockquote.text-r p,blockquote.text-r small{text-align:right}
  910. blockquote.text-r small:before{content:''}
  911. blockquote.text-r small:after{content:'\00A0 \2014'}
  912. q:before,q:after,blockquote:before,blockquote:after{content:""}
  913. q {/*短的引用*/quotes: "\201C" "\201D" "\2018" "\2019"}
  914. /*3.1.20 上标,下标
  915. Example: <sup>2</sup> <sub>2<sub>
  916. Explain: 上标|下标
  917. */
  918. sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
  919. sup{top:-0.5em}sub{bottom:-0.25em}
  920. /*3.1.21 内容样式
  921. Name: style_content
  922. Example: <div class="content"><p>……</p></div>
  923. Explain: 内容样式
  924. */
  925. .content{position:relative;font-size:14px;line-height:1.6;overflow:hidden;text-align:left}
  926. .content h3{margin-top:20px;font-size:16px}
  927. .content p{margin-bottom: 1.5rem;text-align: justify;word-break:break-all}
  928. .indent{ text-indent:2em}
  929. .content img{max-width:100%}
  930. .content ul{text-indent:2em}
  931. @media (max-width: 480px) {
  932. .content img{max-width:100%!important; height:auto!important;width:expression(this.width > 320 ? "320px" : this.width)!important}
  933. *html .content img{width:expression(this.width>320&&this.width>this.height?320:auto)}
  934. }
  935. /*3.1.22 列表
  936. Name: style_ulolli
  937. Example: <ul class="tlist"><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul>
  938. <ol class="linenums"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol>
  939. Explain:
  940. */
  941. ul.unstyled,ol.unstyled{margin-left:0;list-style:none}
  942. ul.inline,ol.inline{margin-left:0;list-style:none}
  943. ul.inline>li,ol.inline>li{display:inline-block;*display:inline;padding-right:5px;padding-left:5px;*zoom:1}
  944. .tlist li{line-height:22px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}/*禁止换行*/
  945. /*排行榜*/
  946. /*<ol class="top-list"><li class="top"><em>1</em><a href="#">排行榜列表</a><span class="date">12</span></li></ol>*/
  947. .top-list li{height: 20px;line-height: 20px;margin-bottom: 15px;overflow: hidden;padding-left: 30px;position: relative;text-overflow: ellipsis;vertical-align: bottom;white-space: nowrap}
  948. .top-list em {background-color: #F8F8F8;border: 1px solid #EBEBEB;color: #333;height: 18px;left: 0;line-height: 18px;position: absolute;text-align: center;top: 0;width: 20px; font-style:normal}
  949. .top-list .top em{background-color:#390;border:none;color: #fff;height: 20px;line-height: 20px;width: 22px}
  950. .top-list .date {color: #999;font-size: 12px;position: absolute;right: 0;top: 0}
  951. .tlist .time{font-size:12px; font-family:Arial; color:#999}
  952. .listview{}
  953. /*横向手机 竖向平板*/
  954. @media (max-width: 767px) {
  955. .tlist li{position:relative; font-size:18px;border-bottom: 1px solid #eee}
  956. .tlist li a{display:block;padding:0.7em 30px 0.7em 12px}
  957. .dot_1{padding-left:0px}
  958. .night .tlist li{border-bottom: 1px solid #1F1F1F}
  959. .tlist .time{display:none}
  960. .tlist i {background:url(../images/article/arrow.png) no-repeat 0 0; background-size:9px auto; height: 15px;margin-top: -7px;position: absolute;right:10px;top: 50%;width: 9px}
  961. .night .tlist i{background-position:0 -75px}
  962. }
  963. /*3.1.23 描述
  964. Name: style_dldtdd
  965. Example: <dl class="dl-horizontal cl"><dt>H-ui</dt><dd>基于Bootstrap框架的改进扩展的前端框架</dd></dl>
  966. Explain: .dl-horizontal 水平描述,默认不加为垂直模式。
  967. */
  968. .dl-horizontal.cl{}
  969. .dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}
  970. .dl-horizontal dd{margin-left:180px}
  971. /*3.1.24 隐藏 显示
  972. Name: style_display
  973. Example: <div class="hide">隐藏的内容</div> <div class="show">显示的内容</div>
  974. Explain: .hide 隐藏 / .show 显示
  975. */
  976. .hide{display:none}[hidden]{display: none}
  977. .hidden{display:none!important;visibility:hidden!important}
  978. .f-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
  979. [class*="span"].hide,.row-fluid [class*="span"].hide{display:none}
  980. .show{display:block}
  981. .invisible{visibility:hidden}
  982. /*3.1.25 尺寸 新增尺寸全局类名,用于表单、按钮、表格、头像、标签等元素上,要与元素一起配合使用,方能看到效果*/
  983. .size-MINI{}/*迷你*/
  984. .size-S{}/*小*/
  985. .size-M{}/*中 缺省默认尺寸,可以不写,可以理解为:均码*/
  986. .size-L{}/*L*/
  987. .size-XL{}/*大*/
  988. .size-XXL{}/*加大*/
  989. .size-XXXL{}/*超大*/
  990. .input-text,.btn,.input-text.size-M,.btn.size-M{ font-size:14px; height:31px;line-height:1.42857;padding:4px}/*默认为M,可以不写,可以理解为:均码*/
  991. a.btn,a.btn.size-M,span.btn,span.btn.size-M{ line-height:21px}
  992. .btn,.btn.size-M{ padding:4px 12px}
  993. .input-text.size-MINI,.btn.size-MINI{font-size:12px; height:23px;padding:1px 2px;line-height:1.42857}/*迷你*/
  994. a.btn.size-MINI,span.btn.size-MINI{ line-height:21px}
  995. .btn.size-MINI{ padding:1px 4px}
  996. .input-text.size-S,.btn.size-S{font-size:12px; height:27px;padding:3px;line-height:1.42857}/*小*/
  997. a.btn.size-S,span.btn.size-S{ line-height:19px}
  998. .btn.size-S{ padding:3px 8px}
  999. .input-text.size-L,.btn.size-L{font-size:16px; height:41px; padding:8px}/*大*/
  1000. a.btn.size-L,span.btn.size-L{ line-height:23px}
  1001. .btn.size-L{ padding:8px 16px}
  1002. .input-text.size-XL,.btn.size-XL{font-size:18px; height:48px; padding:10px}/*特大*/
  1003. a.btn.size-XL,span.btn.size-XL{ line-height:26px}
  1004. .btn.size-XL{ padding:10px 24px}
  1005. @media (max-width: 767px) {
  1006. .responsive .input-text.size-MINI,.responsive .btn.size-MINI{height:24px}
  1007. .responsive .input-text.size-S,.responsive .btn.size-S{ font-size:14px; height:30px}
  1008. .responsive .input-text,.btn,.responsive .input-text.size-M,.responsive .btn.size-M{ font-size:16px; height:36px}
  1009. .responsive .input-text.size-L,.responsive .btn.size-L{ font-size:18px; height:42px}
  1010. .responsive .input-text.size-XL,.responsive .btn.size-XL{ font-size:20px; height:48px}
  1011. }
  1012. /*3.2 代码
  1013. Name: style_pre
  1014. Example: <code></code>,<pre class="prettyprint linenums">转义过的代码</pre>
  1015. Explain: code:行内代码,pre:基本代码块;包装代码片段,.prettyprint颜色增强/.linenums显示行号
  1016. */
  1017. code{padding:0 3px 2px;font-family:Monaco,Menlo,Consolas,"Courier New",monospace}
  1018. pre .title,pre .keyword,pre .body,pre .des{color:#333}/*关键词*/
  1019. pre{display:block;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;padding:9.5px;margin-bottom:10px;font-size:12px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;color:#333}
  1020. .prettyprint{margin-bottom:20px;padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8}
  1021. .prettyprint .com { color: #998;font-style:italic }/*注释*/
  1022. .prettyprint .tag{color:#007}/*标签*/
  1023. .prettyprint .lit { color: #195f91}
  1024. .prettyprint .pun,.prettyprint .opn,.prettyprint .clo { color: #93a1a1}/*等于*/
  1025. .prettyprint .fun { color: #dc322f}
  1026. .prettyprint .str,.prettyprint .atv { color: #D14}/*值*/
  1027. .prettyprint .kwd,.prettyprint .prettyprint .tag { color: #1e347b}
  1028. .prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var { color: teal}/*文档声明,属性*/
  1029. .prettyprint .pln { color: #48484c}
  1030. .prettyprint.linenums{box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0}
  1031. .pre-scrollable{max-height:340px;overflow-y:scroll}
  1032. ol.linenums{list-style:decimal outside none; margin-left:20px}
  1033. ol.linenums li{ line-height:28px; padding-left:10px}
  1034. pre ol.linenums{margin:0 0 0 33px}
  1035. pre ol.linenums li{padding-left:12px;color:#bbb;line-height:18px;text-shadow:0 1px 0 #fff}
  1036. @media (max-width: 767px) {
  1037. pre ol.linenums{ margin-left:0; list-style:none}
  1038. ol.linenums li{ padding-left:0}
  1039. .prettyprint.linenums{box-shadow:inset 0px 0 0 #fbfbfc,inset 0px 0 0 #ececf0}
  1040. }
  1041. /*3.3 表格
  1042. Name: style_table
  1043. Example: <table class="table table-bordered table-striped table-condensed"><thead><tr><th>…</th></tr></thead><tbody><tr><td>…</td></tr></tbody></table>
  1044. Explain: 表格,None无样式,仅仅有列和行|.table行与行之间以水平线相隔|.table-bordered表格外围均有外边框|.table-striped奇数行背景设为浅灰色|.table-condensed竖直方向padding缩减一半,从8px变为4px,所有的 td 和 th 元素都受影响
  1045. */
  1046. /*默认table*/
  1047. table{width:100%;empty-cells:show;background-color:transparent;border-collapse:collapse;border-spacing:0}
  1048. table th{text-align:left; font-weight:400}
  1049. /*带水平线*/
  1050. .table th{font-weight:bold}
  1051. .table th,.table td{padding:8px;line-height:20px;word-break:break-all}
  1052. .table td{text-align:left}
  1053. .table tbody tr.success > td{background-color:#dff0d8}
  1054. .table tbody tr.error > td{background-color:#f2dede}
  1055. .table tbody tr.warning > td{background-color:#fcf8e3}
  1056. .table tbody tr.info > td{background-color:#d9edf7}
  1057. .table tbody + tbody{border-top:2px solid #ddd}
  1058. .table .table{background-color:#fff}
  1059. /*带横向分割线*/
  1060. .table-border{border-top:1px solid #ddd}
  1061. .table-border th,.table-border td{border-bottom:1px solid #ddd}
  1062. /*th带背景*/
  1063. .table-bg thead th{background-color:#F5FAFE}
  1064. /*带外边框*/
  1065. .table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
  1066. .table-bordered th,.table-bordered td{border-left:1px solid #ddd}
  1067. .table-border.table-bordered{border-bottom:0}
  1068. /*奇数行背景设为浅灰色*/
  1069. .table-striped tbody > tr:nth-child(odd) > td,.table-striped tbody > tr:nth-child(odd) > th{background-color:#f9f9f9}
  1070. /*竖直方向padding缩减一半*/
  1071. .table-condensed th,.table-condensed td{padding:4px 5px}
  1072. /*鼠标悬停样式*/
  1073. .table-hover tbody tr:hover td,.table-hover tbody tr:hover th{background-color: #f5f5f5}
  1074. /*鼠标选择整行样式*/
  1075. .table tbody tr.selected td{background-color:#F3F3F3}
  1076. /*定义颜色*/
  1077. /*悬停在行*/
  1078. .table tbody tr.active,.table tbody tr.active>td,.table tbody tr.active>th,.table tbody tr .active{background-color:#F5F5F5!important}
  1079. /*成功或积极*/
  1080. .table tbody tr.success,.table tbody tr.success>td,.table tbody tr.success>th,.table tbody tr .success{background-color:#DFF0D8!important}
  1081. /*警告或出错*/
  1082. .table tbody tr.warning,.table tbody tr.warning>td,.table tbody tr.warning>th,.table tbody tr .warning{background-color:#FCF8E3!important}
  1083. /*危险*/
  1084. .table tbody tr.danger,.table tbody tr.danger>td,.table tbody tr.danger>th,.table tbody tr .danger{background-color:#F2DEDE!important}
  1085. /*表格文字对齐方式,默认是居左对齐*/
  1086. .table .text-c th,.table .text-c td{text-align:center}/*整行居中*/
  1087. .table .text-r th,.table .text-r td{text-align:right}/*整行居右*/
  1088. .table th.text-l,.table td.text-l{text-align:left!important}/*单独列居左*/
  1089. .table th.text-c,.table td.text-c{text-align:center!important}/*单独列居中*/
  1090. .table th.text-r,.table td.text-r{text-align:right!important}/*单独列居右*/
  1091. /*datatable*/
  1092. table.dataTable {border-collapse: separate;border-spacing: 0;clear: both}
  1093. table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting {cursor: pointer; background-repeat:no-repeat;background-position:right center}
  1094. table.dataTable thead .sorting{background-image:url(../images/sort_both.png)}
  1095. table.dataTable thead .sorting_asc {background-image:url(../images/sort_asc.png)}
  1096. table.dataTable thead .sorting_desc {background-image:url(../images/sort_desc.png)}
  1097. .dataTable td.sorting_1 {background-color: #f5fafe}
  1098. .dataTables_wrapper .dataTables_length {float: left;padding-bottom:20px}
  1099. .dataTables_wrapper .dataTables_length .select{ width:50px}
  1100. .dataTables_wrapper .dataTables_filter {float: right;text-align: right}
  1101. .dataTables_wrapper .dataTables_filter .input-text { width:auto}
  1102. .dataTables_wrapper .dataTables_info {clear: both;float: left;padding-top:10px;font-size:14px; color:#666}
  1103. .dataTables_wrapper .dataTables_paginate {float: right;padding-top:10px;text-align: right}
  1104. .dataTables_wrapper .dataTables_paginate .paginate_button {border: 1px solid #ccc;cursor: pointer;display: inline-block;margin-left: 2px;text-align: center;text-decoration: none;color: #666;height: 26px;line-height: 26px;text-decoration: none;margin: 0 0px 6px 6px;padding: 0 10px;font-size:14px}
  1105. .dataTables_wrapper .dataTables_paginate .paginate_button:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {background:#5a98de;color:#fff}
  1106. /*表格尺寸*/
  1107. .table.size-MINI{}/*迷你*/
  1108. .table.size-S{}/*小*/
  1109. .table.size-M{}/*中*/
  1110. .table.size-L{}/*默认为L,可以不写,可以理解为:均码*/
  1111. .table.size-XL{}/*大*/
  1112. .table.size-XXL{}/*加大*/
  1113. .table.size-XXXL{}/*超大*/
  1114. /*让表格支持响应式*/
  1115. /*
  1116. <div class="table-responsive">
  1117. <table class="table">
  1118. ...
  1119. </table>
  1120. </div>
  1121. */
  1122. @media (max-width: 767px) {
  1123. table-responsive {width: 100%;margin-bottom: 15px;overflow-x: scroll;overflow-y: hidden;border: 1px solid #dddddd;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-overflow-scrolling: touch}
  1124. table-responsive > .table {margin-bottom: 0}
  1125. table-responsive > .table > thead > tr > th,
  1126. table-responsive > .table > tbody > tr > th,
  1127. table-responsive > .table > tfoot > tr > th,
  1128. table-responsive > .table > thead > tr > td,
  1129. table-responsive > .table > tbody > tr > td,
  1130. table-responsive > .table > tfoot > tr > td {white-space: nowrap}
  1131. table-responsive > .table-bordered {border: 0}
  1132. table-responsive > .table-bordered > thead > tr > th:first-child,
  1133. table-responsive > .table-bordered > tbody > tr > th:first-child,
  1134. table-responsive > .table-bordered > tfoot > tr > th:first-child,
  1135. table-responsive > .table-bordered > thead > tr > td:first-child,
  1136. table-responsive > .table-bordered > tbody > tr > td:first-child,
  1137. table-responsive > .table-bordered > tfoot > tr > td:first-child {border-left: 0}
  1138. table-responsive > .table-bordered > thead > tr > th:last-child,
  1139. table-responsive > .table-bordered > tbody > tr > th:last-child,
  1140. table-responsive > .table-bordered > tfoot > tr > th:last-child,
  1141. table-responsive > .table-bordered > thead > tr > td:last-child,
  1142. table-responsive > .table-bordered > tbody > tr > td:last-child,
  1143. table-responsive > .table-bordered > tfoot > tr > td:last-child {border-right: 0}
  1144. table-responsive > .table-bordered > tbody > tr:last-child > th,
  1145. table-responsive > .table-bordered > tfoot > tr:last-child > th,
  1146. table-responsive > .table-bordered > tbody > tr:last-child > td,
  1147. table-responsive > .table-bordered > tfoot > tr:last-child > td {border-bottom: 0}
  1148. }
  1149. /*3.4 表单
  1150. Name: style_form
  1151. Example:
  1152. Explain:
  1153. */
  1154. /*3.4.1 input,textarea 文本域 文本区域*/
  1155. /*默认状态*/
  1156. .input-text,.textarea{box-sizing:border-box;border:solid 1px #ddd;width:100%;
  1157. -webkit-transition:all 0.2s linear 0s;
  1158. -moz-transition:all 0.2s linear 0s;
  1159. -o-transition:all 0.2s linear 0s;
  1160. transition:all 0.2s linear 0s}
  1161. .textarea{ height:100px; resize:none; font-size:14px; padding:4px}
  1162. .textarea-numberbar{ position:absolute; right:20px; bottom:5px; z-index:1; margin-bottom:0}
  1163. .textarea-length{ font-style:normal}
  1164. .input-text:hover,.textarea:hover{border: solid 1px #3bb4f2}
  1165. /*得到焦点后*/
  1166. .input-text.focus,textarea.focus{border:solid 1px #0f9ae0 \9;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)}
  1167. /*不可点击*/
  1168. .input-text.disabled,.textarea.disabled,.input-text.disabled.focus,.textarea.disabled.focus{background-color:#ededed; cursor:default;border-color: #ddd;
  1169. -webkit-box-shadow:inset 0 2px 2px #e8e7e7;
  1170. -moz-box-shadow:inset 0 2px 2px #e8e7e7;
  1171. box-shadow:inset 0 2px 2px #e8e7e7}
  1172. /*只读状态*/
  1173. .input-text.disabled,.textarea.disabled{background-color:#e6e6e6; cursor:default}
  1174. /*阴影*/
  1175. .input-text.box-shadow,.textarea.box-shadow{-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}
  1176. /*行内元素*/
  1177. .input-text.inline{ display:inline-block; width:auto}
  1178. /*3.4.2 checkbox radio 单选 多选
  1179. Example:
  1180. <div class="skin-minimal">
  1181. <div class="check-box">
  1182. <input type="checkbox" id="checkbox-1">
  1183. <label for="checkbox-1">复选框</label>
  1184. </div>
  1185. </div>
  1186. <div class="skin-minimal">
  1187. <div class="radio-box">
  1188. <input type="radio" id="minimal-radio-1" name="demo-radio1">
  1189. <label for="minimal-radio-1">单选按钮</label>
  1190. </div>
  1191. </div>
  1192. Explain:
  1193. */
  1194. input[type="radio"],input[type="checkbox"] {line-height: normal; margin-top:-4px}
  1195. .check-box,.radio-box{ display:inline-block; box-sizing:border-box; cursor:pointer; position:relative; padding-left:30px; padding-right:20px}
  1196. .icheckbox,
  1197. .icheckbox-red,
  1198. .icheckbox-green,
  1199. .icheckbox-blue,
  1200. .icheckbox-aero,
  1201. .icheckbox-grey,
  1202. .icheckbox-orange,
  1203. .icheckbox-yellow,
  1204. .icheckbox-pink,
  1205. .icheckbox-purple,
  1206. .iradio,
  1207. .iradio-red,
  1208. .iradio-green,
  1209. .iradio-blue,
  1210. .iradio-aero,
  1211. .iradio-grey,
  1212. .iradio-orange,
  1213. .iradio-yellow,
  1214. .iradio-pink,
  1215. .iradio-purple {position: absolute;top:4px;left: 0}
  1216. @media (max-width: 767px) {
  1217. .responsive .check-box,.responsive .radio-box{ display:block}
  1218. }
  1219. /*3.4.3 select 下拉框
  1220. <span class="select-box">
  1221. <select class="select" size="1" name="demo">
  1222. <option value="1" selected>默认</option>
  1223. <option value="2">菜单二</option>
  1224. <option value="3">菜单三</option>
  1225. </select>
  1226. </span>
  1227. Explain:
  1228. select 是表单元素中最难美化的一个,有两种美化方式:
  1229. 1、修改源生的,修改有限,只能修改个边框,背景,字体。优点:程序方便操作;缺点:丑,浏览器之间存在很大差异。
  1230. 2、将源生的隐藏掉,用其他元素(如div li)通过js模拟下拉交互,然后再传值给源生的select。优点:好看,兼容好;缺点:代码冗余,依赖JS,不方便操作
  1231. */
  1232. /*方法一、修改源生*/
  1233. .select-box{border:solid 1px #ddd;box-sizing:border-box;vertical-align:middle; width:100%; display:inline-block}
  1234. .select{border:solid 1px #ddd;box-sizing:border-box;cursor: pointer;line-height:normal;font-weight: normal;width:100%; white-space:nowrap}
  1235. .select-box .select{ border:none}
  1236. .select-box.inline,.select-box.inline .select{ width:auto}
  1237. .select-box,
  1238. .select-box.size-M{height:31px;padding:4px 5px}
  1239. .select,.size-M .select{font-size: 14px}
  1240. .select-box.size-MINI{height:23px;padding:0px 5px}
  1241. .size-MINI .select{font-size: 12px}
  1242. .select-box.size-S{height:27px;padding:3px 5px}
  1243. .size-S .select{font-size: 12px}
  1244. .select-box.size-L{height:41px;padding:8px 5px}
  1245. .size-L .select{font-size: 16px}
  1246. .select-box.size-XL{height:48px;padding:10px 5px}
  1247. .size-XL .select{font-size: 18px}
  1248. @media (max-width: 767px) {
  1249. .responsive .select-box{ border:none}
  1250. .responsive .select-box .select,
  1251. .responsive .select{border:solid 1px #ddd; padding:10px;font-size:16px}
  1252. .responsive .select-box,
  1253. .responsive .select-box.size-M,
  1254. .responsive .select-box.size-MINI,
  1255. .responsive .select-box.size-S,
  1256. .responsive .select-box.size-L,
  1257. .responsive .select-box.size-XL{ height:auto; padding:0}
  1258. }
  1259. /*方法二、JS模拟
  1260. <select name="demo" data-enabled="false">
  1261. <option value="1" selected>默认</option>
  1262. <option value="2">菜单二</option>
  1263. <option value="3">菜单三</option>
  1264. </select>
  1265. 需要引用2个js文件
  1266. <script type="text/javascript" src="lib/squid.js"></script>
  1267. <script type="text/javascript" src="lib/jselect-1.0.js"></script>
  1268. 页面调用方法
  1269. <script type="text/javascript">
  1270. squid.swing.jselect()
  1271. </script>
  1272. */
  1273. .select-wrapper {position:relative; display:inline-block;font-size:14px;cursor:default}
  1274. .select-default{zoom: 1;display:block; padding-left:10px; padding-right:30px;background-color:#fff;border:solid 1px #d0d0d0;height:34px;line-height:34px}
  1275. .jsselect.radius{ overflow:visible}
  1276. .jsselect.radius .select-default{ border-radius:4px}
  1277. .jsselect.radius .select-list{border-radius:4px;border-top-left-radius:0;border-top-right-radius:0}
  1278. .select-icon {position: absolute;height:8px;width:12px;right:10px;top:50%; margin-top:-4px;background: url(../images/iconpic-arrow-down2.png) no-repeat center}
  1279. .unselectable {-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;user-select: none}
  1280. .select-list {position:absolute;left:0; right:0;top:100%;z-index:1;line-height:34px;max-height:320px; overflow:auto;_height:expression(this.scrollHeight > 319 ? "320px" : "auto");background-color:#fff;background-clip: padding-box;-moz-box-shadow:0 1px 2px rgba(0, 1, 1, 0.2);-webkit-box-shadow:0 1px 2px rgba(0, 1, 1, 0.2);box-shadow:0 1px 2px rgba(0, 1, 1, 0.2);box-sizing:border-box;border:solid 1px #d0d0d0;behavior: url(../lib/ie-css3.htc)}
  1281. .select-item {margin: 0;padding: 0}
  1282. .select-option {background:#fff;line-height:34px;text-align:left;white-space:nowrap; cursor:pointer; border-bottom:1px solid #f2f2f2; padding:0 10px}
  1283. .select-item .selected {background-color:#148cf1;color:#fff}
  1284. /*3.4.4 input-file 文件上传
  1285. Example:
  1286. <span class="btn-upload">
  1287. <a style="z-index:2;" href="javascript:void();" class="btn btn-primary radius"><i class="iconfont">&#xf0020;</i> 浏览文件<input type="file" multiple name="file_0" class="input-file"></a>
  1288. </span>
  1289. Explain:把文件选择域设为透明,通过绝对定位覆盖在长的好看的按钮上面。
  1290. */
  1291. .btn-upload{position: relative; display:inline-block;height:31px; *display:inline;overflow:hidden;vertical-align:middle;cursor:pointer}
  1292. .upload-url{cursor: pointer; width:300px}
  1293. .input-file{position:absolute; right:0; top:0; cursor: pointer; z-index:1; font-size:30em;opacity:0;filter: alpha(opacity=0)}
  1294. .form-group .upload-btn{ margin-left:-1px}
  1295. .btn-upload .icon-add,.btn-upload .icon-minus{cursor: pointer;display: inline-block;font-family: Arial;font-size: 30px;height: 31px;line-height: 31px;text-align: center;vertical-align: middle;width: 36px}
  1296. @media (max-width: 767px) {
  1297. .upload-btn{ display:none}
  1298. .upload-url{ display:none}
  1299. }
  1300. /*数字表单*/
  1301. .numberControlBox{display:inline-block;overflow:hidden;vertical-align: middle}
  1302. .ncb-up,.ncb-down{font-size:0px;display:block;height:10px;background-color:#f4f4f4;background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(230,230,230) 50%,rgb(255,255,255) 100%);width:24px;border:1px solid #d1d1d1;cursor:pointer}
  1303. .ncb-up{margin-bottom:1px}
  1304. .numberControlBox .ncb_ico{display:block;height:10px;background-image:url(../img/icon-arrow.png);background-repeat:no-repeat}
  1305. .ncb-up .ncb_ico{background-position: -22px center}
  1306. .ncb-down .ncb_ico{background-position: 1px center}
  1307. .ncb_btn_hover{border:1px solid #9dc7e7;background-color:#dff2fc;background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(210,237,250) 50%,rgb(255,255,255) 100%)}
  1308. .ncb_btn_selected{border:1px solid #6198c2;background-color:#aee1fb;background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(174,225,251) 50%,rgb(255,255,255) 100%)}
  1309. .input-text[type="number"]{width:80px}
  1310. /*3.4.5 表单布局*/
  1311. label,.placeholder{font-size:14px}
  1312. .form legend{font-size:20px}/*表单名称*/
  1313. .form .row{margin-top:15px}/*表单行*/
  1314. .form-label{display:block; color:#555}/*表单标题*/
  1315. .formControls{position:relative}/*表单控制区*/
  1316. .formControls > *{vertical-align:middle}
  1317. .placeholder{position:absolute; left:4px; top:4px;color:#c6c6c6; cursor:text}/*表单默认值*/
  1318. .form-horizontal .form-label{margin-top:3px;cursor:text;text-align:right}
  1319. .form-horizontal .Validform_checktip{ margin-top:5px}
  1320. /*设置placeholder颜色*/
  1321. ::-webkit-input-placeholder {color:#b3b3b3}/* WebKit browsers */
  1322. :-moz-placeholder {color:#b3b3b3}/* Mozilla Firefox 4 to 18 */
  1323. ::-moz-placeholder {color:#b3b3b3}/* Mozilla Firefox 19+ */
  1324. :-ms-input-placeholder {color:#b3b3b3}/* Internet Explorer 10+ */
  1325. .placeholder{color:#adb0be; position:absolute; z-index:9}/*不兼容placeholder属性的浏览器,可使用<span class="placeholder">表单默认值</span>*/
  1326. @media (max-width: 767px) {
  1327. .form-horizontal .form-label{ text-align:left}
  1328. }
  1329. /*3.4.6 表单验证*/
  1330. /*文本框的错误状态*/
  1331. .Validform_error,input.error,select.error{background-color:#fbe2e2; border-color:#c66161; color:#c00}
  1332. .Validform_wrong,.Validform_right,.Validform_warning{display:inline-block;height:20px;font-size:12px;vertical-align:middle; padding-left:25px}
  1333. /*错误*/
  1334. .Validform_wrong{background:url(../images/icon_error_s.png) no-repeat 0 center;color:#ef392b}
  1335. /*正确*/
  1336. .Validform_right{background:url(../images/icon_right_s.png) no-repeat 0 center}
  1337. /*警告*/
  1338. .Validform_warning{background:url(../images/icon_warning_s.png) no-repeat 0 center;color:#777}
  1339. label.error{ position: absolute; right: 18px; top: 5px;color:#ef392b; font-size: 12px}
  1340. /*密码等级*/
  1341. .passwordStrength b{font-weight:400}
  1342. .passwordStrength b,.passwordStrength span{display:inline-block; vertical-align:middle;line-height:16px;line-height:18px\9;height:16px}
  1343. .passwordStrength span{width:57px;text-align:center;background-color:#d0d0d0; border-right:1px solid #fff}
  1344. .passwordStrength .last{border-right:none}
  1345. .passwordStrength .bgStrength{color:#fff;background-color:#fcc900}
  1346. /*Validform对话框*/
  1347. #Validform_msg{font-size:14px;width:300px; -webkit-box-shadow:2px 2px 3px #aaa; -moz-box-shadow:2px 2px 3px #aaa; background:#fff; position:absolute; top:0px; right:50px; z-index:99999; display:none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999'); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1)}
  1348. #Validform_msg .iframe{position:absolute; left:0px; top:-1px; z-index:-1}
  1349. #Validform_msg .Validform_title{font-size:20px; padding:10px;text-align:left;color:#fff; position:relative; background-color:#fcc900}
  1350. #Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{position:absolute; right:8px; top:6px; color:#fff; text-decoration:none; font-family:Verdana}
  1351. #Validform_msg a.Validform_close:hover{color:#fff}
  1352. #Validform_msg .Validform_info{padding:10px;border:1px solid #bbb; border-top:none; text-align:left}
  1353. @media (max-width: 767px) {
  1354. .responsive .Validform_checktip{margin-top:10px}
  1355. }
  1356. /*3.5 按钮
  1357. Name: style_button
  1358. Example: <button class="btn radius radius btn-primary|btn-info|btn-success|btn-warning|btn-danger|btn-inverse|btn-link" type="button">按钮</button>
  1359. Explain: btn-primary:主要|btn-info:信息|btn-success:成功|btn-warning:警告|btn-danger:危险|btn-inverse:反向|btn-link:链接
  1360. */
  1361. /*关闭*/
  1362. .close{font-size:20px;color: #000;text-shadow: 0 1px 0 #fff;opacity: 0.2;filter: alpha(opacity=20)}
  1363. .close:hover,.close:focus{color: #000;text-decoration: none;cursor: pointer;opacity: 0.4;filter: alpha(opacity=40)}
  1364. button.close{padding:0;cursor:pointer;background:transparent;border: 0;-webkit-appearance: none}
  1365. /*按钮*/
  1366. .btn{display:inline-block;box-sizing:border-box;cursor:pointer;text-align:center;font-weight:400;white-space:nowrap;vertical-align: middle;-moz-padding-start:npx; -moz-padding-end:npx;border:solid 1px #ddd; background-color:#fff; width:auto;*zoom:1;*overflow:visible;
  1367. -webkit-transition:background-color .1s linear;
  1368. -moz-transition:background-color .1s linear;
  1369. -o-transition:background-color .1s linear;
  1370. transition:background-color .1s linear}
  1371. a.btn:hover,a.btn:focus,a.btn:active,a.btn.active,a.btn.disabled,a.btn[disabled]{text-decoration:none}
  1372. .btn:active,.btn.active{background-color:#ccc}
  1373. .btn:first-child{*margin-left:0}
  1374. .btn.active,.btn:active{-moz-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset;-webkit-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset; box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset}
  1375. /*默认——灰色 通常用于取消*/
  1376. .btn-default{background-color:#e6e6e6;border-color:#e6e6e6}
  1377. .btn-default:hover,
  1378. .btn-default:focus,
  1379. .btn-default:active,
  1380. .btn-default.active{color:#333;background-color:#c7c7c7;border-color:#c7c7c7}
  1381. /*主要——主色 通常用于确定、提交、购买、支付等*/
  1382. .btn-primary{color:#fff;background-color:#5a98de; border-color:#5a98de}
  1383. .btn-primary:hover,
  1384. .btn-primary:focus,
  1385. .btn-primary:active,
  1386. .btn-primary.active{color:#fff;background-color:#0a6999;border-color:#0a6999}
  1387. /*次要按钮*/
  1388. .btn-secondary{color:#fff;background-color:#3bb4f2; border-color:#3bb4f2}
  1389. .btn-secondary:hover,
  1390. .btn-secondary:focus,
  1391. .btn-secondary:active,
  1392. .btn-secondary.active{color:#fff;background-color:#0f9ae0;border-color:#0f9ae0}
  1393. /*成功*/
  1394. .btn-success{color:#fff;background-color:#5eb95e; border-color:#5eb95e}
  1395. .btn-success:hover,
  1396. .btn-success:focus,
  1397. .btn-success:active,
  1398. .btn-success.active{color:#fff;background-color:#429842;border-color:#429842}
  1399. /*警告*/
  1400. .btn-warning{color:#fff;background-color:#f37b1d; border-color:#f37b1d}
  1401. .btn-warning:hover,
  1402. .btn-warning:focus,
  1403. .btn-warning:active,
  1404. .btn-warning.active{color:#fff;background-color:#c85e0b;border-color:#c85e0b}
  1405. /*危险*/
  1406. .btn-danger{color:#fff;background-color:#dd514c; border-color:#dd514c}
  1407. .btn-danger:hover,
  1408. .btn-danger:focus,
  1409. .btn-danger:active,
  1410. .btn-danger.active{color:#fff;background-color:#c62b26;border-color:#c62b26}
  1411. /*链接*/
  1412. .btn-link{color:#0e90d2;cursor:pointer;border-color:transparent;background-color:transparent}
  1413. .btn-link:hover,
  1414. .btn-link:focus,
  1415. .btn-link:active,
  1416. .btn-link.active{color:#095f8a;text-decoration:underline;background-color:transparent}
  1417. /*禁用状态*/
  1418. .btn.disabled{cursor:not-allowed;background-image:none;opacity:.65;filter:alpha(opacity=65);box-shadow:none; pointer-events:none}
  1419. /*块级按钮*/
  1420. .btn-block {-moz-box-sizing: border-box;display: block;padding-left: 0;padding-right: 0;width: 100%}
  1421. /* Outline buttons */
  1422. .btn-primary-outline{color:#5a98de;background-color:transparent;background-image:none;border-color:#5a98de}
  1423. .btn-primary-outline.active,.btn-primary-outline.focus,.btn-primary-outline:active,.btn-primary-outline:focus,.open>.btn-primary-outline.dropdown-toggle{color:#fff;background-color:#5a98de;border-color:#5a98de}
  1424. .btn-primary-outline:hover{color:#fff;background-color:#5a98de;border-color:#5a98de}
  1425. .btn-primary-outline.disabled.focus,.btn-primary-outline.disabled:focus,.btn-primary-outline:disabled.focus,.btn-primary-outline:disabled:focus,fieldset[disabled] .btn-primary-outline.focus,fieldset[disabled] .btn-primary-outline:focus{border-color:#0a6999}
  1426. .btn-primary-outline.disabled:hover,.btn-primary-outline:disabled:hover,fieldset[disabled] .btn-primary-outline:hover{border-color:#0a6999}
  1427. .btn-secondary-outline{color:#3bb4f2;background-color:transparent;background-image:none;border-color:#3bb4f2}
  1428. .btn-secondary-outline.active,.btn-secondary-outline.focus,.btn-secondary-outline:active,.btn-secondary-outline:focus,.open>.btn-secondary-outline.dropdown-toggle{color:#fff;background-color:#3bb4f2;border-color:#3bb4f2}
  1429. .btn-secondary-outline:hover{color:#fff;background-color:#3bb4f2;border-color:#3bb4f2}
  1430. .btn-secondary-outline.disabled.focus,.btn-secondary-outline.disabled:focus,.btn-secondary-outline:disabled.focus,.btn-secondary-outline:disabled:focus,fieldset[disabled] .btn-secondary-outline.focus,fieldset[disabled] .btn-secondary-outline:focus{border-color:#0f9ae0}
  1431. .btn-secondary-outline.disabled:hover,.btn-secondary-outline:disabled:hover,fieldset[disabled] .btn-secondary-outline:hover{border-color:#0f9ae0}
  1432. .btn-success-outline{color:#5eb95e;background-color:transparent;background-image:none;border-color:#5eb95e}
  1433. .btn-success-outline.active,.btn-success-outline.focus,.btn-success-outline:active,.btn-success-outline:focus,.open>.btn-success-outline.dropdown-toggle{color:#fff;background-color:#5eb95e;border-color:#5eb95e}
  1434. .btn-success-outline:hover{color:#fff;background-color:#5eb95e;border-color:#5eb95e}
  1435. .btn-success-outline.disabled.focus,.btn-success-outline.disabled:focus,.btn-success-outline:disabled.focus,.btn-success-outline:disabled:focus,fieldset[disabled] .btn-success-outline.focus,fieldset[disabled] .btn-success-outline:focus{border-color:#429842}
  1436. .btn-success-outline.disabled:hover,.btn-success-outline:disabled:hover,fieldset[disabled] .btn-success-outline:hover{border-color:#429842}
  1437. .btn-warning-outline{color:#f37b1d;background-color:transparent;background-image:none;border-color:#f37b1d}
  1438. .btn-warning-outline.active,.btn-warning-outline.focus,.btn-warning-outline:active,.btn-warning-outline:focus,.open>.btn-warning-outline.dropdown-toggle{color:#fff;background-color:#f37b1d;border-color:#f37b1d}
  1439. .btn-warning-outline:hover{color:#fff;background-color:#f37b1d;border-color:#f37b1d}
  1440. .btn-warning-outline.disabled.focus,.btn-warning-outline.disabled:focus,.btn-success-outline:disabled.focus,.btn-warning-outline:disabled:focus,fieldset[disabled] .btn-warning-outline.focus,fieldset[disabled] .btn-warning-outline:focus{border-color:#c85e0b}
  1441. .btn-warning-outline.disabled:hover,.btn-warning-outline:disabled:hover,fieldset[disabled] .btn-warning-outline:hover{border-color:#c85e0b}
  1442. .btn-danger-outline{color:#dd514c;background-color:transparent;background-image:none;border-color:#dd514c}
  1443. .btn-danger-outline.active,.btn-danger-outline.focus,.btn-danger-outline:active,.btn-danger-outline:focus,.open>.btn-danger-outline.dropdown-toggle{color:#fff;background-color:#dd514c;border-color:#dd514c}
  1444. .btn-danger-outline:hover{color:#fff;background-color:#dd514c;border-color:#dd514c}
  1445. .btn-danger-outline.disabled.focus,.btn-danger-outline.disabled:focus,.btn-success-outline:disabled.focus,.btn-danger-outline:disabled:focus,fieldset[disabled] .btn-danger-outline.focus,fieldset[disabled] .btn-danger-outline:focus{border-color:#c62b26}
  1446. .btn-danger-outline.disabled:hover,.btn-danger-outline:disabled:hover,fieldset[disabled] .btn-danger-outline:hover{border-color:#c62b26}
  1447. /*表单组*/
  1448. .form-group{ display:inline-block;vertical-align:middle}
  1449. .form-group .input-text{ position:relative; vertical-align:top}
  1450. .form-group.radius{ overflow: hidden}
  1451. .form-group.radius .input-text{border-radius:4px 0 0 4px}
  1452. .form-group.round .input-text{border-radius:1000px 0 0 1000px}
  1453. .form-group .btn{position:relative;margin-left:-1px}
  1454. .form-group.radius .btn{ border-radius:0 4px 4px 0}
  1455. .form-group.round .btn{ border-radius:0 1000px 1000px 0}
  1456. /*3.6 图片*/
  1457. /*3.6.1 图片效果
  1458. <img src="" class="img-responsive|radius|round|thumbnail" />
  1459. img-responsive 响应式 .radius 圆角图片 .round 圆形图片 .thumbnail 缩略图
  1460. */
  1461. .img-responsive{display:inline-block;max-width:100%;height:auto}
  1462. .thumbnail{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
  1463. @media (max-width: 767px) {
  1464. .img-responsive{width:100%}
  1465. }
  1466. .duang-opacity img{-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;transition:opacity .1s linear}
  1467. .duang-opacity a:hover img,a:hover .opacity img{opacity:0.85;filter: alpha(opacity=85)}
  1468. /*3.6.2 图集效果
  1469. Name: modal_album
  1470. Example:
  1471. <div class="album-item" style="width:160px">
  1472. <div class="album-img">
  1473. <img src="" style="height: 160px;">
  1474. </div>
  1475. <div class="album-title">《仙剑奇侠传》赵灵儿<span class="c-999">(20张)</span></div>
  1476. <div class="album-bg">
  1477. <div class="album-bg-Fir"></div>
  1478. <div class="album-bg-Sec"></div>
  1479. </div>
  1480. </div>*/
  1481. .album-item{}
  1482. .album-img{ border:1px solid #e0e0e0}
  1483. .album-img img{ display:block; width: 100%}
  1484. .album-title{display:block;text-align:left;padding:7px 5px;line-height:18px;color:#555;text-decoration:none;font-size:12px;border:solid 1px #e0e0e0;border-top:0}
  1485. .album-bg-Fir,.album-bg-Sec{border:1px solid #e6e6e6;border-top:1px solid #f5f5f5;height:1px;margin:0 auto;overflow:hidden}
  1486. .album-bg-Fir{ margin:0 3px}
  1487. .album-bg-Sec{ margin:0 6px}
  1488. /*3.6.3 头像
  1489. Name: mod_avatar
  1490. Example: <i class="avatar avatar-L radius"><img src="static/h-ui/images/avatar-default-S.gif"></i>
  1491. */
  1492. .avatar{display:inline-block;position:relative; overflow:hidden}
  1493. .avatar img{ display:block}
  1494. .avatar.radius,.avatar.radius img{border-radius:50%}
  1495. .avatar,.avatar img{width:32px; height:32px}
  1496. .avatar.size-MINI{ width:16px;height:16px}
  1497. .avatar.size-S,.avatar.size-S img{width:24px; height:24px}
  1498. .avatar.size-M,.avatar.size-M img{width:32px; height:32px}/*默认为中,可以不写,可以理解为:均码*/
  1499. .avatar.size-L,.avatar.size-L img{width:40px; height:40px}
  1500. .avatar.size-XL,.avatar.size-XL img{width:64px; height:64px}
  1501. .avatar.size-XXL,.avatar.size-XXL img{width:100px; height:100px}
  1502. .avatar.size-XXXL,.avatar.size-XXXL img{width:128px; height:128px}
  1503. /*3.7 图标
  1504. H-ui采用Font Awesome 3.2.1的整套图标,因为是图标字体,所以可以像控制字体那样随心所欲改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性
  1505. */
  1506. .iconpic{display:inline-block; vertical-align:sub;*vertical-align:middle;_vertical-align:middle; width:16px; height:16px; background-position:center; background-repeat:no-repeat}
  1507. /*3.8 效果
  1508. Name: style_animation
  1509. Example: <input class="btn hui-animation" val="淡入" type="button" data-tra="hui-fadein" />
  1510. */
  1511. /* duang 加特效 */
  1512. .hui-bounce,.hui-flip,.hui-flash,.hui-shake,.hui-swing,.hui-wobble,.hui-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease}
  1513. .hui-fadein,.hui-fadeinT,.hui-fadeinR,.hui-fadeinB,.hui-fadeinL,.hui-bouncein,.hui-bounceinT,.hui-bounceinR,.hui-bounceinB,.hui-bounceinL,.hui-rotatein,.hui-rotateinLT,.hui-rotateinLB,.hui-rotateinRT,.hui-rotateinRB,.hui-flipin,.hui-flipinX,.hui-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards}
  1514. .hui-fadeout,.hui-fadeoutT,.hui-fadeoutR,.hui-fadeoutB,.hui-fadeoutL,.hui-bounceout,.hui-bounceoutT,.hui-bounceoutR,.hui-bounceoutB,.hui-bounceoutL,.hui-rotateout,.hui-rotateoutLT,.hui-rotateoutLB,.hui-rotateoutRT,.hui-rotateoutRB,.hui-flipout,.hui-flipoutX,.hui-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards}
  1515. /* 淡入 */
  1516. .hui-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein}
  1517. /* 淡入-从上 */
  1518. .hui-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT}
  1519. /* 淡入-从右 */
  1520. .hui-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR}
  1521. /* 淡入-从下 */
  1522. .hui-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB}
  1523. /* 淡入-从左 */
  1524. .hui-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL}
  1525. /* 淡出 */
  1526. .hui-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout}
  1527. /* 淡出-向上 */
  1528. .hui-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT}
  1529. /* 淡出-向右 */
  1530. .hui-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR}
  1531. /* 淡出-向下 */
  1532. .hui-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB}
  1533. /* 淡出-向左 */
  1534. .hui-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL}
  1535. /* 弹跳 */
  1536. .hui-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce}
  1537. /* 弹入 */
  1538. .hui-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein}
  1539. /* 弹入-从上 */
  1540. .hui-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT}
  1541. /* 弹入-从右 */
  1542. .hui-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR}
  1543. /* 弹入-从下 */
  1544. .hui-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB}
  1545. /* 弹入-从左 */
  1546. .hui-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL}
  1547. /* 弹出 */
  1548. .hui-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout}
  1549. /* 弹出-向上 */
  1550. .hui-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT}
  1551. /* 弹出-向右 */
  1552. .hui-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR}
  1553. /* 弹出-向下 */
  1554. .hui-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB}
  1555. /* 弹出-向左 */
  1556. .hui-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL}
  1557. /* 转入 */
  1558. .hui-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein}
  1559. /* 转入-从左上 */
  1560. .hui-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT}
  1561. /* 转入-从左下 */
  1562. .hui-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB}
  1563. /* 转入-从右上 */
  1564. .hui-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT}
  1565. /* 转入-从右下*/
  1566. .hui-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB}
  1567. /* 转出 */
  1568. .hui-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout}
  1569. /* 转出-向左上 */
  1570. .hui-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT}
  1571. /* 转出-向左下 */
  1572. .hui-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB}
  1573. /* 转出-向右上 */
  1574. .hui-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT}
  1575. /* 转出-向右下 */
  1576. .hui-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB}
  1577. /* 翻转 */
  1578. .hui-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip}
  1579. /* 翻入-X轴 */
  1580. .hui-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX}
  1581. /* 翻入-Y轴 */
  1582. .hui-flipin,.hui-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY}
  1583. /* 翻出-X轴 */
  1584. .hui-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX}
  1585. /* 翻出-Y轴 */
  1586. .hui-flipout,.hui-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY}
  1587. /* 闪烁 */
  1588. .hui-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash}
  1589. /* 震颤 */
  1590. .hui-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake}
  1591. /* 摇摆 */
  1592. .hui-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing}
  1593. /* 摇晃 */
  1594. .hui-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble}
  1595. /* 震铃 */
  1596. .hui-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring}
  1597. /* define */
  1598. /* 淡入 */
  1599. @-webkit-keyframes fadein{
  1600. 0%{opacity:0}
  1601. 100%{opacity:1}
  1602. }
  1603. @-moz-keyframes fadein{
  1604. 0%{opacity:0}
  1605. 100%{opacity:1}
  1606. }
  1607. @-ms-keyframes fadein{
  1608. 0%{opacity:0}
  1609. 100%{opacity:1}
  1610. }
  1611. @keyframes fadein{
  1612. 0%{opacity:0}
  1613. 100%{opacity:1}
  1614. }
  1615. /* 淡入-从上 */
  1616. @-webkit-keyframes fadeinT{
  1617. 0%{opacity:0;-webkit-transform:translateY(-100px)}
  1618. 100%{opacity:1;-webkit-transform:translateY(0)}
  1619. }
  1620. @-moz-keyframes fadeinT{
  1621. 0%{opacity:0;-moz-transform:translateY(-100px)}
  1622. 100%{opacity:1;-moz-transform:translateY(0)}
  1623. }
  1624. @-ms-keyframes fadeinT{
  1625. 0%{opacity:0;-ms-transform:translateY(-100px)}
  1626. 100%{opacity:1;-ms-transform:translateY(0)}
  1627. }
  1628. @keyframes fadeinT{
  1629. 0%{opacity:0;transform:translateY(-100px)}
  1630. 100%{opacity:1;transform:translateY(0)}
  1631. }
  1632. /* 淡入-从右 */
  1633. @-webkit-keyframes fadeinR{
  1634. 0%{opacity:0;-webkit-transform:translateX(100px)}
  1635. 100%{opacity:1;-webkit-transform:translateX(0)}
  1636. }
  1637. @-moz-keyframes fadeinR{
  1638. 0%{opacity:0;-moz-transform:translateX(100px)}
  1639. 100%{opacity:1;-moz-transform:translateX(0)}
  1640. }
  1641. @-ms-keyframes fadeinR{
  1642. 0%{opacity:0;-ms-transform:translateX(100px)}
  1643. 100%{opacity:1;-ms-transform:translateX(0)}
  1644. }
  1645. @keyframes fadeinR{
  1646. 0%{opacity:0;transform:translateX(100px)}
  1647. 100%{opacity:1;transform:translateX(0)}
  1648. }
  1649. /* 淡入-从下 */
  1650. @-webkit-keyframes fadeinB{
  1651. 0%{opacity:0;-webkit-transform:translateY(100px)}
  1652. 100%{opacity:1;-webkit-transform:translateY(0)}
  1653. }
  1654. @-moz-keyframes fadeinB{
  1655. 0%{opacity:0;-moz-transform:translateY(100px)}
  1656. 100%{opacity:1;-moz-transform:translateY(0)}
  1657. }
  1658. @-ms-keyframes fadeinB{
  1659. 0%{opacity:0;-ms-transform:translateY(100px)}
  1660. 100%{opacity:1;-ms-transform:translateY(0)}
  1661. }
  1662. @keyframes fadeinB{
  1663. 0%{opacity:0;transform:translateY(100px)}
  1664. 100%{opacity:1;transform:translateY(0)}
  1665. }
  1666. /* 淡入-从左 */
  1667. @-webkit-keyframes fadeinL{
  1668. 0%{opacity:0;-webkit-transform:translateX(-100px)}
  1669. 100%{opacity:1;-webkit-transform:translateX(0)}
  1670. }
  1671. @-moz-keyframes fadeinL{
  1672. 0%{opacity:0;-moz-transform:translateX(-100px)}
  1673. 100%{opacity:1;-moz-transform:translateX(0)}
  1674. }
  1675. @-ms-keyframes fadeinL{
  1676. 0%{opacity:0;-ms-transform:translateX(-100px)}
  1677. 100%{opacity:1;-ms-transform:translateX(0)}
  1678. }
  1679. @keyframes fadeinL{
  1680. 0%{opacity:0;transform:translateX(-100px)}
  1681. 100%{opacity:1;transform:translateX(0)}
  1682. }
  1683. /* 淡出 */
  1684. @-webkit-keyframes fadeout{
  1685. 0%{opacity:1}
  1686. 100%{opacity:0}
  1687. }
  1688. @-moz-keyframes fadeout{
  1689. 0%{opacity:1}
  1690. 100%{opacity:0}
  1691. }
  1692. @-ms-keyframes fadeout{
  1693. 0%{opacity:1}
  1694. 100%{opacity:0}
  1695. }
  1696. @keyframes fadeout{
  1697. 0%{opacity:1}
  1698. 100%{opacity:0}
  1699. }
  1700. /* 淡出-向上 */
  1701. @-webkit-keyframes fadeoutT{
  1702. 0%{opacity:1;-webkit-transform:translateY(0)}
  1703. 100%{opacity:0;-webkit-transform:translateY(-100px)}
  1704. }
  1705. @-moz-keyframes fadeoutT{
  1706. 0%{opacity:1;-moz-transform:translateY(0)}
  1707. 100%{opacity:0;-moz-transform:translateY(-100px)}
  1708. }
  1709. @-ms-keyframes fadeoutT{
  1710. 0%{opacity:1;-ms-transform:translateY(0)}
  1711. 100%{opacity:0;-ms-transform:translateY(-100px)}
  1712. }
  1713. @keyframes fadeoutT{
  1714. 0%{opacity:1;transform:translateY(0)}
  1715. 100%{opacity:0;transform:translateY(-100px)}
  1716. }
  1717. /* 淡出-向右 */
  1718. @-webkit-keyframes fadeoutR{
  1719. 0%{opacity:1;-webkit-transform:translateX(0)}
  1720. 100%{opacity:0;-webkit-transform:translateX(100px)}
  1721. }
  1722. @-moz-keyframes fadeoutR{
  1723. 0%{opacity:1;-moz-transform:translateX(0)}
  1724. 100%{opacity:0;-moz-transform:translateX(100px)}
  1725. }
  1726. @-ms-keyframes fadeoutR{
  1727. 0%{opacity:1;-ms-transform:translateX(0)}
  1728. 100%{opacity:0;-ms-transform:translateX(100px)}
  1729. }
  1730. @keyframes fadeoutR{
  1731. 0%{opacity:1;transform:translateX(0)}
  1732. 100%{opacity:0;transform:translateX(100px)}
  1733. }
  1734. /* 淡出-向下 */
  1735. @-webkit-keyframes fadeoutB{
  1736. 0%{opacity:1;-webkit-transform:translateY(0)}
  1737. 100%{opacity:0;-webkit-transform:translateY(100px)}
  1738. }
  1739. @-moz-keyframes fadeoutB{
  1740. 0%{opacity:1;-moz-transform:translateY(0)}
  1741. 100%{opacity:0;-moz-transform:translateY(100px)}
  1742. }
  1743. @-ms-keyframes fadeoutB{
  1744. 0%{opacity:1;-ms-transform:translateY(0)}
  1745. 100%{opacity:0;-ms-transform:translateY(100px)}
  1746. }
  1747. @keyframes fadeoutB{
  1748. 0%{opacity:1;transform:translateY(0)}
  1749. 100%{opacity:0;transform:translateY(100px)}
  1750. }
  1751. /* 淡出-向左 */
  1752. @-webkit-keyframes fadeoutL{
  1753. 0%{opacity:1;-webkit-transform:translateX(0)}
  1754. 100%{opacity:0;-webkit-transform:translateX(-100px)}
  1755. }
  1756. @-moz-keyframes fadeoutL{
  1757. 0%{opacity:1;-moz-transform:translateX(0)}
  1758. 100%{opacity:0;-moz-transform:translateX(-100px)}
  1759. }
  1760. @-ms-keyframes fadeoutL{
  1761. 0%{opacity:1;-ms-transform:translateX(0)}
  1762. 100%{opacity:0;-ms-transform:translateX(-100px)}
  1763. }
  1764. @keyframes fadeoutL{
  1765. 0%{opacity:1;transform:translateX(0)}
  1766. 100%{opacity:0;transform:translateX(-100px)}
  1767. }
  1768. /* 弹跳 */
  1769. @-webkit-keyframes bounce{
  1770. 0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
  1771. 40%{-webkit-transform:translateY(-30px)}
  1772. 60%{-webkit-transform:translateY(-15px)}
  1773. }
  1774. @-moz-keyframes bounce{
  1775. 0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
  1776. 40%{-moz-transform:translateY(-30px)}
  1777. 60%{-moz-transform:translateY(-15px)}
  1778. }
  1779. @-ms-keyframes bounce{
  1780. 0%,20%,50%,80%,100%{-ms-transform:translateY(0)}
  1781. 40%{-ms-transform:translateY(-30px)}
  1782. 60%{-ms-transform:translateY(-15px)}
  1783. }
  1784. @keyframes bounce{
  1785. 0%,20%,50%,80%,100%{transform:translateY(0)}
  1786. 40%{transform:translateY(-30px)}
  1787. 60%{transform:translateY(-15px)}
  1788. }
  1789. /* 弹入 */
  1790. @-webkit-keyframes bouncein{
  1791. 0%{opacity:0;-webkit-transform:scale(0.3)}
  1792. 50%{opacity:1;-webkit-transform:scale(1.05)}
  1793. 70%{-webkit-transform:scale(0.9)}
  1794. 100%{-webkit-transform:scale(1)}
  1795. }
  1796. @-moz-keyframes bouncein{
  1797. 0%{opacity:0;-moz-transform:scale(0.3)}
  1798. 50%{opacity:1;-moz-transform:scale(1.05)}
  1799. 70%{-moz-transform:scale(0.9)}
  1800. 100%{-moz-transform:scale(1)}
  1801. }
  1802. @-ms-keyframes bouncein{
  1803. 0%{opacity:0;-ms-transform:scale(0.3)}
  1804. 50%{opacity:1;-ms-transform:scale(1.05)}
  1805. 70%{-ms-transform:scale(0.9)}
  1806. 100%{-ms-transform:scale(1)}
  1807. }
  1808. @keyframes bouncein{
  1809. 0%{opacity:0;transform:scale(0.3)}
  1810. 50%{opacity:1;transform:scale(1.05)}
  1811. 70%{transform:scale(0.9)}
  1812. 100%{transform:scale(1)}
  1813. }
  1814. /* 弹入-从上 */
  1815. @-webkit-keyframes bounceinT{
  1816. 0%{opacity:0;-webkit-transform:translateY(-100px)}
  1817. 60%{opacity:1;-webkit-transform:translateY(30px)}
  1818. 80%{-webkit-transform:translateY(-10px)}
  1819. 100%{-webkit-transform:translateY(0)}
  1820. }
  1821. @-moz-keyframes bounceinT{
  1822. 0%{opacity:0;-moz-transform:translateY(-100px)}
  1823. 60%{opacity:1;-moz-transform:translateY(30px)}
  1824. 80%{-moz-transform:translateY(-10px)}
  1825. 100%{-moz-transform:translateY(0)}
  1826. }
  1827. @-ms-keyframes bounceinT{
  1828. 0%{opacity:0;-ms-transform:translateY(-100px)}
  1829. 60%{opacity:1;-ms-transform:translateY(30px)}
  1830. 80%{-ms-transform:translateY(-10px)}
  1831. 100%{-ms-transform:translateY(0)}
  1832. }
  1833. @keyframes bounceinT{
  1834. 0%{opacity:0;transform:translateY(-100px)}
  1835. 60%{opacity:1;transform:translateY(30px)}
  1836. 80%{transform:translateY(-10px)}
  1837. 100%{transform:translateY(0)}
  1838. }
  1839. /* 弹入-从右 */
  1840. @-webkit-keyframes bounceinR{
  1841. 0%{opacity:0;-webkit-transform:translateX(100px)}
  1842. 60%{opacity:1;-webkit-transform:translateX(-30px)}
  1843. 80%{-webkit-transform:translateX(10px)}
  1844. 100%{-webkit-transform:translateX(0)}
  1845. }
  1846. @-moz-keyframes bounceinR{
  1847. 0%{opacity:0;-moz-transform:translateX(100px)}
  1848. 60%{opacity:1;-moz-transform:translateX(-30px)}
  1849. 80%{-moz-transform:translateX(10px)}
  1850. 100%{-moz-transform:translateX(0)}
  1851. }
  1852. @-ms-keyframes bounceinR{
  1853. 0%{opacity:0;-ms-transform:translateX(100px)}
  1854. 60%{opacity:1;-ms-transform:translateX(-30px)}
  1855. 80%{-ms-transform:translateX(10px)}
  1856. 100%{-ms-transform:translateX(0)}
  1857. }
  1858. @keyframes bounceinR{
  1859. 0%{opacity:0;transform:translateX(100px)}
  1860. 60%{opacity:1;transform:translateX(-30px)}
  1861. 80%{transform:translateX(10px)}
  1862. 100%{transform:translateX(0)}
  1863. }
  1864. /* 弹入-从下 */
  1865. @-webkit-keyframes bounceinB{
  1866. 0%{opacity:0;-webkit-transform:translateY(100px)}
  1867. 60%{opacity:1;-webkit-transform:translateY(-30px)}
  1868. 80%{-webkit-transform:translateY(10px)}
  1869. 100%{-webkit-transform:translateY(0)}
  1870. }
  1871. @-moz-keyframes bounceinB{
  1872. 0%{opacity:0;-moz-transform:translateY(100px)}
  1873. 60%{opacity:1;-moz-transform:translateY(-30px)}
  1874. 80%{-moz-transform:translateY(10px)}
  1875. 100%{-moz-transform:translateY(0)}
  1876. }
  1877. @-ms-keyframes bounceinB{
  1878. 0%{opacity:0;-ms-transform:translateY(100px)}
  1879. 60%{opacity:1;-ms-transform:translateY(-30px)}
  1880. 80%{-ms-transform:translateY(10px)}
  1881. 100%{-ms-transform:translateY(0)}
  1882. }
  1883. @keyframes bounceinB{
  1884. 0%{opacity:0;transform:translateY(100px)}
  1885. 60%{opacity:1;transform:translateY(-30px)}
  1886. 80%{transform:translateY(10px)}
  1887. 100%{transform:translateY(0)}
  1888. }
  1889. /* 弹入-从左 */
  1890. @-webkit-keyframes bounceinL{
  1891. 0%{opacity:0;-webkit-transform:translateX(-100px)}
  1892. 60%{opacity:1;-webkit-transform:translateX(30px)}
  1893. 80%{-webkit-transform:translateX(-10px)}
  1894. 100%{-webkit-transform:translateX(0)}
  1895. }
  1896. @-moz-keyframes bounceinL{
  1897. 0%{opacity:0;-moz-transform:translateX(-100px)}
  1898. 60%{opacity:1;-moz-transform:translateX(30px)}
  1899. 80%{-moz-transform:translateX(-10px)}
  1900. 100%{-moz-transform:translateX(0)}
  1901. }
  1902. @-ms-keyframes bounceinL{
  1903. 0%{opacity:0;-ms-transform:translateX(-100px)}
  1904. 60%{opacity:1;-ms-transform:translateX(30px)}
  1905. 80%{-ms-transform:translateX(-10px)}
  1906. 100%{-ms-transform:translateX(0)}
  1907. }
  1908. @keyframes bounceinL{
  1909. 0%{opacity:0;transform:translateX(-100px)}
  1910. 60%{opacity:1;transform:translateX(30px)}
  1911. 80%{transform:translateX(-10px)}
  1912. 100%{transform:translateX(0)}
  1913. }
  1914. /* 弹出 */
  1915. @-webkit-keyframes bounceout{
  1916. 0%{-webkit-transform:scale(1)}
  1917. 25%{-webkit-transform:scale(0.95)}
  1918. 50%{opacity:1;-webkit-transform:scale(1.1)}
  1919. 100%{opacity:0;-webkit-transform:scale(0.3)}
  1920. }
  1921. @-moz-keyframes bounceout{
  1922. 0%{-moz-transform:scale(1)}
  1923. 25%{-moz-transform:scale(0.95)}
  1924. 50%{opacity:1;-moz-transform:scale(1.1)}
  1925. 100%{opacity:0;-moz-transform:scale(0.3)}
  1926. }
  1927. @-ms-keyframes bounceout{
  1928. 0%{-ms-transform:scale(1)}
  1929. 25%{-ms-transform:scale(0.95)}
  1930. 50%{opacity:1;-ms-transform:scale(1.1)}
  1931. 100%{opacity:0;-ms-transform:scale(0.3)}
  1932. }
  1933. @keyframes bounceout{
  1934. 0%{transform:scale(1)}
  1935. 25%{transform:scale(0.95)}
  1936. 50%{opacity:1;transform:scale(1.1)}
  1937. 100%{opacity:0;transform:scale(0.3)}
  1938. }
  1939. /* 弹出-向上*/
  1940. @-webkit-keyframes bounceoutT{
  1941. 0%{-webkit-transform:translateY(0)}
  1942. 20%{opacity:1;-webkit-transform:translateY(20px)}
  1943. 100%{opacity:0;-webkit-transform:translateY(-100px)}
  1944. }
  1945. @-moz-keyframes bounceoutT{
  1946. 0%{-moz-transform:translateY(0)}
  1947. 20%{opacity:1;-moz-transform:translateY(20px)}
  1948. 100%{opacity:0;-moz-transform:translateY(-100px)}
  1949. }
  1950. @-ms-keyframes bounceoutT{
  1951. 0%{-ms-transform:translateY(0)}
  1952. 20%{opacity:1;-ms-transform:translateY(20px)}
  1953. 100%{opacity:0;-ms-transform:translateY(-100px)}
  1954. }
  1955. @keyframes bounceoutT{
  1956. 0%{transform:translateY(0)}
  1957. 20%{opacity:1;transform:translateY(20px)}
  1958. 100%{opacity:0;transform:translateY(-100px)}
  1959. }
  1960. /* 弹出-向右*/
  1961. @-webkit-keyframes bounceoutR{
  1962. 0%{-webkit-transform:translateX(0)}
  1963. 20%{opacity:1;-webkit-transform:translateX(-20px)}
  1964. 100%{opacity:0;-webkit-transform:translateX(100px)}
  1965. }
  1966. @-moz-keyframes bounceoutR{
  1967. 0%{-moz-transform:translateX(0)}
  1968. 20%{opacity:1;-moz-transform:translateX(-20px)}
  1969. 100%{opacity:0;-moz-transform:translateX(100px)}
  1970. }
  1971. @-ms-keyframes bounceoutR{
  1972. 0%{-ms-transform:translateX(0)}
  1973. 20%{opacity:1;-ms-transform:translateX(-20px)}
  1974. 100%{opacity:0;-ms-transform:translateX(100px)}
  1975. }
  1976. @keyframes bounceoutR{
  1977. 0%{transform:translateX(0)}
  1978. 20%{opacity:1;transform:translateX(-20px)}
  1979. 100%{opacity:0;transform:translateX(100px)}
  1980. }
  1981. /* 弹出-向下 */
  1982. @-webkit-keyframes bounceoutB{
  1983. 0%{-webkit-transform:translateY(0)}
  1984. 20%{opacity:1;-webkit-transform:translateY(-20px)}
  1985. 100%{opacity:0;-webkit-transform:translateY(100px)}
  1986. }
  1987. @-moz-keyframes bounceoutB{
  1988. 0%{-moz-transform:translateY(0)}
  1989. 20%{opacity:1;-moz-transform:translateY(-20px)}
  1990. 100%{opacity:0;-moz-transform:translateY(100px)}
  1991. }
  1992. @-ms-keyframes bounceoutB{
  1993. 0%{-ms-transform:translateY(0)}
  1994. 20%{opacity:1;-ms-transform:translateY(-20px)}
  1995. 100%{opacity:0;-ms-transform:translateY(100px)}
  1996. }
  1997. @keyframes bounceoutB{
  1998. 0%{transform:translateY(0)}
  1999. 20%{opacity:1;transform:translateY(-20px)}
  2000. 100%{opacity:0;transform:translateY(100px)}
  2001. }
  2002. /* 弹出-向左 */
  2003. @-webkit-keyframes bounceoutL{
  2004. 0%{-webkit-transform:translateX(0)}
  2005. 20%{opacity:1;-webkit-transform:translateX(20px)}
  2006. 100%{opacity:0;-webkit-transform:translateX(-100px)}
  2007. }
  2008. @-moz-keyframes bounceoutL{
  2009. 0%{-moz-transform:translateX(0)}
  2010. 20%{opacity:1;-moz-transform:translateX(20px)}
  2011. 100%{opacity:0;-moz-transform:translateX(-100px)}
  2012. }
  2013. @-ms-keyframes bounceoutL{
  2014. 0%{-ms-transform:translateX(0)}
  2015. 20%{opacity:1;-ms-transform:translateX(20px)}
  2016. 100%{opacity:0;-ms-transform:translateX(-100px)}
  2017. }
  2018. @keyframes bounceoutL{
  2019. 0%{transform:translateX(0)}
  2020. 20%{opacity:1;transform:translateX(20px)}
  2021. 100%{opacity:0;transform:translateX(-200px)}
  2022. }
  2023. /* 转入 */
  2024. @-webkit-keyframes rotatein{
  2025. 0%{opacity:0;-webkit-transform:rotate(-200deg)}
  2026. 100%{opacity:1;-webkit-transform:rotate(0)}
  2027. }
  2028. @-moz-keyframes rotatein{
  2029. 0%{opacity:0;-moz-transform:rotate(-200deg)}
  2030. 100%{opacity:1;-moz-transform:rotate(0)}
  2031. }
  2032. @-ms-keyframes rotatein{
  2033. 0%{opacity:0;-ms-transform:rotate(-200deg)}
  2034. 100%{opacity:1;-ms-transform:rotate(0)}
  2035. }
  2036. @keyframes rotatein{
  2037. 0%{opacity:0;transform:rotate(-200deg)}
  2038. 100%{opacity:1;transform:rotate(0)}
  2039. }
  2040. /* 转入-从左上 */
  2041. @-webkit-keyframes rotateinLT{
  2042. 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
  2043. 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
  2044. }
  2045. @-moz-keyframes rotateinLT{
  2046. 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
  2047. 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
  2048. }
  2049. @-ms-keyframes rotateinLT{
  2050. 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
  2051. 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
  2052. }
  2053. @keyframes rotateinLT{
  2054. 0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
  2055. 100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
  2056. }
  2057. /* 转入-从左下 */
  2058. @-webkit-keyframes rotateineftB{
  2059. 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
  2060. 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
  2061. }
  2062. @-moz-keyframes rotateineftB{
  2063. 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
  2064. 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
  2065. }
  2066. @-ms-keyframes rotateineftB{
  2067. 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
  2068. 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
  2069. }
  2070. @keyframes rotateineftB{
  2071. 0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
  2072. 100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
  2073. }
  2074. /* 转入-从右上 */
  2075. @-webkit-keyframes rotateinRT{
  2076. 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
  2077. 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
  2078. }
  2079. @-moz-keyframes rotateinRT{
  2080. 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
  2081. 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
  2082. }
  2083. @-ms-keyframes rotateinRT{
  2084. 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
  2085. 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
  2086. }
  2087. @keyframes rotateinRT{
  2088. 0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
  2089. 100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
  2090. }
  2091. /* 转入-从右下*/
  2092. @-webkit-keyframes rotateinRB{
  2093. 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
  2094. 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
  2095. }
  2096. @-moz-keyframes rotateinRB{
  2097. 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
  2098. 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
  2099. }
  2100. @-ms-keyframes rotateinRB{
  2101. 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
  2102. 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
  2103. }
  2104. @keyframes rotateinRB{
  2105. 0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
  2106. 100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
  2107. }
  2108. /* 转出 */
  2109. @-webkit-keyframes rotateout{
  2110. 0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
  2111. 100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}
  2112. }
  2113. @-moz-keyframes rotateout{
  2114. 0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}
  2115. 100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}
  2116. }
  2117. @-ms-keyframes rotateout{
  2118. 0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1}
  2119. 100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0}
  2120. }
  2121. @keyframes rotateout{
  2122. 0%{transform-origin:center center;transform:rotate(0);opacity:1}
  2123. 100%{transform-origin:center center;transform:rotate(200deg);opacity:0}
  2124. }
  2125. /* 转出-向左上 */
  2126. @-webkit-keyframes rotateoutLT{
  2127. 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
  2128. 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
  2129. }
  2130. @-moz-keyframes rotateoutLT{
  2131. 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
  2132. 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
  2133. }
  2134. @-ms-keyframes rotateoutLT{
  2135. 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
  2136. 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
  2137. }
  2138. @keyframes rotateoutLT{
  2139. 0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
  2140. 100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
  2141. }
  2142. /* 转出-向左下 */
  2143. @-webkit-keyframes rotateoutLB{
  2144. 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
  2145. 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
  2146. }
  2147. @-moz-keyframes rotateoutLB{
  2148. 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
  2149. 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
  2150. }
  2151. @-ms-keyframes rotateoutLB{
  2152. 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
  2153. 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
  2154. }
  2155. @keyframes rotateoutLB{
  2156. 0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
  2157. 100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
  2158. }
  2159. /* 转出-向右上 */
  2160. @-webkit-keyframes rotateoutRT{
  2161. 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
  2162. 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
  2163. }
  2164. @-moz-keyframes rotateoutRT{
  2165. 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
  2166. 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
  2167. }
  2168. @-ms-keyframes rotateoutRT{
  2169. 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
  2170. 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
  2171. }
  2172. @keyframes rotateoutRT{
  2173. 0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
  2174. 100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
  2175. }
  2176. /* 转出-向右下 */
  2177. @-webkit-keyframes rotateoutBR{
  2178. 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
  2179. 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
  2180. }
  2181. @-moz-keyframes rotateoutBR{
  2182. 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
  2183. 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
  2184. }
  2185. @-ms-keyframes rotateoutBR{
  2186. 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
  2187. 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
  2188. }
  2189. @keyframes rotateoutBR{
  2190. 0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
  2191. 100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
  2192. }
  2193. /* 翻转 */
  2194. @-webkit-keyframes flip{
  2195. 0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}
  2196. 40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}
  2197. 50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}
  2198. 80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in}
  2199. 100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}
  2200. }
  2201. @-moz-keyframes flip{
  2202. 0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}
  2203. 40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}
  2204. 50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}
  2205. 80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in}
  2206. 100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}
  2207. }
  2208. @-ms-keyframes flip{
  2209. 0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out}
  2210. 40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out}
  2211. 50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in}
  2212. 80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in}
  2213. 100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in}
  2214. }
  2215. @keyframes flip{
  2216. 0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}
  2217. 40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}
  2218. 50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}
  2219. 80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in}
  2220. 100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}
  2221. }
  2222. /* 翻入-X轴 */
  2223. @-webkit-keyframes flipinX{
  2224. 0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
  2225. 40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
  2226. 70%{-webkit-transform:perspective(400px) rotateX(10deg)}
  2227. 100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
  2228. }
  2229. @-moz-keyframes flipinX{
  2230. 0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
  2231. 40%{-moz-transform:perspective(400px) rotateX(-10deg)}
  2232. 70%{-moz-transform:perspective(400px) rotateX(10deg)}
  2233. 100%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
  2234. }
  2235. @-ms-keyframes flipinX{
  2236. 0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
  2237. 40%{-ms-transform:perspective(400px) rotateX(-10deg)}
  2238. 70%{-ms-transform:perspective(400px) rotateX(10deg)}
  2239. 100%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
  2240. }
  2241. @keyframes flipinX{
  2242. 0%{transform:perspective(400px) rotateX(90deg);opacity:0}
  2243. 40%{transform:perspective(400px) rotateX(-10deg)}
  2244. 70%{transform:perspective(400px) rotateX(10deg)}
  2245. 100%{transform:perspective(400px) rotateX(0);opacity:1}
  2246. }
  2247. /* 翻入-Y轴 */
  2248. @-webkit-keyframes flipinY{
  2249. 0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
  2250. 40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
  2251. 70%{-webkit-transform:perspective(400px) rotateY(10deg)}
  2252. 100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
  2253. }
  2254. @-moz-keyframes flipinY{
  2255. 0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
  2256. 40%{-moz-transform:perspective(400px) rotateY(-10deg)}
  2257. 70%{-moz-transform:perspective(400px) rotateY(10deg)}
  2258. 100%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
  2259. }
  2260. @-ms-keyframes flipinY{
  2261. 0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
  2262. 40%{-ms-transform:perspective(400px) rotateY(-10deg)}
  2263. 70%{-ms-transform:perspective(400px) rotateY(10deg)}
  2264. 100%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
  2265. }
  2266. @keyframes flipinY{
  2267. 0%{transform:perspective(400px) rotateY(90deg);opacity:0}
  2268. 40%{transform:perspective(400px) rotateY(-10deg)}
  2269. 70%{transform:perspective(400px) rotateY(10deg)}
  2270. 100%{transform:perspective(400px) rotateY(0);opacity:1}
  2271. }
  2272. /* 翻出-X轴 */
  2273. @-webkit-keyframes flipoutX{
  2274. 0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
  2275. 100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
  2276. }
  2277. @-moz-keyframes flipoutX{
  2278. 0%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
  2279. 100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
  2280. }
  2281. @-ms-keyframes flipoutX{
  2282. 0%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
  2283. 100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
  2284. }
  2285. @keyframes flipoutX{
  2286. 0%{transform:perspective(400px) rotateX(0);opacity:1}
  2287. 100%{transform:perspective(400px) rotateX(90deg);opacity:0}
  2288. }
  2289. /* 翻出-Y轴 */
  2290. @-webkit-keyframes flipoutY{
  2291. 0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
  2292. 100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
  2293. }
  2294. @-moz-keyframes flipoutY{
  2295. 0%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
  2296. 100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
  2297. }
  2298. @-ms-keyframes flipoutY{
  2299. 0%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
  2300. 100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
  2301. }
  2302. @keyframes flipoutY{
  2303. 0%{transform:perspective(400px) rotateY(0);opacity:1}
  2304. 100%{transform:perspective(400px) rotateY(90deg);opacity:0}
  2305. }
  2306. /* 闪烁 */
  2307. @-webkit-keyframes flash{
  2308. 0%,50%,100%{opacity:1}
  2309. 25%,75%{opacity:0}
  2310. }
  2311. @-moz-keyframes flash{
  2312. 0%,50%,100%{opacity:1}
  2313. 25%,75%{opacity:0}
  2314. }
  2315. @-ms-keyframes flash{
  2316. 0%,50%,100%{opacity:1}
  2317. 25%,75%{opacity:0}
  2318. }
  2319. @keyframes flash{
  2320. 0%,50%,100%{opacity:1}
  2321. 25%,75%{opacity:0}
  2322. }
  2323. /* 震颤 */
  2324. @-webkit-keyframes shake{
  2325. 0%,100%{-webkit-transform:translateX(0)}
  2326. 10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
  2327. 20%,40%,60%,80%{-webkit-transform:translateX(10px)}
  2328. }
  2329. @-moz-keyframes shake{
  2330. 0%,100%{-moz-transform:translateX(0)}
  2331. 10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}
  2332. 20%,40%,60%,80%{-moz-transform:translateX(10px)}
  2333. }
  2334. @-ms-keyframes shake{
  2335. 0%,100%{-ms-transform:translateX(0)}
  2336. 10%,30%,50%,70%,90%{-ms-transform:translateX(-10px)}
  2337. 20%,40%,60%,80%{-ms-transform:translateX(10px)}
  2338. }
  2339. @keyframes shake{
  2340. 0%,100%{transform:translateX(0)}
  2341. 10%,30%,50%,70%,90%{transform:translateX(-10px)}
  2342. 20%,40%,60%,80%{transform:translateX(10px)}
  2343. }
  2344. /* 摇摆 */
  2345. @-webkit-keyframes swing{
  2346. 20%{-webkit-transform:rotate(15deg)}
  2347. 40%{-webkit-transform:rotate(-10deg)}
  2348. 60%{-webkit-transform:rotate(5deg)}
  2349. 80%{-webkit-transform:rotate(-5deg)}
  2350. 100%{-webkit-transform:rotate(0)}
  2351. }
  2352. @-moz-keyframes swing{
  2353. 20%{-moz-transform:rotate(15deg)}
  2354. 40%{-moz-transform:rotate(-10deg)}
  2355. 60%{-moz-transform:rotate(5deg)}
  2356. 80%{-moz-transform:rotate(-5deg)}
  2357. 100%{-moz-transform:rotate(0)}
  2358. }
  2359. @-ms-keyframes swing{
  2360. 20%{-ms-transform:rotate(15deg)}
  2361. 40%{-ms-transform:rotate(-10deg)}
  2362. 60%{-ms-transform:rotate(5deg)}
  2363. 80%{-ms-transform:rotate(-5deg)}
  2364. 100%{-ms-transform:rotate(0)}
  2365. }
  2366. @keyframes swing{
  2367. 20%{transform:rotate(15deg)}
  2368. 40%{transform:rotate(-10deg)}
  2369. 60%{transform:rotate(5deg)}
  2370. 80%{transform:rotate(-5deg)}
  2371. 100%{transform:rotate(0)}
  2372. }
  2373. /* 摇晃 */
  2374. @-webkit-keyframes wobble{
  2375. 0%{-webkit-transform:translateX(0)}
  2376. 15%{-webkit-transform:translateX(-100px) rotate(-5deg)}
  2377. 30%{-webkit-transform:translateX(80px) rotate(3deg)}
  2378. 45%{-webkit-transform:translateX(-65px) rotate(-3deg)}
  2379. 60%{-webkit-transform:translateX(40px) rotate(2deg)}
  2380. 75%{-webkit-transform:translateX(-20px) rotate(-1deg)}
  2381. 100%{-webkit-transform:translateX(0)}
  2382. }
  2383. @-moz-keyframes wobble{
  2384. 0%{-moz-transform:translateX(0)}
  2385. 15%{-moz-transform:translateX(-100px) rotate(-5deg)}
  2386. 30%{-moz-transform:translateX(80px) rotate(3deg)}
  2387. 45%{-moz-transform:translateX(-65px) rotate(-3deg)}
  2388. 60%{-moz-transform:translateX(40px) rotate(2deg)}
  2389. 75%{-moz-transform:translateX(-20px) rotate(-1deg)}
  2390. 100%{-moz-transform:translateX(0)}
  2391. }
  2392. @-ms-keyframes wobble{
  2393. 0%{-ms-transform:translateX(0)}
  2394. 15%{-ms-transform:translateX(-100px) rotate(-5deg)}
  2395. 30%{-ms-transform:translateX(80px) rotate(3deg)}
  2396. 45%{-ms-transform:translateX(-65px) rotate(-3deg)}
  2397. 60%{-ms-transform:translateX(40px) rotate(2deg)}
  2398. 75%{-ms-transform:translateX(-20px) rotate(-1deg)}
  2399. 100%{-ms-transform:translateX(0)}
  2400. }
  2401. @keyframes wobble{
  2402. 0%{transform:translateX(0)}
  2403. 15%{transform:translateX(-100px) rotate(-5deg)}
  2404. 30%{transform:translateX(80px) rotate(3deg)}
  2405. 45%{transform:translateX(-65px) rotate(-3deg)}
  2406. 60%{transform:translateX(40px) rotate(2deg)}
  2407. 75%{transform:translateX(-20px) rotate(-1deg)}
  2408. 100%{transform:translateX(0)}
  2409. }
  2410. /* 震铃 */
  2411. @-webkit-keyframes ring{
  2412. 0%{-webkit-transform:scale(1)}
  2413. 10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
  2414. 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
  2415. 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
  2416. 100%{-webkit-transform:scale(1) rotate(0)}
  2417. }
  2418. @-moz-keyframes ring{
  2419. 0%{-moz-transform:scale(1)}
  2420. 10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
  2421. 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
  2422. 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
  2423. 100%{-moz-transform:scale(1) rotate(0)}
  2424. }
  2425. @-ms-keyframes ring{
  2426. 0%{-ms-transform:scale(1)}
  2427. 10%,20%{-ms-transform:scale(0.9) rotate(-3deg)}
  2428. 30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg)}
  2429. 40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg)}
  2430. 100%{-ms-transform:scale(1) rotate(0)}
  2431. }
  2432. @keyframes ring{
  2433. 0%{transform:scale(1)}
  2434. 10%,20%{transform:scale(0.9) rotate(-3deg)}
  2435. 30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
  2436. 40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
  2437. 100%{transform:scale(1) rotate(0)}
  2438. }
  2439. /*4.1 按钮组
  2440. Name: mod_btn-group
  2441. Example:
  2442. <div class="btn-group">
  2443. <span class="btn btn-primary radius">左边按钮</span>
  2444. <span class="btn btn-default radius">中间按钮</span>
  2445. <span class="btn btn-default radius">中间按钮</span>
  2446. <span class="btn btn-default radius">右边按钮</span>
  2447. </div>
  2448. Explain:
  2449. */
  2450. .btn-group{ font-size:0}
  2451. .btn-group .btn{ margin-left:-1px}
  2452. .btn-group .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){ border-radius:0}
  2453. .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius: 0;border-top-right-radius: 0}
  2454. .btn-group > .btn:last-child:not(:first-child),.btn-group > .dropdown-toggle:not(:first-child) {border-bottom-left-radius: 0;border-top-left-radius: 0}
  2455. /*4.2.1 导航条
  2456. Name: mod_nav
  2457. Example:
  2458. <header class="navbar-wrapper">
  2459. <div class="navbar navbar-black navbar-fixed-top">
  2460. <div class="container cl">
  2461. <a class="logo navbar-logo f-l mr-10 hidden-xs" href="/aboutHui.shtml">H-ui前端框架</a>
  2462. <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/aboutHui.shtml">H-ui</a>
  2463. <span class="logo navbar-slogan f-l mr-10 hidden-xs">简单 &middot; 免费 &middot; 适合中国网站</span>
  2464. <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
  2465. <nav class="nav navbar-nav">
  2466. <ul class="cl">
  2467. <li class="current"><a href="/">首页</a></li>
  2468. <li><a href="#">核心</a></li>
  2469. <li><a href="#">扩展</a></li>
  2470. <li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">一级导航 <i class="Hui-iconfont">&#xe6d5;</i></a>
  2471. <ul class="dropDown-menu menu radius box-shadow">
  2472. <li><a href="#">二级导航</a></li>
  2473. <li><a href="#">二级导航<i class="arrow Hui-iconfont">&#xe6d7;</i></a></li>
  2474. <li><a href="#">二级导航</a></li>
  2475. <li class="disabled"><a href="javascript:;">二级菜单</a></li>
  2476. </ul>
  2477. </li>
  2478. <li><a href="#">联系我们</a></li>
  2479. </ul>
  2480. </nav>
  2481. <nav class="navbar-userbar hidden-xs">
  2482. </nav>
  2483. </div>
  2484. </div>
  2485. </header>
  2486. Explain: 鼠标经过状态a:hover,当前选中状态li:current。
  2487. */
  2488. /*导航条*/
  2489. .navbar-wrapper{ height: 45px;}
  2490. .navbar{ position:relative; z-index:1030; background-color: #fff}
  2491. .navbar-black{ background-color: #222}
  2492. .navbar-fixed-top{ position:fixed; top:0;left: 0; right: 0; z-index:1030}
  2493. /*logo*/
  2494. .logo{ display:inline-block; text-decoration:none; cursor:pointer; background-repeat: no-repeat; background-position: left center; background-size: auto 100%}
  2495. a.logo:hover{ text-decoration:none}
  2496. .navbar .logo{height: 44px;line-height: 44px;margin-right: 10px;float: left;}
  2497. .navbar-logo,.navbar-logo-m{font-size: 16px}
  2498. .navbar-slogan{ font-size:12px; cursor: default}
  2499. .navbar .container{ position:relative;}
  2500. .navbar-userbar{position:absolute;top:0px; right:15px}
  2501. .navbar .container .navbar-userbar{ right:0px}
  2502. /*导航*/
  2503. .nav{ z-index:1}
  2504. .nav > ul{ font-size:0; line-height:0}
  2505. .nav > ul > li{ position:relative}
  2506. .nav > ul > li,.nav > ul > li > a{ display:inline-block;text-align:center;}
  2507. .nav > ul > li > a{ padding:0 20px}
  2508. .nav > ul > li > a:hover,.nav > ul > li.current > a{background-color:rgba(255,255,255,0.2); text-decoration:none;
  2509. -webkit-transition: background-color 0.3s ease 0s;
  2510. -moz-transition: background-color 0.3s ease 0s;
  2511. -o-transition: background-color 0.3s ease 0s;
  2512. -ms-transition: background-color 0.3s ease 0s;
  2513. transition: background-color 0.3s ease 0s
  2514. }
  2515. .navbar-nav > ul > li,.navbar-nav > ul > li > a{height:44px; line-height:44px;font-size:14px}
  2516. @media (max-width: 767px) {
  2517. .navbar-wrapper{ height: 45px!important}
  2518. .logo{ margin-right: 0}
  2519. .navbar .logo{height: 44px!important;line-height: 44px!important;}
  2520. .navbar-nav{display: none; float: none!important}
  2521. .navbar-nav > ul > li{ width: 100%; text-align: left; border-bottom: solid 1px #eee}
  2522. .navbar-nav > ul > li > a{display:block;padding:0 15px; text-align: left}
  2523. .navbar-nav > ul > li.dropDown.open > .dropDown-menu{ display: none;}
  2524. .navbar-nav > ul > li.dropDown > .dropDown_A > .Hui-iconfont{ display: none;}
  2525. .navbar-nav > ul > li,.navbar-nav > ul > li > a{height: 44px!important;line-height: 44px!important;}
  2526. .nav-collapse ul,.nav-collapse li {width: 100%;display: block;}
  2527. .js .nav-collapse {position: absolute;display: block;float:none; clear:both;max-height: 0;clip: rect(0 0 0 0);margin-left: -15px; margin-right: -15px;overflow: hidden;zoom: 1;
  2528. -webkt-transition:max-height 284ms ease 0s;
  2529. -moz-transition:max-height 284ms ease 0s;
  2530. -o-transition:max-height 284ms ease 0s;
  2531. -ms-transition:max-height 284ms ease 0s;
  2532. transition:max-height 284ms ease 0s;
  2533. }
  2534. .js-nav-active .nav-collapse.closed {max-height: none}
  2535. .nav-collapse.opened {max-height: 9999px}
  2536. }
  2537. /*导航条风格-黑色*/
  2538. .navbar-black{background-color:#222;border-bottom:#080808 1px solid;-moz-box-shadow: 0 0 4px #333333;-webkit-box-shadow: 0 0 4px #333333;box-shadow: 0 0 4px #333333}
  2539. .navbar-black .logo{ color: #fff }
  2540. .navbar-black .navbar-logo-m{color: #eee}
  2541. .navbar-black .navbar-nav > ul > li,
  2542. .navbar-black .navbar-nav > ul > li > a{ color:#fff}
  2543. .navbar-black .navbar-nav > ul > li > a:hover,
  2544. .navbar-black .navbar-nav > ul > li.current > a{color:#fff;}
  2545. .navbar-black .navbar-userbar{ color: #fff}
  2546. @media (max-width: 767px) {
  2547. .navbar-black .navbar-nav > ul > li{border-bottom: solid 1px #222;}
  2548. .navbar-black .navbar-nav > ul > li > a:hover,
  2549. .navbar-black .navbar-nav > ul > li.current > a{ background: #777;}
  2550. }
  2551. /*面包导航*/
  2552. .nav-toggle,a.nav-toggle{position:absolute; top:0px; right:15px; font-size: 20px; color:#999; padding:6px 11px;background-color:rgba(0,0,0,0.5);color:#fff;-webkit-tap-highlight-color: rgba(0,0,0,0);
  2553. -webkit-touch-callout: none;
  2554. -webkit-user-select: none;
  2555. -moz-user-select: none;
  2556. -ms-user-select: none;
  2557. -o-user-select: none;
  2558. user-select: none;}
  2559. .nav-toggle:hover,a.nav-toggle:hover{ text-decoration: none; color:#fff}
  2560. /*2.1.9 版本之前的导航条代码*/
  2561. .mainnav{z-index:1;background-color:#222}/*导航条背景*/
  2562. .mainnav > ul{ font-size: 0; line-height: 0}
  2563. .mainnav > ul > li,.mainnav > ul > li > a{height:40px;line-height:40px}/*导航条高度*/
  2564. .mainnav > ul > li{display:inline-block;color:#fff;font-size:14px;font-weight:bold}/*设置字体*/
  2565. .mainnav > ul > li > a{display:inline-block;padding:0 20px;color:#fff;text-align:center}/*链接颜色*/
  2566. .mainnav > ul > li > a:hover,.mainnav > ul > li.current > a{color:#fff;text-decoration:none; background-color:#000;-webkit-transition: background-color 0.3s ease 0s; -moz-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s;transition: background-color 0.3s ease 0s}/*交互颜色*/
  2567. .Hui-nav-toggle,a.Hui-nav-toggle{position:absolute; top:0px; right:15px; font-size: 20px; color:#999; padding:6px 11px;background-color:rgba(0,0,0,0.5);color:#fff}
  2568. .Hui-nav-toggle:hover,a.Hui-nav-toggle:hover{ text-decoration: none; color:#fff}
  2569. @media (max-width: 767px) {
  2570. .mainnav > ul > li{font-size:1.125em}
  2571. }
  2572. @media (max-width: 480px) {
  2573. .mainnav > ul > li{text-align:center}
  2574. .mainnav > ul > li{width:20%}
  2575. .mainnav > ul > li > a{padding:0;padding:0;display:block}
  2576. }
  2577. /*4.2.2 面包屑导航
  2578. Name: mod_breadcrumb
  2579. Example:
  2580. <nav class="breadcrumb">
  2581. <div class="container">
  2582. <i class="Hui-iconfont">&#xe67f;</i> <a href="/" class="c-primary">首页</a><span class="c-gray en">&gt;</span><a href="#">组件</a><span class="c-gray en">&gt;</span><span class="c-gray">当前页面</span>
  2583. </div>
  2584. </nav>
  2585. */
  2586. .breadcrumb{border-bottom: 1px solid #E5E5E5;line-height: 39px; height:39px;overflow:hidden;padding: 0 15px}
  2587. .breadcrumb span{padding:0 5px}
  2588. @media (max-width: 767px) {
  2589. .breadcrumb > .container{ padding: 0}
  2590. }
  2591. /*4.2.3 翻页导航
  2592. Name: mod_pageNav
  2593. Example: <div class="pageNav" id="pageNav"></div>
  2594. Explain: 需要调用pagenav.cn.js
  2595. */
  2596. .pageNav{float:none;clear:both;font-size:0px;font-family:Arial,Helvetica,sans-serif;padding:18px 0px;text-align:center}
  2597. .pageNav span,.pageNav a,.pageNav b{font-size:14px;margin-right:5px;overflow:hidden;padding:3px 8px}
  2598. .pageNav a{border:1px solid #CCDBE4;cursor:pointer}
  2599. .pageNav b{color:#000}
  2600. .pageNav .mor{padding:3px;font-weight:bold}
  2601. /*4.2.4 顶部导航
  2602. Name: mod_topnav
  2603. Sample:
  2604. <div class="topnav"><div class="cl"><div class="l">您好,欢迎来到Hui!</div><div class="r"><span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addFavorite();">收藏本站</a></span><span class="pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a></span></div></div></div>
  2605. */
  2606. .topnav{height:30px;line-height:30px;background-color;#f7f7f7;border-bottom:1px solid #EBEBEB; font-size:12px}
  2607. .topbar{background-color: #ECECEC;border-bottom:1px solid #ddd}
  2608. .topbar a{margin-right:5px}
  2609. .r_nav{display:inline-block; color:#999}
  2610. /*4.2.5 向导
  2611. Name: mod_steps
  2612. Sample:
  2613. <div class="four steps">
  2614. <span class="step">第一步</span>
  2615. <span class="active step">第二步</span>
  2616. <span class="disabled step">第三步</span>
  2617. <span class="disabled step">第四步</span>
  2618. </div>
  2619. */
  2620. .steps,.step{display:inline-block;position:relative;padding:1em 2em 1em 3em;vertical-align:top;background-color:#FFF;color:#888;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
  2621. .step:after,.steps .step:after{position:absolute;z-index:2;content:'';top:0;right:-1.45em;border-bottom:1.5em solid transparent;border-left:1.5em solid #FFF;border-top:1.5em solid transparent;width:0;height:0}
  2622. .step,.steps .step,.steps .step:after{-webkit-transition:opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,box-shadow .1s ease}
  2623. .steps{cursor:pointer;display:inline-block;font-size:0;box-shadow:0 0 0 1px rgba(0,0,0,.1);line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-radius:.3125rem}
  2624. .steps .step:first-child{padding-left:1.35em;border-radius:.3125em 0 0 .3125em}
  2625. .steps .step:last-child{border-radius:0 .3125em .3125em 0}
  2626. .steps .step:only-child{border-radius:.3125em}
  2627. .steps .step:last-child{margin-right:0}
  2628. .steps .step:last-child:after{display:none}
  2629. .step:hover,.step.hover{background-color:#F7F7F7;color:rgba(0,0,0,.8)}
  2630. .steps .step.hover:after,.steps .step:hover:after,.step:hover,.step.hover::after{border-left-color:#F7F7F7}
  2631. .steps .step.down,.steps .step:active,.step.down,.step:active{background-color:#F0F0F0}
  2632. .steps .step.down:after,.steps .step:active:after,.steps.down::after,.steps:active::after{border-left-color:#F0F0F0}
  2633. .steps .step.active,.active.step{cursor:auto;background-color:#428BCA;color:#FFF;font-weight:700}.steps .step.active:after,.active.steps:after{border-left-color:#428BCA}
  2634. .steps .disabled.step,.disabled.step{cursor:auto;background-color:#FFF;color:#CBCBCB}
  2635. .disabled.step:after{border:0;background-color:#FFF;top:.42em;right:-1em;width:2.15em;height:2.15em;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);box-shadow:-1px -1px 0 0 rgba(0,0,0,.1) inset}
  2636. .attached.steps{margin:0;border-radius:.3125em .3125em 0 0}
  2637. .attached.steps .step:first-child{border-radius:.3125em 0 0}
  2638. .attached.steps .step:last-child{border-radius:0 .3125em 0 0}
  2639. .bottom.attached.steps{margin-top:-1px;border-radius:0 0 .3125em .3125em}
  2640. .bottom.attached.steps .step:first-child{border-radius:0 0 0 .3125em}
  2641. .bottom.attached.steps .step:last-child{border-radius:0 0 .3125em}
  2642. /*向导数量*/
  2643. .one.steps,.two.steps,.three.steps,.four.steps,.five.steps,.six.steps,.seven.steps,.eight.steps{display:block}
  2644. .one.steps > .step{width:100%}
  2645. .two.steps > .step{width:50%}
  2646. .three.steps > .step{width:33.333%}
  2647. .four.steps > .step{width:25%}
  2648. .five.steps > .step{width:20%}
  2649. .six.steps > .step{width:16.666%}
  2650. .seven.steps > .step{width:14.285%}
  2651. .eight.steps > .step{width:12.5%}
  2652. /*向导尺寸*/
  2653. .small.step,.small.steps .step{font-size:.8rem}/*小*/
  2654. .step,.steps .step{font-size:1rem}/*默认*/
  2655. .large.step,.large.steps .step{font-size:1.25rem}/*大*/
  2656. /*兼容写法
  2657. Sample:
  2658. <div class="steps-ie cl">
  2659. <a class="step-ie active" href="#">第一步<em class="arrow"></em></a>
  2660. <a class="step-ie" href="#">第二步<em class="arrow"></em></a>
  2661. <a class="step-ie" href="#">第三步<em class="arrow"></em></a>
  2662. </div>
  2663. */
  2664. .steps-ie,.step-ie,.step-ie .arrow{height:44px; line-height:44px}
  2665. .steps-ie{background-color:#eaf4fd; border:solid 1px #afcfcc}
  2666. .step-ie{position:relative;display:inline-block; float:left; cursor:pointer; padding:0 20px 0 40px; background:url(../images/step_bg.png) repeat-x 0 center}
  2667. .step-ie .arrow{position:absolute;right:-21px; top:0; width:21px; height:44px; display:block; cursor:pointer; background:url(../images/step_arrow.png) no-repeat 0 center;z-index:50}
  2668. .step-ie.active{background-image:url(../images/step_bg-active.png); color:#fff; z-index:100}
  2669. .step-ie.active .arrow{background-image:url(../images/step_arrow-active.png)}
  2670. /*4.2.6 竖向导向tab导航
  2671. Sample:
  2672. <div class="verticalTab">
  2673. <a class="" href="#">导航一<em></em></a>
  2674. <a class="active" href="#">导航二<em></em></a>
  2675. <a href="#">导航三<em></em></a>
  2676. <a href="#">导航四<em></em></a>
  2677. </div>
  2678. */
  2679. .verticalTab{background:#fff url(../images/tab_bg.png) repeat-y 0 0; width:38px}
  2680. .verticalTab a{position:relative; display:block; width:18px; height:auto; text-align:center; position:relative; padding:26px 10px 6px 10px; background:url(../images/tabNav.png) no-repeat 0 0}
  2681. .verticalTab a em{position:absolute; left:0; bottom:-20px; width:38px; height:20px; background:url(../images/tabNav_right.png) no-repeat 0 0; z-index:50}
  2682. .verticalTab a.active{background-image:url(../images/tabNav-active.png); color:#fff; z-index:99}
  2683. .verticalTab a.active em{background-image:url(../images/tabNav_right-active.png)}
  2684. /*4.2.6 横向导向tab导航
  2685. Sample:
  2686. <ul class="acrossTab">
  2687. <li>导航一<i></i><em></em></li>
  2688. <li class="active">导航二<i></i><em></em></li>
  2689. <li>导航三<i></i><em></em></li>
  2690. </ul>
  2691. */
  2692. .acrossTab{height:29px; background:url(../images/acrossTab-bg.png) repeat-x 0 0; padding-top:1px}
  2693. .acrossTab li,.acrossTab li em{background:url(../images/acrossTab.png) no-repeat 0 0}
  2694. .acrossTab li{position:relative;float:left; display:inline-block; height:29px; line-height:29px; font-size:12px;cursor:pointer;padding:0 30px; white-space:nowrap;color:#282828; background-position:0 0}
  2695. .acrossTab li em{position:absolute; width:23px;height:29px;right:-20px; top:0;z-index:50; background-position:right -30px}
  2696. .acrossTab li:hover{background-position:0 -60px}
  2697. .acrossTab li:hover em{background-position:right -90px}
  2698. .acrossTab li.active{background-position:0 -120px; z-index:99}
  2699. .acrossTab li.active em{background-position:right -150px}
  2700. .acrossTab li i{position:absolute; display:block; width:13px; height:13px; top:50%; margin-top:-6px; right:5px; font-size:0; line-height:0; cursor:pointer; background:url(../images/acrossTab-close.png) no-repeat 0 0}
  2701. .acrossTab li i:hover{background-position:0 bottom}
  2702. /*4.3 下拉菜单
  2703. Name: mod_dropDown
  2704. Example:
  2705. <span class="dropDown">
  2706. <a class="dropDown_A" href="#">下拉菜单</a>
  2707. <ul class="dropDown-menu menu radius box-shadow">
  2708. <li><a href="#">菜单一</a></li>
  2709. <li><a href="#">菜单二</a></li>
  2710. </ul>
  2711. </span>
  2712. Explain: 如需要在不同的地方显示不同的样式,请在<span class="dropDown"> 追加class,采用覆盖的方式重写默认样式。
  2713. */
  2714. .dropDown{display:inline-block}
  2715. .dropDown_A{display:inline-block}
  2716. .dropDown-menu{ display:none;transition: all 0.3s ease 0s}
  2717. .dropDown:focus,.dropDown-menu:focus {outline:0}
  2718. .dropDown-menu li.arrow{ position:absolute;display:block; width:12px; height:8px; margin-top:-13px; margin-left:20%; line-height:0;background:url(../images/icon-jt.png) no-repeat 0 0}
  2719. /*鼠标经过*/
  2720. .dropDown.hover .dropDown_A,.dropDown.open .dropDown_A{text-decoration:none;background-color:rgba(255,255,255,0.2)}
  2721. .dropDown.open .dropDown_A .menu_dropdown-arrow{transition-duration:0.3s ;transition-property:all;_background-position:0 0}
  2722. .dropDown.open .dropDown_A .menu_dropdown-arrow{transform: rotate(180deg)}
  2723. .menu{background-color:#fff;border:solid 1px #f2f2f2; display: inline-block}
  2724. .menu.radius{border-top-left-radius:0;border-top-right-radius:0}
  2725. .menu.box-shadow{border-top:none}
  2726. .menu > li{ position: relative; float: none;display:block}
  2727. .menu > li > a{ display: block;clear: both;border-bottom:solid 1px #f2f2f2;padding:6px 20px;text-align:left;line-height:1.5;font-weight: normal;white-space:nowrap}
  2728. .menu > li:last-child > a{ border-bottom:none}
  2729. .menu > li > a:hover,.menu > li > a:focus,.menu > li.open > a{ text-decoration:none;background-color:#fafafa}
  2730. .menu > li > a .arrow{ position:absolute; top:50%; margin-top:-10px; right:5px;line-height: 20px; height: 20px; color: #999}
  2731. .menu > li > .menu{ display: none}
  2732. .menu > li.open > .menu{ display: inline-block;position: absolute; left:100%;top:-1px;min-width:100%}
  2733. /*禁用菜单*/
  2734. .menu > li.disabled > a{color:#999;text-decoration:none; cursor:no-drop; background-color:transparent}
  2735. /*线条*/
  2736. .menu > li.divider{ display:block;height:0px; line-height:0px;margin:9px 0;overflow:hidden; border-top:solid 1px #eee}
  2737. /*打开菜单*/
  2738. .dropDown > .dropDown-menu{ display: none}
  2739. .dropDown.open{position:relative;z-index:990}
  2740. /*默认左对齐*/
  2741. .dropDown.open > .dropDown-menu{position:absolute;z-index:1000;display:inline-block;top:100%;left:-1px;min-width:100%;background-color:#fff;border:solid 1px #f2f2f2}
  2742. /*右对齐*/
  2743. .dropDown.open.right > .dropDown-menu{right:-1px!important;left:auto!important}
  2744. /*4.4 幻灯片
  2745. Name: module_slider
  2746. Sample:
  2747. <div id="slider-1">
  2748. <div class="slider cl">
  2749. <!--<a href="javascript:void(0)" class="slider-arrow prev"></a>
  2750. <a href="javascript:void(0)" class="slider-arrow next"></a>-->
  2751. <div class="bd">
  2752. <ul>
  2753. <li><a href="#" target="_blank"><img name="" src="pic/1.png" width="300" height="150" alt=""></a></li>
  2754. <li><a href="#" target="_blank"><img name="" src="pic/2.png" width="300" height="150" alt=""></a></li>
  2755. <li><a href="#" target="_blank"><img name="" src="pic/3.png" width="300" height="150" alt=""></a></li>
  2756. </ul>
  2757. </div>
  2758. <ol class="hd dots">
  2759. <li></li>
  2760. <li></li>
  2761. <li></li>
  2762. </ol>
  2763. </div>
  2764. </div>
  2765. <script type="text/javascript" src="lib/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
  2766. <script type="text/javascript">
  2767. $(function() {
  2768. });
  2769. </script>
  2770. Explain: 默认dots为圆点,在slider后面追加numSlider样式就变成带数字的方框,boxSlider为不带数字长方条
  2771. */
  2772. .slider{position:relative;text-align:center; margin:0 auto;z-index:1}
  2773. .slider .bd,.slider .bd li,.slider .bd img{width:100%; height:100%}/*请给每个幻灯片套个div并设置id,通过id重置这个地方的宽度,达到自定义效果*/
  2774. .slider .bd{z-index:2;overflow:hidden}
  2775. .slider .bd li{float:left;width: 100%;overflow:hidden; background-position:center; background-repeat:no-repeat}
  2776. .slider .bd li a{ display:block; width: 100%; height: 100%}
  2777. .slider .bd li img{display:block}
  2778. .slider .hd{ position: absolute; z-index: 3; left: 0; right: 0; bottom:10px; padding: 0 10px; text-align: center}
  2779. .slider .hd li{display:inline-block;text-align:center;margin-right:10px;cursor:pointer;background-color:#C2C2C2}
  2780. .slider .hd li.active{background-color:#222}
  2781. /*圆点*/
  2782. .dots li{width:10px; height:10px;font-size:0px;line-height:0px;border-radius:50%}
  2783. /*数字*/
  2784. .numbox li{width:20px; height:20px; line-height:20px; font-size:13px;font-family:Arial;font-weight:bold; text-indent:inherit}
  2785. .numbox li.active{color:#fff}
  2786. /*长方条*/
  2787. .rectangle li{width:40px; height:10px;font-size:0px;line-height:0px}
  2788. .slider-arrow{display:block; position:absolute; top:50%; margin-top:-25px;height: 50px;width: 50px; line-height: 50px; text-align: center; z-index:3;opacity: 0.7;filter: alpha(opacity=70)}
  2789. .slider-arrow:hover{opacity: 1;filter: alpha(opacity=100)}
  2790. .slider-arrow.prev{left:0px}
  2791. .slider-arrow.next{right:0px}
  2792. /*4.5 选项卡
  2793. Name: module_slider
  2794. Sample:
  2795. <div id="tab_demo" class="HuiTab">
  2796. <div class="tabBar cl"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
  2797. <div class="tabCon">内容一</div>
  2798. <div class="tabCon">内容二</div>
  2799. <div class="tabCon">内容三</div>
  2800. </div>
  2801. */
  2802. .tabBar {border-bottom: 2px solid #222}
  2803. .tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;
  2804. font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px}
  2805. .tabBar span.current{background-color: #222;color: #fff}
  2806. .tabCon {display: none}
  2807. /*4.6 标签与标号
  2808. Name: style_label
  2809. Example: <span class="label label-default|label-primary|label-secondary|label-success|label-warning|label-danger">默认</span>
  2810. Explain: .label-default 默认|.label-primary 主要|.label-secondary 次要|.label-success 成功|.label-warning 警告|.label-danger 危险
  2811. Name: style_badge
  2812. Example: <span class="badge badge-default|label-primary|badge-secondary|badge-success|badge-warning|badge-danger">默认</span>
  2813. Explain: .badge-default 默认|.badge-primary 主要|.badge-secondary 次要|.badge-success 成功|.badge-warning 警告|.badge-danger 危险
  2814. */
  2815. .label, .badge{display: inline-block;padding:2px 4px;font-size: 11.844px;font-weight: bold;line-height:14px;color: #fff;white-space: nowrap;vertical-align:middle;background-color: #999; overflow: hidden}
  2816. /*圆角*/
  2817. .label.radius{border-radius: 3px}
  2818. .badge{padding-right:9px;padding-left:9px;border-radius:9px}
  2819. .label:empty, .badge:empty{display: none}
  2820. a.label:hover, a.label:focus, a.badge:hover, a.badge:focus{color: #fff;text-decoration: none;cursor: pointer}
  2821. /*默认*/
  2822. .label-default, .badge-default{background-color: #e6e6e6; color:#333}
  2823. .label-default[href], .badge-default[href]{background-color: #e6e6e6;color:#333}
  2824. /*主要*/
  2825. .label-primary, .badge-primary{background-color: #5a98de}
  2826. .label-primary[href], .badge-primary[href]{background-color: #5a98de}
  2827. /*主要*/
  2828. .label-secondary, .badge-secondary{background-color: #3bb4f2}
  2829. .label-secondary[href], .badge-secondary[href]{background-color: #3bb4f2}
  2830. /*成功*/
  2831. .label-success, .badge-success{background-color:#5eb95e}
  2832. .label-success[href], .badge-success[href]{background-color: #5eb95e}
  2833. /*警告*/
  2834. .label-warning, .badge-warning{background-color: #f37b1d}
  2835. .label-warning[href], .badge-warning[href]{background-color: #f37b1d}
  2836. /*危险*/
  2837. .label-danger, .badge-danger{background-color: #dd514c}
  2838. .label-danger[href], .badge-danger[href]{background-color: #dd514c}
  2839. /*4.7 缩略图
  2840. Name: style_img
  2841. Example:
  2842. Explain: 缩略图 删除,转移到3.6 图片中
  2843. */
  2844. /*4.8 警告
  2845. Name: mod_Hui-alert
  2846. Example:
  2847. <div class="Huialert Huialert-success/Huialert-danger/Huialert-error/Huialert-info/Huialert-block"><i class="Hui-iconfont">&#xe6a6;</i>警告内容<ul><li>……</li></ul></div>
  2848. Explain: 警告,使用警告框jQuery插件
  2849. */
  2850. .Huialert{position:relative;padding:8px 35px 8px 14px;margin-bottom: 20px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);background-color: #fcf8e3;border: 1px solid #fbeed5}
  2851. .Huialert, .Huialert h4{color: #c09853}
  2852. .Huialert h4{margin: 0}
  2853. .Huialert .Hui-iconfont{position:absolute;top:9px;right:10px;line-height: 20px;cursor:pointer; color:#000; opacity:0.2;_color:#666}
  2854. .Huialert .Hui-iconfont.hover{color:#000;opacity:0.8}
  2855. .Huialert-success{color: #468847;background-color: #dff0d8;border-color: #d6e9c6}
  2856. .Huialert-success h4{color: #468847}
  2857. .Huialert-danger{color: #b94a48;background-color: #f2dede;border-color: #eed3d7}
  2858. .Huialert-danger h4{color: #b94a48}
  2859. .Huialert-error{color: #fff;background-color: #f37b1d;border-color: #e56c0c}
  2860. .Huialert-error h4{color: #fff}
  2861. .Huialert-info{color: #31708f;background-color: #d9edf7;border-color: #bce8f1}
  2862. .Huialert-info h4{color:#31708f}
  2863. .Huialert-block{padding-top: 14px;padding-bottom: 14px}
  2864. .Huialert-block > p, .Huialert-block > ul{margin-bottom: 0}
  2865. .Huialert-block p + p{margin-top: 5px}
  2866. /*4.9 进度条 loading
  2867. Name: mod_progress
  2868. Example:
  2869. <div class="progress radius"><div class="progress-bar"><span class="sr-only"></span></div></div>
  2870. Explain: 警告,使用警告框jQuery插件
  2871. */
  2872. .progress,.progress-bar,.sr-only{height:10px; font-size:0;line-height:0}
  2873. .progress{overflow:hidden; width:400px}
  2874. .progress.radius{}/*自定义圆角*/
  2875. .progress-bar{width:100%;background-color:#efefef}
  2876. .sr-only{display:inline-block; background-color:#58b957}
  2877. /*4.10 对话框
  2878. Name: mod_modal
  2879. Example:
  2880. */
  2881. .loading{height: 50px; background: url(../images/loading_072.gif) no-repeat center}
  2882. .mask{position:fixed;top:0;left:0;z-index:999;width:100%;height:100%;background-color:rgba(0,0,0,0.7);-moz-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in}
  2883. * html .mask{position:absolute;left:expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight)}
  2884. /*Huimodal*/
  2885. .modal-open{overflow:hidden}/*当弹出层出现时,隐藏body右侧滚动条*/
  2886. .page-overflow{margin-right:16px}/*隐藏body滚动条时,页面偏移*/
  2887. .modal-scrollable{position:fixed;top:0;right:0;bottom:0;left:0;overflow: auto}/*弹出层的最外层,全屏,用户响应点击和滚动*/
  2888. .modal-overflow .modal-scrollable{overflow-y:scroll}/*弹窗超出屏幕高度时,弹出层替代body右侧滚动条,实现弹出层的整体滚动*/
  2889. .modal-backdrop {position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1040;background-color:#000}/*默认遮罩层,全屏黑色*/
  2890. * html .modal-backdrop{position:absolute;left:expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight)}/*解决IE下 遮罩层兼容性*/
  2891. .modal-backdrop.fade {opacity:0;filter: alpha(opacity=0)}/*遮罩层失去时,透明度为0*/
  2892. .modal-backdrop,.modal-backdrop.fade.in {opacity: 0.7;filter: alpha(opacity=70)}/*遮罩层进入 0.7透明度*/
  2893. .modal {position:absolute;top:50%;left:50%; width:500px;margin-left:-250px;z-index:1050;overflow: visible;background-color: #fff;background-clip: padding-box;
  2894. box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  2895. -webkit-background-clip:padding-box;
  2896. -khtml-background-clip:padding-box;
  2897. -moz-background-clip:padding-box;
  2898. -ms-background-clip:padding-box;
  2899. -o-background-clip:padding-box;
  2900. background-clip:padding-box;
  2901. border-radius:6px;
  2902. border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999}/*弹出层,绝对定位,默认【宽度500px,高度自适应,背景白色,6px圆角,带阴影】,自定义宽度可在data-width中设置参数*/
  2903. .fade {opacity: 0;filter: alpha(opacity=0);
  2904. -webkit-transition: opacity 0.2s linear;
  2905. -moz-transition: opacity 0.2s linear;
  2906. -o-transition: opacity 0.2s linear;
  2907. transition: opacity 0.2s linear}
  2908. .fade.in {opacity: 1;filter: alpha(opacity=100)}
  2909. .modal.fade {top: -100%}/*弹出层进入动画效果*/
  2910. .modal.fade.in{top:50%}/*弹出层进入后居顶距离,配合margin-top负值,实现上下自动居中*/
  2911. .modal.modal-overflow.fade.in{top:0px}/*如果弹出层高度大于窗口,弹出窗口距顶0像素*/
  2912. .loading-spinner {position: absolute;top: 50%;left: 50%;margin: -12px 0 0 -12px}/*Ajax加载数据时loading*/
  2913. /*弹出层header区*/
  2914. .modal-header {padding: 9px 15px;border-bottom: 1px solid #eee; position:relative}/*弹出层头部*/
  2915. .modal-header .close{position:absolute; right:10px; top:10px}/*关闭按钮,请调用4.1.1 按钮 .close*/
  2916. .modal-header h3{margin:0}/*标题*/
  2917. .modal-body {overflow-y:visible;padding: 15px; word-break:break-all} /*内容不限高度,内填充15px,不满意可自行修改*/
  2918. .modal-form {margin-bottom: 0} /*弹出层表单*/
  2919. /*弹出层footer区,放按钮*/
  2920. .modal-footer {padding: 14px 15px 15px;margin-bottom: 0;text-align: right;background-color: #f5f5f5;border-top: 1px solid #ddd;*zoom: 1;border-radius: 0 0 6px 6px;box-shadow: inset 0 1px 0 #fff}
  2921. .modal-footer:before,.modal-footer:after {display: table;content: ""}
  2922. .modal-footer:after {clear: both}
  2923. .modal-footer .btn + .btn {margin-left: 5px;margin-bottom: 0}
  2924. .modal-footer .btn-group .btn + .btn {margin-left: -1px}
  2925. .modal-alert{position:fixed; width:300px;margin-left:-150px; margin-top:-30px; z-index:9999}
  2926. .modal-alert-info{padding:30px; text-align:center; font-size:14px; background-color:#fff}
  2927. .mask_box{background-image:none;display:none;z-index:99}
  2928. .hover .mask_box{position:absolute;bottom:0px; left:0px;display:block;background:url(../images/backdrop.png) repeat 0 0;text-align:left}
  2929. .easyDialog_wrapper{width:320px; color:#444; border:3px solid rgba(0,0,0,0);border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.4); display:none}
  2930. .easyDialog_wrapper .easyDialog_content{border-radius:4px; background:#fff; border:1px solid #e5e5e5}
  2931. .easyDialog_wrapper .easyDialog_title{height:30px; line-height:30px; overflow:hidden; color:#666; padding:0 10px; font-size:14px; border-bottom:1px solid #e5e5e5; background:#f7f7f7; border-radius:4px 4px 0 0; margin:0 }
  2932. .easyDialog_wrapper .close_btn{font-family:arial; font-size:18px; _font-size:12px; font-weight:700; color:#999; text-decoration:none; float:right}
  2933. .easyDialog_wrapper .close_btn:hover{color:#333}
  2934. .easyDialog_wrapper .easyDialog_text{padding:25px 10px; font-size:13px; line-height:22px}
  2935. .easyDialog_wrapper .easyDialog_footer{padding:10px; text-align:right; *zoom:1}
  2936. .easyDialog_wrapper .easyDialog_footer:after{content:''; display:block; height:0; overflow:hidden; visibility:hidden; clear:both}
  2937. .easyDialog_wrapper .btn_highlight,.easyDialog_wrapper .btn_normal{border:1px solid; border-radius:2px; cursor:pointer;float:right; font-size:12px; padding:0 12px; height:24px; line-height:24px; margin-bottom:10px}
  2938. .easyDialog_wrapper .btn_highlight{background:#4787ed; background:-webkit-gradient(linear,center bottom,center top,from(#4787ed),to(#4d90fe)); background:-moz-linear-gradient(90deg, #4787ed, #4d90fe); border-color:#3079ed; color:#fff}
  2939. .easyDialog_wrapper .btn_normal{margin-left:10px; border-color:#c3c3c3; background:#ececec; color:#333; background:-webkit-gradient(linear,center bottom,center top,from(#ececec),to(#f4f4f4)); background:-moz-linear-gradient(90deg,#ececec,#f4f4f4)}
  2940. .modal-open .dropdown-menu {z-index: 2050}
  2941. .modal-open .dropdown.open {*z-index: 2050}
  2942. .modal-open .popover {z-index: 2060}
  2943. .modal-open .tooltip {z-index: 2070}
  2944. /*4.12 返回顶部
  2945. Name: mod_totop
  2946. Level: Global
  2947. Example: <a href="javascript:void(0)" class="toTop" title=backToTopTxt alt=backToTopTxt></a>
  2948. Explain: 返回顶部
  2949. */
  2950. .toTop{position:fixed;bottom:60px;right:15px; z-index:999;display:none;cursor: pointer;overflow:hidden;visibility:visible; background-color:#fff;border: 1px solid #d9d9d9;color: #9c9c9c;font-size: 16px;width: 38px;height: 38px;line-height: 38px;text-align: center; text-decoration:none;_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight)}
  2951. .toTop:hover{ color:#fff; text-decoration:none; background-color:#999; border-color:#999}
  2952. /*4.13 分享到
  2953. Name: mod_share
  2954. Example:
  2955. Explain: 分享到
  2956. */
  2957. /*4.13.1 百度分享*/
  2958. .bdsharebuttonbox.Hui-share a.bds_more,
  2959. .bdsharebuttonbox.Hui-share a.bds_weixin,
  2960. .bdsharebuttonbox.Hui-share a.bds_qzone,
  2961. .bdsharebuttonbox.Hui-share a.bds_sqq,
  2962. .bdsharebuttonbox.Hui-share a.bds_tsina,
  2963. .bdsharebuttonbox.Hui-share a.bds_tqq,
  2964. .bdsharebuttonbox.Hui-share a.bds_douban{ display:inline-block; background:none;padding-left:0; text-decoration:none; margin:0; margin-right:6px; height:auto; line-height:auto}
  2965. .bdsharebuttonbox.Hui-share a:hover{ text-decoration:none}
  2966. .bdsharebuttonbox.Hui-share .share-text{ display:inline-block; margin-right:6px; color:#999; cursor:default;float:left}
  2967. .bdsharebuttonbox.bdshare-button-style0-16.Hui-share a,
  2968. .bdsharebuttonbox.bdshare-button-style0-16.Hui-share .share-text,
  2969. .bdsharebuttonbox.bdshare-button-style0-16.Hui-share .Hui-iconfont{line-height:16px}
  2970. .bdsharebuttonbox.bdshare-button-style0-16.Hui-share .share-text,
  2971. .bdsharebuttonbox.bdshare-button-style0-16.Hui-share .Hui-iconfont{font-size:16px}
  2972. .bdsharebuttonbox.bdshare-button-style0-24.Hui-share a,
  2973. .bdsharebuttonbox.bdshare-button-style0-24.Hui-share .share-text,
  2974. .bdsharebuttonbox.bdshare-button-style0-24.Hui-share .Hui-iconfont{line-height:24px}
  2975. .bdsharebuttonbox.bdshare-button-style0-24.Hui-share .share-text,
  2976. .bdsharebuttonbox.bdshare-button-style0-24.Hui-share .Hui-iconfont{font-size:24px}
  2977. /*4.13.2 jiathis分享*/
  2978. .Hui-share.jiathis_style_24x24 .jtico{ background:none; padding-left:0!important}
  2979. .Hui-share.jiathis_style_24x24 .jiathis_separator{ margin-left:0; margin-right:6px}
  2980. /*4.14 Panel 面板
  2981. Name: mod_panel
  2982. Sample:
  2983. <div class="panel panel-default">
  2984. <div class="panel-body">默认面板</div>
  2985. </div>
  2986. */
  2987. .panel{ background-color:#fff; border:solid 1px transparent}
  2988. .panel-header{ border-bottom:solid 1px transparent; padding:8px 15px; font-size:14px; font-weight:700}/*面板标题*/
  2989. .panel-body{ padding:15px}/*面板内容*/
  2990. .panel-footer{background-color: #f5f5f5;border-top: 1px solid #ddd;padding:5px 20px}/*面板页脚*/
  2991. /*默认面板*/
  2992. .panel-default{border-color:#ddd}
  2993. .panel-default > .panel-header{ border-color:#ddd; background-color:#f5f5f5; color:#444}
  2994. /*主要面板*/
  2995. .panel-primary{border-color:#5a98de}
  2996. .panel-primary > .panel-header{ border-color:#5a98de; background-color:#5a98de; color:#fff}
  2997. /*次要面板*/
  2998. .panel-secondary{border-color:#3bb4f2}
  2999. .panel-secondary > .panel-header{ border-color:#3bb4f2; background-color:#3bb4f2; color:#fff}
  3000. /*成功面板*/
  3001. .panel-success{border-color:#5eb95e}
  3002. .panel-success > .panel-header{ border-color:#5eb95e; background-color:#5eb95e; color:#fff}
  3003. /*警告面板*/
  3004. .panel-warning{border-color:#f37b1d}
  3005. .panel-warning > .panel-header{ border-color:#f37b1d; background-color:#f37b1d; color:#fff}
  3006. /*危险面板*/
  3007. .panel-danger{border-color:#dd514c}
  3008. .panel-danger > .panel-header{ border-color:#dd514c; background-color:#dd514c; color:#fff}
  3009. /*4.15 案例
  3010. Name: mod_docs-example
  3011. Example: <div class="docs-example tooltip-demo">……</div>
  3012. */
  3013. .docs-example{position:relative;*position:static;*padding-top: 19px;margin: 15px 0;padding: 39px 19px 14px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px}
  3014. .docs-example:after{content: "Example";position: absolute;top: -1px;left: -1px;*position:static;padding: 3px 7px;font-size: 12px;font-weight: bold;background-color: #f5f5f5;border: 1px solid #ddd;color: #9da0a4;border-radius: 4px 0 4px 0}
  3015. /*4.16 滚动
  3016. Name: mod_rolling
  3017. Example: <div class="rollpicshow"><ul><li>……</li></ul></div>
  3018. */
  3019. .marquee{height:22px;overflow:hidden;line-height:22px}
  3020. .rollpic .prev,.rollpic .next{display:block; height:38px; width:38px; cursor:pointer; float:left; background:url(../images/unslider-arrow2.png) no-repeat 0 0; margin-top:70px}
  3021. .rollpic .prev{background-position:0 0; margin-right:5px}
  3022. .rollpic .prev:hover{background-position:0 -38px}
  3023. .rollpic .next{background-position:0 -76px;margin-left:5px}
  3024. .rollpic .next:hover{background-position:0 -114px}
  3025. .rollpicshow{float:left; border:solid 1px #ddd}
  3026. .rollpicshow li{padding:10px}
  3027. /*4.17 搜索条
  3028. Name: mod_searchBar
  3029. Sample:
  3030. <div class="searchBar">
  3031. <form class="form-search" method="post" action="">
  3032. <input id="searchKeyword" name="searchKeyword" value="请输入搜索关键词" class="input-text searchTxt">
  3033. <input id="searchBtn" name="searchBtn" type="submit" value="搜索" class="btn btn-default searchBtn" onclick="b_onclick()">
  3034. </form>
  3035. </div>
  3036. */
  3037. /*搜索下拉提示*/
  3038. .ac_results{position:absolute;border:solid 1px #ddd;background-color:#fff; padding:3px; display:none; margin-top:-1px; z-index:999}
  3039. .ac_results ul{width:100%;list-style-position:outside;list-style:none;padding:0;margin:0}
  3040. .ac_results li{padding-left:5px;padding-right:5px;display:block;height:24px;line-height:24px;cursor:pointer}
  3041. .ac_results li p{ float:left;margin:0;padding:0;overflow:hidden}
  3042. .ac_results li p tt{color:#666}
  3043. .ac_results li span{margin:0;padding:0;display:inline;float:right;color:#f93;width:90px; text-align:right; overflow:hidden}
  3044. .ac_results li.ac_even{}
  3045. .ac_results li.ac_odd{}
  3046. .ac_results li.ac_over{background-color:#f0f1f2}
  3047. .ac_loading{background:#fff url(../images/loading_s.gif) right center no-repeat}
  3048. /*4.18.1 对联广告
  3049. Name: mod_AD_dual
  3050. Sample:
  3051. <div class="dual dual_l"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>
  3052. <div class="dual dual_r"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>
  3053. */
  3054. .AD{text-align:center}
  3055. .dual{top:260px;position:absolute; width:102px; overflow:hidden; display:none; z-index:100}
  3056. .dual_l{left:6px}
  3057. .dual_r{right:6px}
  3058. .dual_con{border:#CCC solid 1px;width:100px; height:300px; overflow:hidden; background-color:#0C9}
  3059. .dual_close{width:100%;height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555; text-decoration:none}
  3060. /*4.19 标签*/
  3061. /*4.19.1 标签输入效果
  3062. Name: mod_Hui-tags
  3063. Sample:
  3064. <div class="Hui-tags">
  3065. <div class="Hui-tags-editor cl"><i class="Hui-tags-icon"></i>
  3066. <span class="Hui-tags-token">Hui前端框架</span>
  3067. <span class="Hui-tags-token">CSS3</span>
  3068. <span class="Hui-tags-token">HTML5</span>
  3069. <div class="Hui-tags-iptwrap"><input type="text" class="Hui-tags-input" maxlength="20" value=""><label class="Hui-tags-label">添加相关标签,用空格或回车分隔</label></div>
  3070. </div>
  3071. <div class="Hui-tags-list">
  3072. <div class="Hui-notag">暂无常用标签</div>
  3073. <div class="Hui-tags-has"><span>前端框架</span> <span>前端开发</span> <span>H-ui</span></div>
  3074. </div>
  3075. <input type="hidden" class="Hui-tags-val" name="" value="">
  3076. </div>
  3077. */
  3078. .Hui-tags{border:solid 1px #dedede; padding:0 10px}
  3079. .Hui-tags-editor{position:relative; padding:10px 0 10px 24px}
  3080. .Hui-tags-editor .Hui-tags-icon{position:absolute; left:0; top:11px; font-size:14px; color:#666}
  3081. .Hui-tags-token{color:#aaa; float:left; font-size:12px; height:20px; line-height:20px; margin-right:8px; padding:0 1px; white-space:nowrap; cursor:pointer}
  3082. .Hui-tags-token:before{content:"#"}
  3083. .Hui-tags-token:hover{text-decoration:line-through}
  3084. .Hui-tags-iptwrap{position:relative; float:left}
  3085. .Hui-tags-input{position:relative;height:20px;min-width:60px; border:0 none; vertical-align:top;line-height:20px; color:#333;z-index:2;background: url(../images/empty.png) repeat scroll 0 0; display:inline-block; width:100%}
  3086. .Hui-tags-label{position:absolute; top:0; left:2px; width:240px; height:20px; line-height:20px; font-size:14px; overflow:hidden; z-index:1; color:#ccc}
  3087. .Hui-tags-list{padding:0 0 10px 0; display:none}
  3088. .Hui-notag{font-size:12px}
  3089. .Hui-tags-has span{cursor:pointer; font-size:12px; white-space:nowrap; margin-right:10px}
  3090. /*4.19.2 标签混排效果
  3091. Name: mod_tags
  3092. Sample: <div class="pd-10 tags"><a href="http://www.h-ui.net/">H-ui前端框架</a>……</div>
  3093. */
  3094. .tags a{height:26px; line-height:26px;padding-right:6px}
  3095. .tags0{}
  3096. .tags1{color:#C00; font-size:24px}
  3097. .tags2{color:#030; font-size:16px}
  3098. .tags3{color:#00F}
  3099. .tags4{font-size:16px}
  3100. .tags5{color:#C00; font-size:20px}
  3101. .tags6{color:#F06 font-size:20px}
  3102. .tags7{color:#030; font-weight:bold; font-size:18px}
  3103. .tags8{color:#F06; font-weight:bold}
  3104. .tags9{color:#C00; font-weight:bold;font-size:16px}
  3105. .tags a:hover{color:#F00; text-decoration:underline}
  3106. /*4.19.3 tag云标签*/
  3107. #tagyun {position:relative}
  3108. #tagyun a {position:absolute;top:0px;left:0px;font-weight:bold;text-decoration:none;padding:3px 6px}
  3109. /*4.20 折叠
  3110. Name: mod_Huifold
  3111. Sample:
  3112. <ul id="" class="Huifold">
  3113. <li class="item"><h4>标题<b>+</b></h4><div class="info">内容 </div></li>
  3114. ……
  3115. </ul>
  3116. */
  3117. .Huifold .item{position:relative}
  3118. .Huifold .item h4{margin:0;font-weight:bold;position:relative;border-top: 1px solid #fff;font-size:15px;line-height:22px;padding:7px 10px;background-color:#eee;cursor:pointer;padding-right:30px}
  3119. .Huifold .item h4 b{position:absolute;display: block; cursor:pointer;right:10px;top:7px;width:16px;height:16px; text-align:center; color:#666}
  3120. .Huifold .item .info{display:none;padding:10px}
  3121. /*4.21 遮罩条
  3122. Name: mod_maskBar
  3123. */
  3124. .maskBar{position:absolute;height:auto;left:0; bottom:-100%; right:0;padding:10px;background-color:rgba(0,0,0,0.6);z-index:2; color:#fff!important}
  3125. .maskWraper{position:relative; overflow:hidden}
  3126. .maskWraper.hover .maskBar{bottom:0px;
  3127. transition: bottom 200ms;
  3128. -moz-transition: bottom 200ms; /* Firefox 4 */
  3129. -webkit-transition: bottom 200ms; /* Safari 和 Chrome */
  3130. -o-transition: bottom 200ms; /* Opera */
  3131. }
  3132. .maskBox{position:absolute;width:100%; height:100%;top:0;left:0; bottom:0;right:0;z-index:2;color:#fff!important}
  3133. .maskWraper.hover .maskBox{background-color:rgba(0,0,0,0.6);
  3134. transition: all 500ms;
  3135. -moz-transition: all 500ms; /* Firefox 4 */
  3136. -webkit-transition: all 500ms; /* Safari 和 Chrome */
  3137. -o-transition: all 500ms; /* Opera */
  3138. }
  3139. /*4.22 评论列表
  3140. Name: mod_comment
  3141. Sample:
  3142. <ul class="commentList">
  3143. <li class="item cl">
  3144. <a href="#"><i class="avatar avatar-L radius"><img alt="" src="static/h-ui/images/avatar-default-S.gif"></i></a>
  3145. <div class="comment-main">
  3146. <header class="comment-header">
  3147. <div class="comment-meta"><a class="comment-author" href="#">辉哥</a> 评论于 <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time></div>
  3148. </header>
  3149. <div class="comment-body"><p><a href="#">@某人</a> 你是猴子派来的救兵吗?</p></div></div>
  3150. </li>
  3151. </ul>
  3152. */
  3153. .commentList .item{list-style: none outside none;margin: 1.6rem 0 0}
  3154. .commentList .avatar{border: 1px solid transparent;float: left}
  3155. .comment-main{position:relative;margin-left:64px;border:1px solid #dedede;border-radius:2px}
  3156. .comment-main:before,.comment-main:after{position:absolute;top:11px;left:-16px;right:100%;width:0;height:0;display:block;content:" ";border-color:transparent;border-style:solid solid outset;pointer-events:none}
  3157. .comment-main:before{border-right-color:#dedede;border-width:8px}
  3158. .comment-main:after{border-width:7px;border-right-color:#f8f8f8;margin-top:1px;margin-left:2px}
  3159. .comment-header{padding:10px 15px;background:#f8f8f8;border-bottom:1px solid #eee}
  3160. .comment-title{margin:0 0 8px 0;font-size:1.6rem;line-height:1.2}
  3161. .comment-meta{font-size:13px;color:#999;line-height:1.2}
  3162. .comment-meta a{color:#999}
  3163. .comment-author{font-weight:700;color:#999}
  3164. .comment-body{padding:15px;overflow:hidden}
  3165. .comment-body>:last-child{margin-bottom:0}
  3166. .commentList .comment-flip .avatar {float: right}
  3167. .comment-flip .comment-main{margin-left: 0; margin-right: 64px}
  3168. .comment-flip .comment-main:before {border-left-color: #dedede;border-right-color: transparent}
  3169. .comment-flip .comment-main:before,.comment-flip .comment-main:after {left: 100%;position: absolute;right: -16px}
  3170. .comment-flip .comment-main:after {border-left-color: #f8f8f8;border-right-color: transparent;margin-left: auto;margin-right: 2px}
  3171. /*4.23 tip效果
  3172. Name: mod_tip
  3173. */
  3174. .tip{}
  3175. .tip-header{}
  3176. .tit-body{}
  3177. .tit-footer{}
  3178. .tip.left{}
  3179. .tip.right{}
  3180. .tip.top{}
  3181. .tip.bottom{}
  3182. /*4.2 页脚
  3183. Name: mod_footer
  3184. Sample:
  3185. <footer class="footer mt-20">
  3186. <div class="container">
  3187. <nav class="footer-nav">
  3188. <a target="_blank" href="/aboutHui.html">关于H-ui</a>
  3189. <span class="pipe">|</span>
  3190. <a target="_blank" href="/copyright.html">软件著作权</a>
  3191. <span class="pipe">|</span>
  3192. <a target="_blank" href="/juanzeng.html">感谢捐赠</a>
  3193. </nav>
  3194. <p>Copyright &copy;2013-2016 H-ui.net All Rights Reserved. <br>
  3195. <a rel="nofollow" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备10000000号</a><br>
  3196. 未经允许,禁止转载、抄袭、镜像</p>
  3197. </div>
  3198. </footer>
  3199. */
  3200. .footer{border-top:1px solid #E8E8E8; padding:15px 0;font-family:tahoma,Arial;font-size:12px;color:#999;line-height:22px;text-align:center}
  3201. .footer a,.footer a:hover{color:#999}
  3202. /*5 页面
  3203. Name: page
  3204. */
  3205. /*5.1 错误页-404*/
  3206. .page-404{ color:#afb5bf; padding-top:60px; padding-bottom:90px}
  3207. .page-404 .error-title{font-size:80px}
  3208. .page-404 .error-title .iconfont{font-size:80px}
  3209. .page-404 .error-description{font-size:24px}
  3210. .page-404 .error-info{font-size:14px}
  3211. #page-404 .footer{ position:absolute; bottom:0; left:0; right:0}
  3212. /*5.2 博客列表页*/
  3213. .page-blog-list{}
  3214. /*5.3 博客详情页*/
  3215. .page-blog-show{}
  3216. /*5.4 关于我们页*/
  3217. .page-about-show{}
  3218. /*5.5 帮助列表页*/
  3219. .page-help-list{}
  3220. /*5.6 帮助详情页*/
  3221. .page-help-show{}
  3222. /*5.7 友情链接页*/
  3223. .page-flink{}