按照知乎上面汪小黑推薦的前端學習路徑，在自學了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論壇)

總結

以上是生活随笔為你收集整理的html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。