寫了那麼多 HTML CSS 的學習，終於，要在這篇迎來具體的案例應用了。下面，就是本節課要演示的案例圖，我們要通過 HTML 和 CSS 將它實現出來：

不過用圖文的方式是沒法完整的講解一遍這個頁面的實現過程的，只能儘可能包含我們編寫的順序和重點，需要大家參考視頻教程，以及下載我們的案例源文件進行研究，才能更好的掌握有關知識。

視頻教程： https://v.qq.com/x/page/v3082god7lf.html

案例源文件下載： https://pan.baidu.com/s/1mTSSD7yNCYVb42aBCCpJdg 密碼: ul1v

往期回顧：

HTML樣式的語法

在完成設計稿以後，我們着手項目的前端界面佈局，首先要先建立項目有關的文件夾，然後在這個文件夾根目錄中創建 「index.html」 文檔，再創建 img、css 兩個文件夾，用來存放對應文件。

然後，通過編輯器打開 index.html，優先完成頁面的標籤結構創建，即預判頁面中包含哪些標籤，以及相應的層級結構（即文檔對象模型 DOM），將它們碼下來。

那麼什麼是 HTML 的代碼結構呢，前面我們有略微提及，下面用一個樹狀圖來理解 HTML 文檔中的結構：

這麼做的目的，是爲了先集中精力建立一個清晰的 HTML 文檔，幫助我們後續在進行樣式調整的時候可以更便捷，而不用一邊寫 HTML 又同時調整 CSS，這樣效率會非常低下。

所以，下面就可以開始動手了，優先將我們前文所說的 HTML 文檔標準結構填充進去，同時在 head 中添加引用外部 CSS 文件的鏈接。

然後我們就要在 body 標籤內，添加有關的內容框架的 div 標籤了，爲了展示直觀，下方的標籤處於 body 標籤內，標準文檔信息我就不展示出來了。

簡單描述一下上面的結構，就是我們將頁面分爲三個大的模塊，並在每個大模塊又拆分成兩個子模塊，用文字解釋起來如下：

• 頁面頂部區域：導航欄、廣告圖
• 頁面內容區域：特點介紹、分享乾貨
• 頁腳內容區域：站點信息、備案號

在這個過程中，爲了比較好的區分代碼內容，我們可以通過在開頭或結尾添加註釋代碼，提升之後的瀏覽效率。

並且，在通過 div 創建框架的同時，我們可以爲它增加有關的 class 命名，命名的方法大家可以根據自己的習慣定，用拼音也可以，只要沒有在不相關的 div 中應用到相同名稱即可。下面，開始具體演示幾個模塊 HTML 標籤的編寫方式。

首先看頂部模塊，對它具體的內部模塊做一次拆解，然後再開始動手：

然後，我們再開始定義下一個模塊特點介紹：

然後，我們再講講在乾貨分享模塊中，單個卡片定義的方式：

相信通過上面幾個模塊的演示，大家應該能瞭解如何制定 HTML 標籤的結構了吧，節省篇幅，頁腳模塊的樣式我就不添加了。

我會將基礎的文件框架放在素材文件夾中，大家可自行下載。

CSS全局預設

完成了 HTML 的結構，我們就要開始創建 CSS 文檔了，創建一個 style.css 樣式表文件存儲到 CSS 文件夾中，然後就可以在編輯器中開始添加樣式了。

通常，我們在 CSS 中添加的第一個選擇器，是一個特殊的選擇器 「 * 」 符號，它代表了所有元素，使用這個選擇器，就等於對所有元素進行了樣式聲明。我們會在 CSS 頭部添加這個選擇器，對標籤的自帶默認樣式進行 「格式化」，常見的設置如下：

在這個全局預設中，我們分別清除了 margin、padding、list-style 三個屬性的默認數值，將所有元素設置成 block 塊化，可以進行長寬的定義，以及實現整體元素左對齊，寬高自適應。

全局預設的並不代表所有參數的元素被定死了，只是我們給它們先預設了一個默認數值，只要在後續其它選擇器中聲明新的參數，那麼瀏覽器會按最後設置的聲明作爲標準。

比如title標籤，理論上這個標籤是不會出現在畫布中的，但在新的特性中有些瀏覽器在它 block 了以後就會看見，所以我們還要添加一條隱藏聲明：

然後，我們還可以對 body 標籤進行定義，我們通常會將對頁面文字定義的基本屬性放在 body 上而不是全選擇器上，比如：

這裏面，我們定義了字體依次顯示 helvetica （英文）、蘋方、雅黑，字號使用14像素，行高默認爲字號的 1.6 倍，字色爲黑，整個內容區域背景色爲白色，寬度和瀏覽器區域一致，以及最小寬度。

