A quick CSS layout library
2016-06-13 18:15
387 查看
a quick CSS layout library
If the UI of your page is simple, meanwhile, you want to construct web pages quickly, this CSS library is very useful for you!Introduction
As you known, some CSS styles are used very frequently. For example, display:none - the most commonly used method for hiding elements, visibility:hidden - a very useful method for hiding elements, and so on.Actually, zxx.lib.css is a collection of these styles. It includes display, margin, padding, color(web safe color), font refer, vertical-align, float, …, and many other common styles. In addition to these styles, some group styles that I think useful are also in.
All the names of the CSS in zxx.lib.css are short names. For example, .dn instead of display:none, .db instead of display:block, …
Note
I recommend that global.css should put behind after other CSS file! As shown below:<link href="global.css" rel="stylesheet" />
License
@charset "utf-8"; /* CSS Document */ /* ---------------------single CSS----------------------- */ /* display */ .dn{display:none;} .di{display:inline;} .db{display:block;} .dib{display:inline-block;} div.dib{*display:inline; *zoom:1;}/* other block level tag(eg. p, li, h1~h6), using 'inline_any' instead */ /* height */ .h0{height:0;} .h16{height:14px;} .h16{height:16px;} .h18{height:18px;} .h20{height:20px;} .h22{height:22px;} .h24{height:24px;} .h30{height:30px;} /* width */ /* fixed width value */ .w20{width:20px;} .w50{width:50px;} .w70{width:70px;} .w100{width:100px;} .w120{width:120px;} .w140{width:140px;} .w160{width:160px;} .w180{width:180px;} .w200{width:200px;} .w220{width:220px;} .w250{width:250px;} .w280{width:280px;} .w300{width:300px;} .w320{width:320px;} .w360{width:360px;} .w400{width:400px;} .w460{width:460px;} .w500{width:500px;} .w600{width:600px;} .w640{width:640px;} .w700{width:700px;} /* percent width value */ .pct10{width:10%;} .pct15{width:15%;} .pct20{width:20%;} .pct25{width:25%;} .pct30{width:30%;} .pct33{width:33.3%;} .pct40{width:40%;} .pct50{width:50%;} .pct60{width:60%;} .pct66{width:66.6%;} .pct70{width:70%;} .pct75{width:75%;} .pct80{width:80%;} .pct90{width:90%;} .pct100{width:100%;} /* line-height */ .lh0{line-height:0;} .lh16{line-height:14px;} .lh16{line-height:16px;} .lh18{line-height:18px;} .lh20{line-height:20px;} .lh22{line-height:22px;} .lh24{line-height:24px;} .lh30{line-height:30px;} /* margin */ .m0{margin:0;} .ml1{margin-left:1px;} .ml2{margin-left:2px;} .ml5{margin-left:5px;} .ml10{margin-left:10px;} .ml15{margin-left:15px;} .ml20{margin-left:20px;} .ml30{margin-left:30px;} .mr1{margin-right:1px;} .mr2{margin-right:2px;} .mr5{margin-right:5px;} .mr10{margin-right:10px;} .mr15{margin-right:15px;} .mr20{margin-right:20px;} .mr30{margin-right:30px;} .mt1{margin-top:1px;} .mt2{margin-top:2px;} .mt5{margin-top:5px;} .mt10{margin-top:10px;} .mt15{margin-top:15px;} .mt20{margin-top:20px;} .mt30{margin-top:30px;} .mb1{margin-bottom:1px;} .mb2{margin-bottom:2px;} .mb5{margin-bottom:5px;} .mb10{margin-bottom:10px;} .mb15{margin-bottom:15px;} .mb20{margin-bottom:20px;} .mb30{margin-bottom:30px;} /* margin negative */ .ml-1{margin-left:-1px;} .mr-1{margin-right:-1px;} .mt-1{margin-top:-1px;} .mb-1{margin-bottom:-1px;} .ml-3{margin-left:-3px;} .mr-3{margin-right:-3px;} .mt-3{margin-top:-3px;} .mb-3{margin-bottom:-3px;} .ml-20{margin-left:-20px;} .mr-20{margin-right:-20px;} .mt-20{margin-top:-20px;} .mb-20{margin-bottom:-20px;} /* padding */ .p0{padding:0;} .p1{padding:1px;} .pl1{padding-left:1px;} .pt1{padding-top:1px;} .pr1{padding-right:1px;} .pb1{padding-bottom:1px;} .p2{padding:2px;} .pl2{padding-left:2px;} .pt2{padding-top:2px;} .pr2{padding-right:2px;} .pb2{padding-bottom:2px;} .pl5{padding-left:5px;} .p5{padding:5px;} .pt5{padding-top:5px;} .pr5{padding-right:5px;} .pb5{padding-bottom:5px;} .p10{padding:10px;} .pl10{padding-left:10px;} .pt10{padding-top:10px;} .pr10{padding-right:10px;} .pb10{padding-bottom:10px;} .p15{padding:15px;} .pl15{padding-left:15px;} .pt15{padding-top:15px;} .pr15{padding-right:15px;} .pb15{padding-bottom:15px;} .p20{padding:20px;} .pl20{padding-left:20px;} .pt20{padding-top:20px;} .pr20{padding-right:20px;} .pb20{padding-bottom:20px;} .p30{padding:30px;} .pl30{padding-left:30px;} .pt30{padding-top:30px;} .pr30{padding-right:30px;} .pb30{padding-bottom:30px;} /* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/ .bdc{border:1px solid #ccc;} .blc{border-left:1px solid #ccc;} .brc{border-right:1px solid #ccc;} .btc{border-top:1px solid #ccc;} .bbc{border-bottom:1px solid #ccc;} .bdd{border:1px solid #ddd;} .bld{border-left:1px solid #ddd;} .brd{border-right:1px solid #ddd;} .btd{border-top:1px solid #ddd;} .bbd{border-bottom:1px solid #ddd;} .bde{border:1px solid #eee;} .ble{border-left:1px solid #eee;} .bre{border-right:1px solid #eee;} .bte{border-top:1px solid #eee;} .bbe{border-bottom:1px solid #eee;} /* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */ .bgwh{background-color:#fff;} .bgfb{background-color:#fbfbfb;} .bgf5{background-color:#f5f5f5;} .bgf0{background-color:#f0f0f0;} .bgeb{background-color:#ebebeb;} .bge0{background-color:#e0e0e0;} /* safe color */ .g0{color:#000;} .g3{color:#333;} .g6{color:#666;} .g9{color:#999;} .gc{color:#ccc;} .wh{color:white;} /* font-size */ .f0{font-size:0;} .f12{font-size:12px;} .f13{font-size:13px;} .f14{font-size:14px;} .f16{font-size:16px;} .f18{font-size:18px;} .f20{font-size:20px;} .f24{font-size:24px;} .f28{font-size:28px;} /* font-family */ .fa{font-family:Arial;} .ft{font-family:Tahoma;} .fv{font-family:Verdana;} .fs{font-family:Simsun;} .fl{font-family:'Lucida Console';} .fw{font-family:'Microsoft Yahei';} /* font-style */ .n{font-weight:normal; font-style:normal; white-space: normal;} .b{font-weight:bold;} .i{font-style:italic;} /* text-align */ .tc{text-align:center;} .tr{text-align:right;} .tl{text-align:left;} .tj{text-align:justify;} /* text-decoration */ .tdl{text-decoration:underline;} .tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;} /* letter-spacing */ .lt-1{letter-spacing:-1px;} .lt0{letter-spacing:0;} .lt1{letter-spacing:1px;} /* white-space */ .nowrap{white-space:nowrap;} /* word-wrap */ .bk{word-wrap:break-word;} /* vertical-align */ .vm{vertical-align:middle;} .vtb{vertical-align:text-bottom;} .vb{vertical-align:bottom;} .vt{vertical-align:top;} .v-1{vertical-align:-1px;} .v-2{vertical-align:-2px;} .v-3{vertical-align:-3px;} .v-4{vertical-align:-4px;} .v-5{vertical-align:-5px;} /* float */ .l{float:left;} .r{float:right;} /* clear */ .cl{clear:both;} /* position */ .rel{position:relative;} .abs{position:absolute;} /*z-index*/ .zx1{z-index:1;} .zx2{z-index:2;} /* cursor */ .poi{cursor:pointer;} .def{cursor:default;} /* overflow */ .ovh{overflow:hidden;} .ova{overflow:auto;} /* visibility */ .vh{visibility:hidden;} .vv{visibility:visible;} /* opacity */ .opa0{opacity:0; filer:alpha(opacity=0);} /* zoom */ .z{*zoom:1;} /* ------------------- multiply CSS ------------------ */ /* 块状元素水平居中 */ .auto{margin-left:auto; margin-right:auto;} /* 清除浮动*/ .fix{*zoom:1;} .fix:after{display:table; content:''; clear:both;} /* 基于display:table-cell的自适应布局 */ .cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;} /* 双栏自适应cell部分连续英文字符换行 */ .cell2{overflow:hidden; _display:inline-block;} /* 单行文字溢出虚点显 示*/ .ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} /* css3过渡动画效果 */ .trans{ -webkit-transition:all .15s; transition:all .15s; } /* 大小不定元素垂直居中 */ .dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;} /* 加载中背景图片 - 如果您使用该CSS小库,务必修改此图片地址 */ .loading{background:url(about:blank) no-repeat center;} /* 无框文本框文本域 */ .bd_none{border:0; outline:none;} /* 绝对定位隐藏 */ .abs_out{position:absolute; left:-999em; top:-999em;} .abs_clip{position:absolute; clip:rect(0 0 0 0);} /* 按钮禁用 */ .disabled{outline:0 none; cursor:default!important; opacity:.4; filer:alpha(opacity=40); -ms-pointer-events:none; pointer-events:none;} /*inline-block与float等宽列表*/ .inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;} .inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;} .float_two, .float_three, .float_four, .float_five, .float_six{float:left;} .inline_two, .float_two{width:50%; *width:49.9%;} .inline_three, .float_three{width:33.33333%; *width:33.3%;} .inline_four, .float_four{width:25%; *width:24.9%;} .inline_five, .float_five{width:20%; *width:19.9%;} .inline_six, .float_six{width:16.66666%; *width:16.6%;} .inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页