记得刚接触css那会儿，没有系统学习过，也是属于半路出家，对很多css一知半解，就很难制随意制作出自己想要的效果，设计与作品千差万别。

所以你只要想做前端，哪怕是玩玩，也要先系统去学习下CSS，这是最最基础的。

今天建了这个zblog模板站，翻看之前记录的css，真的有意思，特此罗列出来，当初也是这么一点一滴学习的； 如果你想要学习制作zblog模板，更是少不了系统的去学习CSS，不然真的很难做出出众的作品；如果你也像我一样这么一点点记录学习的话，真的是非耗时间，浪费青春。

a:link { } /* 未访问的链接 */
a:visited { } /* 已访问的链接 */
a:hover { } /* 鼠标移动到链接上 */
a:active { } /* 选定的链接 */
font-style: normal;  /*斜体*/
font-weight: normal; /*粗体*/
border:1px solid #CCC; /*四周框线 可以用 border-left*/
text-align:right;  /*文字居中*/
height: 1.40625rem; /*高*/
line-height: 1.40625rem; /*行高*/
border-radius: 15px;  /*圆角*/
border-radius: 0px;
word-wrap: break-word; word-break: normal; /*自动换行*/
white-space:nowrap;  /*强制不换行*/
overflow:hidden;  /*自动隐藏文字*/
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
-o-text-overflow:ellipsis;  /*适用于opera浏览器*/
overflow: hidden;  /*覆盖*/
.ico-com {background: url(images/img31.png) left center no-repeat;padding-left: 20px}
margin 外部（居中用auto）
margin:10px auto; /*外部上下10px*/
padding 内部
padding: 0 12px; /*内宽同缩*/
padding: 20px 10px  /*内高所20，宽所10px*/
position
position:relative; /*不覆盖，不悬浮，从上一个开始*/
文字悬浮在图片上：
HTML = <div class=new-img><a h=#><img><span class=tags>文字</span></a>
CSS = .news-img .tags { position: absolute; z-index: 2; left: 10px; top: 10px; line-height: 1; padding: 5px 10px; color: #fff; border-radius: 2px; }
input：
value="自动填入”
placeholder="提示"
下划线：
text-decoration:none;  /*无下划线*/
text-decoration:underline /*下划线样式*/
text-decoration:line-through /*删除线样式-贯穿线样式*/
text-decoration:overline  /*上划线样式*/
ul li两列：
overflow:hidden; /*多UL不重叠*/
float:left; width:49%; text-align:left; /*两列*/
--------------------------------------------------
li前图标：
li加点最简单方法：
padding-left:12px;background:url(images/list-li.png) no-repeat 0px 8px;
/*内部左缩进文字12，图标距上8px*/
li加数字的背景方法：
ul{….;background:url(路径) no-repeat 1px 2px;….}
list-style-image : none | url ( url )   
取值：  
none  :　 默认值。不指定图像   
url ( url )  :　 使用绝对或相对 url 地址指定图像
list-style-position : outside | inside   
取值：  
outside  :　 默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐   
inside  :　 列表项目标记放置在文本以内，且环绕文本根据标记对齐
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin   
取值：  
disc  :　 CSS1  默认值。实心圆   
circle  :　 CSS1  空心圆   
square  :　 CSS1  实心方块   
decimal  :　 CSS1  阿拉伯数字   
lower-roman  :　 CSS1  小写罗马数字   
upper-roman  :　 CSS1  大写罗马数字   
lower-alpha  :　 CSS1  小写英文字母   
upper-alpha  :　 CSS1  大写英文字母   
none  :　 CSS1  不使用项目符号
----------------------------------------------------
左侧出头一点的CSS
padding-left: 9px;border-left-width: 4px;border-left-color: #407864;border-left-style: solid;
------------------------------------------------
border-方向-style:
p {border-style:solid;}
p.none {border-left-style:none}
p.dotted {border-left-style:dotted}
p.dashed {border-left-style:dashed}
p.solid {border-left-style:solid}
p.double {border-left-style:double}
p.groove {border-left-style:groove}
p.ridge {border-left-style:ridge}
p.inset {border-left-style:inset}
p.outset {border-left-style:outset}
----------------------------------------------------
。。。。。。。（省略）

没有系统学习过CSS的同学如上图记录，真苦逼，只能用到哪儿学到哪儿，最后乱七八糟的。