全局基本樣式的制定，和我們的經驗有關，預判這個項目中哪些需要提前設置，哪些是可以不用強調的，初期大家可以使用和我一樣的設置，下面，就要展開模塊樣式的具體制定了。

頂部樣式定義

接着，我們來完成頂部樣式的制定。我們可以發現，頂部的導航欄背景實際區域的尺寸寬是 960px，高是 60px，並在畫布中居中顯示，那麼它們的樣式：

然後，我們就要定義導航欄內的元素了，包含兩個部分內容，LOGO 和導航按鈕文字，所以我們可以使用 float 屬性來表現它們，並使用 margin 屬性來增加模塊間距。

然後，爲導航內的列表文字鏈接做具體的設置。其中 ul 沒啥可以做調整的，我們直接從 li 標籤開始定義，將 li 設置成左浮動，並將內部的 a 標籤設置成 100px*60px，等於 li 的長寬也是 100px*60px：

在 a 標籤的樣式中，可以注意到 line-height 這個屬性，只要將它設置成模塊一樣的高度，就可以實現上下居中的效果，而不用使用頂部 margin 或 padding。

同時，因爲 a 標籤呈一個矩形模塊的完整尺寸，我們就可以通過 hover 屬性修改它的選中效果爲背景深灰色，文字白色。

接着，看看banner 的樣式，它是一個會撐滿全屏的圖片，而我們完成這類效果，就一定要考慮到圖片在瀏覽器進行伸縮時的效果。最常見的做法，就是保持圖片大小不變，高度不變，左右的內容根據局瀏覽寬度的變動而隱藏、顯示。

那麼我們可以這麼定義它們的樣式：

這樣，保持圖片居中的位置，並因爲上級 div 中 overflow 的值爲隱藏，所以無論我們怎麼拖動瀏覽器，圖片的尺寸和位置都會居中。

但因爲，我們導出的1280的寬，在分辨率 1920 寬的情況下兩側就有缺口，所以爲了解決這樣的問題我們通常會再添加一個背景色，保證顯示的效果的合理，下方是實際顯示效果。

在這裏，頁面上方的佈局也就基本實現。

內容樣式定義

然後，我們再來實現內容區域的樣式，標題這些我就不說了，我們先重點講講卡片模塊。

卡片內部實際上有內邊距的存在，所以我們可以使用 padding 屬性，同時因爲一行有四個卡片，每個卡片間有間距，所以也要使用 float 和 margin 屬性。

要記住在這個定義下，我們使用了 padding，那就等於我們設置的長寬要減去四周的 28px，如果原來是 232px 寬，就要減左右總共 56px 的尺寸，得到 176px。

當這個標籤的寬爲 176px ，那麼下方的其它 div 設置 100% 寬度時，它們的總寬也就只能是 176px。

還要注意的是，中間的卡片總共有4個，如果我們統一制定它們佔用的空間是「寬」+「右邊距」，那麼就會有4個卡片寬和4個右邊距，但實際顯示效果中只有3個間距。

所以這種情況就可以使用行內樣式的方法將第四個卡片的右邊距清零，保證顯示的合理性：

在下方的多文本排列中，一定要重點關注原設計稿中的數值字體定義數值，包括行高、字號、字重，只要數據一致，我們就完全可以使用設計稿中的間距來定義 magin 數值。

往下的獨家分享模塊同理，我們要實現 3*2 的矩陣排列，就要爲卡片標籤設置浮動和右邊距、下邊距，而每一行的最後一個，我們都要清除它的右邊距，才能保證的顯示的正常。

在這個模塊中，底部用了一個 span 標籤做父標籤，b、i 分別表示作者和閱讀量。

這裏要注意的是，b 和 i 作爲調整文本樣式的標籤，並不是一定要遵守它原先的樣式的，我們可以將它的加粗和傾斜去掉，作爲不同字段標識用的標籤。

並且，在閱讀量上，有一個眼睛圖標，我們也並不需要使用 img 標籤去實現，只要在 CSS 中增加一個 padding-left，留出空白區域，然後用 background 的圖片填充這個區域即可。

講完這個模塊，頁腳我就也不再囉嗦下去了。

結尾

HTML 和 CSS 的教學到這裏就告一段落了，大家最後的任務，就是根據所學的內容，將本節課的案例完整的實現出來即可。

相信在實現的過程裏大家肯定會碰到不少問題，所以一定要一邊做一邊思考，一邊查看 CSS 手冊或百度解決問題。

只要能把這節課案例完整實現出來，那麼大家就已經掌握了前端的初級水平，沒有特殊的情況也就不再需要深入學習下去了。

再提一次，學習這兩門語言，並不是真的需要我們工作中寫代碼，而是通過了解前端樣式的實現過程和思考邏輯，提升在團隊中和前端工程師的協作效率，降低溝通成本，從而具備更強的職業競爭力。

歡迎關注作者的微信公衆號：「超人的電話亭」