同系列文章鏈接：?

課程視頻：

寫(xiě)了那么多 HTML CSS 的學(xué)習(xí)，終于，要在這篇迎來(lái)具體的案例應(yīng)用了。下面，就是本節(jié)課要演示的案例圖，我們要通過(guò) HTML?和 CSS 將它實(shí)現(xiàn)出來(lái)：

不過(guò)用圖文的方式是沒(méi)法完整的講解一遍這個(gè)頁(yè)面的實(shí)現(xiàn)過(guò)程的，只能盡可能包含我們編寫(xiě)的順序和重點(diǎn)，需要大家參考視頻教程，以及下載我們的案例源文件進(jìn)行研究，才能更好的掌握有關(guān)知識(shí)。

案例源文件，在超人的電話亭公眾號(hào)回復(fù) ”前端“ 即可獲取。

在完成設(shè)計(jì)稿以后，我們著手項(xiàng)目的前端界面布局，首先要先建立項(xiàng)目有關(guān)的文件夾，然后在這個(gè)文件夾根目錄中創(chuàng)建 ”index.html“ 文檔，再創(chuàng)建 img、css 兩個(gè)文件夾，用來(lái)存放對(duì)應(yīng)文件。

然后，通過(guò)編輯器打開(kāi) index.html，優(yōu)先完成頁(yè)面的標(biāo)簽結(jié)構(gòu)創(chuàng)建，即預(yù)判頁(yè)面中包含哪些標(biāo)簽，以及相應(yīng)的層級(jí)結(jié)構(gòu)（即文檔對(duì)象模型 DOM），將它們碼下來(lái)。

那么什么是 HTML 的代碼結(jié)構(gòu)呢，前面我們有略微提及，下面用一個(gè)樹(shù)狀圖來(lái)理解 HTML 文檔中的結(jié)構(gòu)：

這么做的目的，是為了先集中精力建立一個(gè)清晰的 HTML 文檔，幫助我們后續(xù)在進(jìn)行樣式調(diào)整的時(shí)候可以更便捷，而不用一邊寫(xiě) HTML 又同時(shí)調(diào)整 CSS，這樣效率會(huì)非常低下。

所以，下面就可以開(kāi)始動(dòng)手了，優(yōu)先將我們前文所說(shuō)的 HTML 文檔標(biāo)準(zhǔn)結(jié)構(gòu)填充進(jìn)去，同時(shí)在 head 中添加引用外部 CSS 文件的鏈接。

然后我們就要在 body 標(biāo)簽內(nèi)，添加有關(guān)的內(nèi)容框架的 div 標(biāo)簽了，為了展示直觀，下方的標(biāo)簽處于 body 標(biāo)簽內(nèi)，標(biāo)準(zhǔn)文檔信息我就不展示出來(lái)了。

簡(jiǎn)單描述一下上面的結(jié)構(gòu)，就是我們將頁(yè)面分為三個(gè)大的模塊，并在每個(gè)大模塊又拆分成兩個(gè)子模塊，用文字解釋起來(lái)如下：

• 頁(yè)面頂部區(qū)域：導(dǎo)航欄、廣告圖

• 頁(yè)面內(nèi)容區(qū)域：特點(diǎn)介紹、分享干貨

• 頁(yè)腳內(nèi)容區(qū)域：站點(diǎn)信息、備案號(hào)

在這個(gè)過(guò)程中，為了比較好的區(qū)分代碼內(nèi)容，我們可以通過(guò)在開(kāi)頭或結(jié)尾添加 <!--注釋區(qū)域--> 注釋代碼，提升之后的瀏覽效率。

并且，在通過(guò) div 創(chuàng)建框架的同時(shí)，我們可以為它增加有關(guān)的 class 命名，命名的方法大家可以根據(jù)自己的習(xí)慣定，用拼音也可以，只要沒(méi)有在不相關(guān)的 div 中應(yīng)用到相同名稱即可。下面，開(kāi)始具體演示幾個(gè)模塊 HTML 標(biāo)簽的編寫(xiě)方式。

首先看頂部模塊，對(duì)它具體的內(nèi)部模塊做一次拆解，然后再開(kāi)始動(dòng)手：

然后，我們?cè)匍_(kāi)始定義下一個(gè)模塊特點(diǎn)介紹：

然后，我們?cè)僦v講在干貨分享模塊中，單個(gè)卡片定義的方式：

相信通過(guò)上面幾個(gè)模塊的演示，大家應(yīng)該能了解如何制定 HTML 標(biāo)簽的結(jié)構(gòu)了吧，節(jié)省篇幅，頁(yè)腳模塊的樣式我就不添加了。

我會(huì)將基礎(chǔ)的文件框架放在素材文件夾中，大家在公眾號(hào)回復(fù) ”前端“ 即可獲取。

