JavaShuo
欄目
標籤
知乎首頁的簡單仿寫
時間 2019-11-11
標籤
首頁
簡單
欄目
快樂工作
简体版
原文
原文鏈接
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處理。
相關文章
1.
Android學習之高仿知乎首頁
2.
仿知乎首頁學習 CoordinateLayout
3.
簡要仿簡書首頁
4.
仿寫天貓tmall首頁
5.
模仿知乎界面的一個簡單React demo
6.
2015.3.14(知乎首頁仿寫及純CSS兼容IE6實現響應式下拉菜單)
7.
簡單的網站首頁
8.
初學HTML/CSS仿寫百度首頁
9.
web前端之百度首頁仿寫
10.
簡單模仿 Airbnb app 的首頁導航
更多相關文章...
•
Eclipse 首選項(Preferences)
-
Eclipse 教程
•
C# 文本文件的讀寫
-
C#教程
•
Github 簡明教程
•
TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
簡簡單單
仿單
頁首
首頁
知乎
首發於知乎
簡寫
單頁
簡單的網頁佈局
簡單
快樂工作
MyBatis教程
Spring教程
Hibernate教程
0
分享到微博
分享到微信
分享到QQ
每日一句
每一个你不满意的现在,都有一个你没有努力的曾经。
最新文章
1.
外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
2.
UVa 11524 - InCircle
3.
The Monocycle(bfs)
4.
VEC-C滑窗
5.
堆排序的應用-TOPK問題
6.
實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
7.
數學基礎知識 集合
8.
amazeUI 復擇框問題解決
9.
揹包問題理解
10.
算數平均-幾何平均不等式的證明,從麥克勞林到柯西
本站公眾號
歡迎關注本站公眾號,獲取更多信息
相關文章
1.
Android學習之高仿知乎首頁
2.
仿知乎首頁學習 CoordinateLayout
3.
簡要仿簡書首頁
4.
仿寫天貓tmall首頁
5.
模仿知乎界面的一個簡單React demo
6.
2015.3.14(知乎首頁仿寫及純CSS兼容IE6實現響應式下拉菜單)
7.
簡單的網站首頁
8.
初學HTML/CSS仿寫百度首頁
9.
web前端之百度首頁仿寫
10.
簡單模仿 Airbnb app 的首頁導航
>>更多相關文章<<