現在，我們基本上講完了 CSS 布局的基本概念，以及布局的基本知識，作為此系列基礎教程的最后一篇，我們來實現一個 Blog 的頁面。
這里會用到前面學過的 HTML 基礎和 CSS 基礎，其中主要是布局相關的。
分析
要實現的頁面看起來是這樣的。
可以看到，從結構上它分成了頂部區域，導航欄區域和內容區域三大塊。
其中內容區域又分成了左右兩塊內容。
HTML 實現
按三大塊內容，分別使用 div, nav 和 main 來實現布局定位。
<div>頂部區域</div> <nav>導航欄區域</nav> <main>內容區域</main>
導航采用常規的列表。
<nav> <ul> <li> <a href="">首頁</a> </li> <li> <a href="">HTML 21天入門</a> </li> <li> <a href="">CSS 21天入門</a> </li> <li> <a href="">關于我們</a> </li> </ul> </nav>
內容區域里采用 article 實現內容，而右側的側邊欄則使用 aside 標簽。
<main> <article>左側內容（圖片+文字）</article> <aside>右側側邊欄（使用列表）</aside> </main>
CSS 入場
通過上面的 HTML 分析之后，這個頁面從結構上已經非常清晰，接下來，該 CSS 上場進行裝飾了。
首先對全局的樣式做個定義。
body { background-color: #fff; color: #333; margin: 0; font: 1.2em / 1.2 Arial, Helvetica, sans-serif; } img { max-width: 100%; display: block; }
由于這些用到了一些圖片，我們對圖片進行了統一的設置。
.logo { font-size: 200%; padding: 50px 20px; margin: 0 auto; max-width: 980px; }
最頂部的區域，進行了簡單的內外邊距和字體的設置，另外設置了最大寬度。
剩余需要進行布局的部分主要是導航欄和內容區域。
導航欄
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; }
這里對 nav 標簽進行了 position 的設置，采用 sticky，使得當滾動條向下時，導航欄能始終保持在是上面。
如果不記得 sticky，可以查閱定位 內容。
內容區域
.grid { margin: 0 auto; padding: 0 20px; max-width: 980px; display: grid; grid-template-columns: 3fr 1fr; gap: 20px; } /*應用在側邊欄的列表上*/ .photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr 1fr; } /*應用在左邊文字的圖片上*/ .feature { width: 200px; float: left; margin: 0 20px 20px 0; }
這里采用了 grid 的布局，并定義了兩個類應用在側邊欄的列表和左側的圖片上。
總結
?? 在布局時先對頁面進行分析，把 HTML 的結構設計好。
?? 在引入 CSS 時，根據 HTML 的結構進行調整，使用布局和定位進行細節上的設計實現。
?? 恭喜你完成了 CSS 的 21 天入門學習。
該文章在 2024/10/19 12:45:07 編輯過
400 186 1886