完成了 HTML 的結(jié)構(gòu)，我們就要開(kāi)始創(chuàng)建 CSS 文檔了，創(chuàng)建一個(gè) style.css 樣式表文件存儲(chǔ)到 CSS 文件夾中，然后就可以在編輯器中開(kāi)始添加樣式了。

通常，我們?cè)?CSS 中添加的第一個(gè)選擇器，是一個(gè)特殊的選擇器 ” * “ 符號(hào)，它代表了所有元素，使用這個(gè)選擇器，就等于對(duì)所有元素進(jìn)行了樣式聲明。我們會(huì)再 CSS 頭部添加這個(gè)選擇器，對(duì)標(biāo)簽的自帶默認(rèn)樣式進(jìn)行 ”格式化“，常見(jiàn)的設(shè)置如下：

在這個(gè)全局預(yù)設(shè)中，我們分別清除了 margin、padding、list-style 三個(gè)屬性的默認(rèn)數(shù)值，將所有元素設(shè)置成 block 塊化，可以進(jìn)行長(zhǎng)寬的定義，以及實(shí)現(xiàn)整體元素左對(duì)齊，寬高自適應(yīng)。

全局預(yù)設(shè)的并不代表所有參數(shù)的元素被定死了，只是我們給它們先預(yù)設(shè)了一個(gè)默認(rèn)數(shù)值，只要在后續(xù)其它選擇器中聲明新的參數(shù)，那么瀏覽器最會(huì)按最后設(shè)置的聲明作為標(biāo)準(zhǔn)。

比如title標(biāo)簽，理論上這個(gè)標(biāo)簽是不會(huì)出現(xiàn)在畫(huà)布中的，但在新的特性中有些瀏覽器在它 block 了以后就會(huì)看見(jiàn)，所以我們還要添加一條隱藏聲明：

然后，我們還可以對(duì) body 標(biāo)簽進(jìn)行定義，我們通常會(huì)將對(duì)頁(yè)面文字定義的基本屬性放在 body 上而不是全選擇器上，比如：

這里面，我們定義了字體依次顯示 helvetica （英文）、蘋方、雅黑，字號(hào)使用14像素，行高默認(rèn)為字號(hào)的 1.6 倍，字色為黑，整個(gè)內(nèi)容區(qū)域背景色為白色，寬度和瀏覽器區(qū)域一致，以及最小寬度。

全局基本樣式的制定，和我們的經(jīng)驗(yàn)有關(guān)，預(yù)判這個(gè)項(xiàng)目中哪些需要提前設(shè)置，哪些是可以不用強(qiáng)調(diào)的，初期大家可以使用和我一樣的設(shè)置，下面，就要展開(kāi)模塊樣式的具體制定了。

接著，我們來(lái)完成頂部樣式的制定。我們可以發(fā)現(xiàn)，頂部的導(dǎo)航欄背景實(shí)際區(qū)域的尺寸寬是 960px，高是 60px，并在畫(huà)布中居中顯示，那么它們的樣式：

然后，我們就要定義導(dǎo)航欄內(nèi)的元素了，包含兩個(gè)部分內(nèi)容，LOGO 和導(dǎo)航按鈕文字，所以我們可以使用 float 屬性來(lái)表現(xiàn)它們，并使用 margin 屬性來(lái)增加模塊間距。

然后，為導(dǎo)航內(nèi)的列表文字鏈接做具體的設(shè)置。其中 ul 沒(méi)啥可以做調(diào)整的，我們直接從 li 標(biāo)簽開(kāi)始定義，將 li 設(shè)置成左浮動(dòng)，并將內(nèi)部的 a 標(biāo)簽設(shè)置成 100px*60px，等于 li 的長(zhǎng)寬也是 100px*60px：

在 a 標(biāo)簽的樣式中，可以注意到 line-height 這個(gè)屬性，只要將它設(shè)置成模塊一樣的高度，就可以實(shí)現(xiàn)上下居中的效果，而不用使用頂部 margin 或 padding。

同時(shí)，因?yàn)?a 標(biāo)簽呈一個(gè)矩形模塊的完整尺寸，我們就可以通過(guò) hover 屬性修改它的選中效果為背景深灰色，文字白色。

接著，看看 banner 的樣式，它是一個(gè)會(huì)撐滿全屏的圖片，而我們完成這類效果，就一定要考慮到圖片在瀏覽器進(jìn)行伸縮時(shí)的效果。最常見(jiàn)的做法，就是保持圖片大小不變，高度不變，左右的內(nèi)容根據(jù)局瀏覽寬度的變動(dòng)而隱藏、顯示。

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

這樣，保持圖片居中的位置，并因?yàn)樯霞?jí) div 中 overflow 的值為隱藏，所以無(wú)論我們?cè)趺赐蟿?dòng)瀏覽器，圖片的尺寸和位置都會(huì)居中。

