A quick CSS layout library
来源:互联网 发布:网络棋牌游戏算赌博吗 编辑:程序博客网 时间:2024/06/07 14:37
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;}
- A quick CSS layout library
- 【小结】Zend Framework Quick Start 之Create A Layout
- CSS layout
- css layout
- css-layout
- layout.css
- CSS Layout
- A Simple Quick LRC
- CSS:table-layout
- CSS Grid Layout Module
- responsive layout in css
- Create A Layout
- 7.override a layout
- Struts-Layout tag library 1.1发布
- CodeIgniter使用 layout library 简化视图布局
- css library/framework
- Color library - CSS
- Chapter 1 A Quick Tour
- python 的数据结构
- ice mac 安装
- Spring MVC拦截器+注解方式实现防止表单重复提交
- Apache配置反向代理、负载均衡和集群(mod_proxy方式) 经典
- java中间件
- A quick CSS layout library
- hive order by,sort by,distributed by
- 数据结构与算法:字符串
- 【leetcode】34Search for a Range(二分搜索上下界)
- easyui-combobox添加onChange事件
- Android studio 中查看sha1值的方法
- Spring MVC 上传文件(upload files)
- The Structure of an MPEG-DASH MPD(译)
- Spring MVC拦截器+注解方式实现防止表单重复提交