按照知乎上面汪小黑推薦的前端學(xué)習(xí)路徑，在自學(xué)了HTML和CSS之后，開始嘗試實戰(zhàn)制作靜態(tài)頁面小項目。

幸福西餅首頁制作

首先我在網(wǎng)上下載到了千鋒教育提供的的幸福西餅官網(wǎng)靜態(tài)頁面的教學(xué)視頻和圖片素材、源碼等。我是先看一集視頻，然后關(guān)掉視頻自己敲一遍代碼。然后再和源碼進(jìn)行比較，看看自己哪些地方的代碼寫法和源碼不一樣，是否有可以改進(jìn)的地方。做到比較靠后面的時候，其實已經(jīng)不是很依賴視頻教學(xué)了，自己大概看到樣式就大概能知道應(yīng)該怎么搞。

第一步：把教程中給的common.css 改成規(guī)范的格式，把自己看不懂或是沒記清楚的標(biāo)簽等等查一遍，整理一下。

Html：

dl，dd，dt：定義列表(definition list)，定義列表中的項目，解釋項目

CSS:

padding，margin：盒模型的內(nèi)邊距，外邊距。(非常重要)

display：display 屬性規(guī)定元素應(yīng)該生成的框的類型。

block即是該元素將顯示為塊級元素，此元素前后會帶有換行符。(好像還挺常用，用于讓有些元素上下分開)

clear：哪邊不允許出現(xiàn)浮動元素。

height：元素的高度。

visibility：元素是否可見。

overflow：內(nèi)容溢出元素框時發(fā)生的事情。

zoom：縮放因數(shù)。1或100%即為不縮放。

outline：輪廓線。

vertical-align：圖片對齊文字的方式。(對齊一行中上面還是下面這樣)

input：xx(-input)-placeholder：xx瀏覽器的占位符。(這個好像有點復(fù)雜，建議具體問題具體分析)

position：固定、絕對等。最好要配合top、left等使用。

CSS選擇器：

:after：在每個x元素的內(nèi)容后面插入內(nèi)容。

(配合使用：content：插入的內(nèi)容)

第二步：照著教程開始做首頁頁面。每段教程聽完，再按照自己理解敲一遍。最后具體數(shù)值照著教程里面的數(shù)值改過來。

新知識點：

1.子元素加了margin-top，父元素要加overflow: hidden(這個真的挺重要的！否則縮放頁面時，可能同行的內(nèi)容會被擠成好幾行(親測的header出現(xiàn)的問題)或者被吞掉一部分內(nèi)容(親測的下面圖片出現(xiàn)的問題)。)

2.nth- child(n)：選擇其父元素的第幾個子元素。(不分種類)

3.nth-of-child(n)：選擇其父元素的第幾個該類型的子元素。(和上一個的區(qū)別在于是否分類型！這里之前理解錯過，要記好)

4.把a(bǔ)設(shè)成display:block(轉(zhuǎn)成塊)了之后，它的父元素如果有text-align，則會變成在這個塊的寬度內(nèi)進(jìn)行居中。所以寬度不能亂調(diào)。

5.同行連續(xù)不同元素(比如連著的span)之間如果需要單空格，用回車就好。

6.要給一小塊內(nèi)容設(shè)置樣式(比如邊框什么的)，就要先把它們搞成一小塊，block或者inline-block。

深刻學(xué)習(xí)到的思想：要把頁面拆分成很多個盒子，每一個部分都是一個盒子。盒子套盒子。

然后每個盒子內(nèi)部再進(jìn)行添加內(nèi)容，這樣樣式比較方便。

有的時候一行內(nèi)容出現(xiàn)順序錯亂，要把它們整合成一個span比較好。

第三步：根據(jù)教程開始做列表頁頁面。同樣先聽一遍再帶著自己的理解敲碼，最后再對著修改。

新知識點：

1.設(shè)置box-sizing:border-box可以使div盒子的border尺寸固定。

否則(應(yīng)該是content-box)，div盒子的尺寸是內(nèi)部元素的尺寸，不含內(nèi)外邊距和邊框。

2.很迷：img是行內(nèi)替換元素，行內(nèi)元素的一種。所以居中不能用margin:0 auto，反而可以用text-align:center。

但是它也是比較特殊的行內(nèi)元素，所以有height、width、padding、margin等屬性。

3.偽元素:before和:after：在該元素的之前(or之后)應(yīng)用這些樣式。(可以用于給父元素加after的偽元素來清除浮動)(或者按照W3school上面說的給footer加clear應(yīng)該也沒問題)

附上我自己完成的幸福西餅案例源碼和圖片素材：

幸福西餅實戰(zhàn)案例(上傳于CSDN論壇)

百度首頁制作

百度的首頁制作就沒有參考什么教學(xué)和素材了，按照之前學(xué)到的思路，自己把網(wǎng)頁理解拆分成多個塊(div)，然后先寫好div結(jié)構(gòu)和注釋，再往里面填html內(nèi)容，最后對每一部分進(jìn)行添加CSS樣式。因為自己事情比較雜效率不是很高，加上經(jīng)常在一些細(xì)枝末節(jié)的地方過分糾結(jié)，斷斷續(xù)續(xù)大概做了一天時間。根據(jù)網(wǎng)上的推薦買了魚書《CSS權(quán)威指南》，還沒到，希望比較官方權(quán)威的這本教材可以解決我經(jīng)常在一些樣式的細(xì)枝末節(jié)的地方糾結(jié)的毛病了。(希望里面的案例豐富到可以解決我的疑惑)

做到一些實在不知道如何實現(xiàn)的地方的時候(比如右上角空氣質(zhì)量狀況的小文字)，我就去翻查百度s首頁源碼，并且試圖搞清楚。

在百度首頁的制作過程中：

發(fā)現(xiàn)的新問題和新知識：

1.父類和子類都有類選擇器的情況下，同一屬性似乎優(yōu)先按照父元素的類選擇器中的屬性值來算。

但是祖父元素和父元素都有類選擇器的情況下，又似乎變成按照先后順序來了。

希望CSS權(quán)威指南可以幫我解答疑惑。

查了百度源碼才知道：

2.文字背景色也是可以用border-radius來調(diào)整形狀的。用padding調(diào)整內(nèi)邊距，思路和圖片的一樣。(我怎么圖片的想出來了，文字的就沒想出來呢，迷惑)

3.可以用inline-block行內(nèi)塊元素來調(diào)整行的寬度高度等。

4.可以設(shè)置header的min-width，這樣來使頁面縮小時有一個最低限度，之后就需要左右滾動條，而不是header兩側(cè)的塊縮進(jìn)來了。(也不容易讓字?jǐn)D成一坨導(dǎo)致排版問題。)

5.可以用outline來處理選中input時候的丑陋邊框。

6.fixed和absolute的區(qū)別：fixed的塊會相對于窗口固定。

附上我自己完成的百度首頁源碼和圖片素材：

百度首頁實戰(zhàn)案例(上傳于CSDN論壇)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。