前端學習筆記（五）HTML+CSS靜態頁面實戰案例：幸福西餅首頁和百度首頁

按照知乎上面汪小黑推薦的前端學習路徑，在自學了HTML和CSS以後，開始嘗試實戰製做靜態頁面小項目。

幸福西餅首頁製做

首先我在網上下載到了千鋒教育提供的的幸福西餅官網靜態頁面的教學視頻和圖片素材、源碼等。我是先看一集視頻，而後關掉視頻本身敲一遍代碼。而後再和源碼進行比較，看看本身哪些地方的代碼寫法和源碼不同，是否有能夠改進的地方。作到比較靠後面的時候，其實已經不是很依賴視頻教學了，本身大概看到樣式就大概能知道應該怎麼搞。

第一步：把教程中給的common.css 改爲規範的格式，把本身看不懂或是沒記清楚的標籤等等查一遍，整理一下。
Html：
dl，dd，dt：定義列表（definition list），定義列表中的項目，解釋項目

CSS:
padding，margin：盒模型的內邊距，外邊距。（很是重要）
display：display 屬性規定元素應該生成的框的類型。
block便是該元素將顯示爲塊級元素，此元素先後會帶有換行符。（好像還挺經常使用，用於讓有些元素上下分開）
clear：哪邊不容許出現浮動元素。
height：元素的高度。
visibility：元素是否可見。
overflow：內容溢出元素框時發生的事情。
zoom：縮放因數。1或100%即爲不縮放。
outline：輪廓線。
vertical-align：圖片對齊文字的方式。（對齊一行中上面仍是下面這樣）
input：xx（-input）-placeholder：xx瀏覽器的佔位符。（這個好像有點複雜，建議具體問題具體分析）
position：固定、絕對等。最好要配合top、left等使用。

CSS選擇器：
:after：在每一個x元素的內容後面插入內容。
（配合使用：content：插入的內容）

第二步：照着教程開始作首頁頁面。每段教程聽完，再按照本身理解敲一遍。最後具體數值照着教程裏面的數值改過來。
新知識點：
1.子元素加了margin-top，父元素要加overflow: hidden（這個真的挺重要的！不然縮放頁面時，可能同行的內容會被擠成好幾行（親測的header出現的問題）或者被吞掉一部份內容（親測的下面圖片出現的問題）。）
2.nth- child(n)：選擇其父元素的第幾個子元素。（不分種類）
3.nth-of-child(n)：選擇其父元素的第幾個該類型的子元素。（和上一個的區別在因而否分類型！這裏以前理解錯過，要記好）
4.把a設成display:block（轉成塊）了以後，它的父元素若是有text-align，則會變成在這個塊的寬度內進行居中。因此寬度不能亂調。
5.同行連續不一樣元素（好比連着的span）之間若是須要單空格，用回車就好。
6.要給一小塊內容設置樣式（好比邊框什麼的），就要先把它們搞成一小塊，block或者inline-block。

深入學習到的思想：要把頁面拆分紅不少個盒子，每個部分都是一個盒子。盒子套盒子。
而後每一個盒子內部再進行添加內容，這樣樣式比較方便。
有的時候一行內容出現順序錯亂，要把它們整合成一個span比較好。

第三步：根據教程開始作列表頁頁面。一樣先聽一遍再帶着本身的理解敲碼，最後再對着修改。

新知識點：
1.設置box-sizing:border-box可使div盒子的border尺寸固定。
不然（應該是content-box），div盒子的尺寸是內部元素的尺寸，不含內外邊距和邊框。
2.很迷：img是行內替換元素，行內元素的一種。因此居中不能用margin:0 auto，反而能夠用text-align:center。
可是它也是比較特殊的行內元素，因此有height、width、padding、margin等屬性。
3.僞元素:before和:after：在該元素的以前（or以後）應用這些樣式。（能夠用於給父元素加after的僞元素來清除浮動）（或者按照W3school上面說的給footer加clear應該也沒問題）

附上我本身完成的幸福西餅案例源碼和圖片素材：
幸福西餅實戰案例（上傳於CSDN論壇）

百度首頁製做

百度的首頁製做就沒有參考什麼教學和素材了，按照以前學到的思路，本身把網頁理解拆分紅多個塊（div），而後先寫好div結構和註釋，再往裏面填html內容，最後對每一部分進行添加CSS樣式。由於本身事情比較雜效率不是很高，加上常常在一些細枝末節的地方過度糾結，斷斷續續大概作了一天時間。根據網上的推薦買了魚書《CSS權威指南》，還沒到，但願比較官方權威的這本教材能夠解決我常常在一些樣式的細枝末節的地方糾結的毛病了。（但願裏面的案例豐富到能夠解決個人疑惑）
作到一些實在不知道如何實現的地方的時候（好比右上角空氣質量情況的小文字），我就去翻查百度s首頁源碼，而且試圖搞清楚。

在百度首頁的製做過程當中：

發現的新問題和新知識：
1.父類和子類都有類選擇器的狀況下，同一屬性彷佛優先按照父元素的類選擇器中的屬性值來算。
可是祖父元素和父元素都有類選擇器的狀況下，又彷佛變成按照前後順序來了。
但願CSS權威指南能夠幫我解答疑惑。

查了百度源碼才知道：
2.文字背景色也是能夠用border-radius來調整形狀的。用padding調整內邊距，思路和圖片的同樣。（我怎麼圖片的想出來了，文字的就沒想出來呢，迷惑）

3.能夠用inline-block行內塊元素來調整行的寬度高度等。

4.能夠設置header的min-width，這樣來使頁面縮小時有一個最低限度，以後就須要左右滾動條，而不是header兩側的塊縮進來了。（也不容易讓字擠成一坨致使排版問題。）

5.能夠用outline來處理選中input時候的醜陋邊框。

6.fixed和absolute的區別：fixed的塊會相對於窗口固定。

附上我本身完成的百度首頁源碼和圖片素材：
百度首頁實戰案例（上傳於CSDN論壇）