现在，我们基本上讲完了 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 天入门学习。