知乎首頁的簡單仿寫

  • HTML(5)+CSS(3)。靜態頁面仿寫
  • Github連接:https://github.com/nebulium/ZhiHu
  • 大概佈局以下,在此佈局基礎上進一步處理。
  • 切圖:圖片非高清,不過是非重點。在設計的時候使用到的chrome插件:屏幕尺子(page ruler)和color zilla取色工具。css

  • 佈局總結: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處理。
相關文章
相關標籤/搜索