欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

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

分析

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

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

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

HTML 實現(xiàn)

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

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

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

<nav>   <ul>     <li>       <a href="">首頁</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 實現(xiàn)內(nèi)容，而右側(cè)的側(cè)邊欄則使用 aside 標簽。

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

CSS 入場

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

首先對全局的樣式做個定義。

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

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

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

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

剩余需要進行布局的部分主要是導(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; } 

這里對 nav 標簽進行了 position 的設(shè)置，采用 sticky，使得當滾動條向下時，導(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 的布局，并定義了兩個類應(yīng)用在側(cè)邊欄的列表和左側(cè)的圖片上。

總結(jié)

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

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

• ?? 恭喜你完成了 CSS 的 21 天入門學習。