知乎首頁的簡單仿寫

• HTML(5)+CSS(3)。靜態頁面仿寫
• Github連接：https://github.com/nebulium/ZhiHu
• 大概佈局以下，在此佈局基礎上進一步處理。
  

• 切圖：圖片非高清，不過是非重點。在設計的時候使用到的chrome插件：屏幕尺子（page ruler）和color zilla取色工具。

• 佈局總結：header爲position:fixed，且z-index較大。mancolumn和sidebar部分考慮到並不會自適應，設置爲position:absolute，這裏注意統一用top、left處理，若是一個用left，一個用right在瀏覽器縮放的時候會出現問題。而他們內部的div既有用浮動處理的、又有用position:relative/absolute處理的、以及margin/padding處理的。
• 有許多不足，待完善。
• TIPS：a. 給要進行調整佈局的塊元素先加上border，以便觀察其位置、更加方便進行margin或者padding的調整。b. 一個一個模塊（div）進行處理，然而習慣於從內往外進行設計，即先處理最裏面的div，再一個個往外進行處理。c. 統一設置：*{margin: 0; padding: 0}d. 對於連接的處理：各部分的都有設計到連接<a>，她的處理比較特殊。除了有不一樣的狀態以外，還須要考慮到優先級的問題。e. 優先級是針對同一個元素來講的。f. 下邊界陰影：box-shadowg. 處理列表的時候注意到，在用css處理的時候須要考慮容器是否具備寬度或者高度（block），而且須要注意，有的時候相對margin或者padding，指的是兩個「最近」的塊元素之間的。h. input的placeholder屬性，以及對其的css規則的處理（僞選擇器）i. border-radiusj. 對於一些內聯元素，想讓其具備長高、但仍然是inline元素：inline-blockk. cardList的處理能夠加深對於class和id的理解。而這裏的class或者id就是暴露給後臺的「接口」l. 文字環繞圖片：將圖片放在div中，用float和clear處理。