記得剛接觸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的同學如上圖記錄，真苦逼，只能用到哪兒學到哪兒，最后亂七八糟的。