但因?yàn)?，我們?dǎo)出的1280的寬，在分辨率 1920 寬的情況下兩側(cè)就有缺口，所以為了解決這樣的問(wèn)題我們通常會(huì)再添加一個(gè)背景色，保證顯示的效果的合理，下方是實(shí)際顯示效果。

在這里，頁(yè)面上方的布局也就基本實(shí)現(xiàn)。

然后，我們?cè)賮?lái)實(shí)現(xiàn)內(nèi)容區(qū)域的樣式，標(biāo)題這些我就不說(shuō)了，我們先重點(diǎn)講講卡片模塊。

卡片內(nèi)部實(shí)際上有內(nèi)邊距的存在，所以我們可以使用 padding 屬性，同時(shí)因?yàn)橐恍杏兴膫€(gè)卡片，每個(gè)卡片間有間距，所以也要使用 float 和 margin 屬性。

要記住在這個(gè)定義下，我們使用了 padding，那就等于我們?cè)O(shè)置的長(zhǎng)寬要減去四周的 28px，如果原來(lái)是 232px 寬，就要減左右總共 56px 的尺寸，得到 176px。

當(dāng)這個(gè)標(biāo)簽的寬為 176px ，那么下方的其它 div 設(shè)置 100% 寬度時(shí)，它們的總寬也就只能是 176px。

還要注意的是，中間的卡片總共有4個(gè)，如果我們統(tǒng)一制定它們占用的空間是”寬“+”右邊距“，那么就會(huì)有4個(gè)卡片寬和4個(gè)右邊距，但實(shí)際顯示效果中只有3個(gè)間距。

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

在下方的多文本排列中，一定要重點(diǎn)關(guān)注原設(shè)計(jì)稿中的數(shù)值字體定義數(shù)值，包括行高、字號(hào)、字重，只要數(shù)據(jù)一致，我們就完全可以使用設(shè)計(jì)稿中的間距來(lái)定義 magin 數(shù)值。

往下的獨(dú)家分享模塊同理，我們要實(shí)現(xiàn) 3*2 的矩陣排列，就要為卡片標(biāo)簽設(shè)置浮動(dòng)和右邊距、下邊距，而每一行的最后一個(gè)，我們都要清除它的右邊距，才能保證的顯示的正常。

在這個(gè)模塊中，底部用了一個(gè) span 標(biāo)簽做父標(biāo)簽，b、i ?分別表示作者和閱讀量。

這里要注意的是，b 和 i 作為調(diào)整文本樣式的標(biāo)簽，并不是一定要遵守它原先的樣式的，我們可以將它的加粗和傾斜去掉，作為不同字段標(biāo)識(shí)用的標(biāo)簽。

并且，在閱讀量上，有一個(gè)眼睛圖標(biāo)，我們也并不需要使用 img 標(biāo)簽去實(shí)現(xiàn)，只要在 CSS 中增加一個(gè) padding-left，留出空白區(qū)域，然后用 background 的圖片填充這個(gè)區(qū)域即可。

講完這個(gè)模塊，頁(yè)腳我就也不再啰嗦下去了，大家可以自己在我們提供的源文件中查看對(duì)應(yīng)的設(shè)置和屬性即可。

HTML 和 CSS 的教學(xué)到這里就告一段落了，大家最后的任務(wù)，就是根據(jù)所學(xué)的內(nèi)容，將本節(jié)課的案例完整的實(shí)現(xiàn)出來(lái)即可。

相信在實(shí)現(xiàn)的過(guò)程里大家肯定會(huì)碰到不少問(wèn)題，所以一定要一邊做一邊思考，一邊查看 CSS 手冊(cè)或百度解決問(wèn)題。相關(guān)的素材和已經(jīng)完整實(shí)現(xiàn)好的案例在超人的電話亭公眾號(hào)中回復(fù) “前端”?即可獲取。

只要能把這節(jié)課案例完整實(shí)現(xiàn)出來(lái)，那么大家就已經(jīng)掌握了前端的初級(jí)水平，沒(méi)有特殊的情況也就不再需要深入學(xué)習(xí)下去了。

再提一次，學(xué)習(xí)這兩門語(yǔ)言，并不是真的需要我們工作中寫(xiě)代碼，而是通過(guò)了解前端樣式的實(shí)現(xiàn)過(guò)程和思考邏輯，提升在團(tuán)隊(duì)中和前端工程師的協(xié)作效率，降低溝通成本，從而具備更強(qiáng)的職業(yè)競(jìng)爭(zhēng)力。

我們下篇內(nèi)容再賤！

B端產(chǎn)品設(shè)計(jì)全能班新一期早鳥(niǎo)預(yù)約中，有需要的同學(xué)記得聯(lián)系我～

往期課程介紹查看?? ?