現(xiàn)在，我們基本上講完了 CSS 布局的基本概念，以及布局的基本知識(shí)，作為此系列基礎(chǔ)教程的最后一篇，我們來實(shí)現(xiàn)一個(gè) Blog 的頁(yè)面。

這里會(huì)用到前面學(xué)過的 HTML 基礎(chǔ)和 CSS 基礎(chǔ)，其中主要是布局相關(guān)的。

分析

要實(shí)現(xiàn)的頁(yè)面看起來是這樣的。

可以看到，從結(jié)構(gòu)上它分成了頂部區(qū)域，導(dǎo)航欄區(qū)域和內(nèi)容區(qū)域三大塊。

其中內(nèi)容區(qū)域又分成了左右兩塊內(nèi)容。

HTML 實(shí)現(xiàn)

按三大塊內(nèi)容，分別使用 div, nav 和 main 來實(shí)現(xiàn)布局定位。

<div>頂部區(qū)域</div> <nav>導(dǎo)航欄區(qū)域</nav> <main>內(nèi)容區(qū)域</main> 

導(dǎo)航采用常規(guī)的列表。

<nav>   <ul>     <li>       <a href="">首頁(yè)</a>     </li>     <li>       <a href="">HTML 21天入門</a>     </li>     <li>       <a href="">CSS 21天入門</a>     </li>     <li>       <a href="">關(guān)于我們</a>     </li>   </ul> </nav> 

內(nèi)容區(qū)域里采用 article 實(shí)現(xiàn)內(nèi)容，而右側(cè)的側(cè)邊欄則使用 aside 標(biāo)簽。

<main>   <article>左側(cè)內(nèi)容（圖片+文字）</article>   <aside>右側(cè)側(cè)邊欄（使用列表）</aside> </main> 

CSS 入場(chǎng)

通過上面的 HTML 分析之后，這個(gè)頁(yè)面從結(jié)構(gòu)上已經(jīng)非常清晰，接下來，該 CSS 上場(chǎng)進(jìn)行裝飾了。

首先對(duì)全局的樣式做個(gè)定義。

body {   background-color: #fff;   color: #333;   margin: 0;   font: 1.2em / 1.2 Arial, Helvetica, sans-serif; }  img {   max-width: 100%;   display: block; } 

由于這些用到了一些圖片，我們對(duì)圖片進(jìn)行了統(tǒng)一的設(shè)置。

.logo {   font-size: 200%;   padding: 50px 20px;   margin: 0 auto;   max-width: 980px; } 

最頂部的區(qū)域，進(jìn)行了簡(jiǎn)單的內(nèi)外邊距和字體的設(shè)置，另外設(shè)置了最大寬度。

剩余需要進(jìn)行布局的部分主要是導(dǎo)航欄和內(nèi)容區(qū)域。

導(dǎo)航欄

nav {   background-color: #ff6600;   padding: 0.5em;   top: 0;   position: sticky; }  nav ul {   margin: 0;   padding: 0;   list-style: none;   display: flex;   justify-content: space-between; }  nav a {   color: #fff;   text-decoration: none;   padding: 0.5em 1em; } 

這里對(duì) nav 標(biāo)簽進(jìn)行了 position 的設(shè)置，采用 sticky，使得當(dāng)滾動(dòng)條向下時(shí)，導(dǎo)航欄能始終保持在是上面。

如果不記得 sticky，可以查閱定位 內(nèi)容。

內(nèi)容區(qū)域

.grid {   margin: 0 auto;   padding: 0 20px;   max-width: 980px;   display: grid;   grid-template-columns: 3fr 1fr;   gap: 20px; } /*應(yīng)用在側(cè)邊欄的列表上*/ .photos {   list-style: none;   margin: 0;   padding: 0;   display: grid;   gap: 1px;   grid-template-columns: 1fr 1fr; }  /*應(yīng)用在左邊文字的圖片上*/ .feature {   width: 200px;   float: left;   margin: 0 20px 20px 0; } 

這里采用了 grid 的布局，并定義了兩個(gè)類應(yīng)用在側(cè)邊欄的列表和左側(cè)的圖片上。

總結(jié)

• ?? 在布局時(shí)先對(duì)頁(yè)面進(jìn)行分析，把 HTML 的結(jié)構(gòu)設(shè)計(jì)好。

• ?? 在引入 CSS 時(shí)，根據(jù) HTML 的結(jié)構(gòu)進(jìn)行調(diào)整，使用布局和定位進(jìn)行細(xì)節(jié)上的設(shè)計(jì)實(shí)現(xiàn)。

• ?? 恭喜你完成了 CSS 的 21 天入門學(xué)習(xí)。