页面头部与边栏上都会有一些工具项目。先准备一下页面结构，在网页文档里，在这个 header 元素里面添加一组 div，元素上添加一个类，名字是 toolbar，里面的东西是工具栏，这些工具栏可能会分组，每一组单独放在一组 div 里面，先添加两组 div。

第一个 div 里面，再添加四个 div ，表示这组工具栏里面有四个工具项目。在 .toolbar 里的第二组 div 里面，添加一组 div。

.sidebar

在 aside 元素里面，添加一组 div，上面加上一个类，名字是 .sidebar，在这个边栏里面，添加六组 div，每组 div 表示在边栏里的一个项目。

toolbar 样式

在样式表里设计一下顶部工具栏的样式，用 .toolbar > div > div 作为选择器，先把元素的 background 设置成 --skeleton-object-background。再把 width 设置成 24 像素，height 也设置成 24 像素，然后把 border-radius 设置成 50%。现在顶部这里会显示一些圆形的东西，用它们表示工具栏上的项目。

再用 .toolbar > div 作为选择器，把 display 设置成 flex，然后用 gap 添加个间隔，大小是 8 像素。在上面再用 .toolbar 作为选择器，height 设置成 100%，display 是 flex，align-items 让 flex 项目在交叉轴居中对齐，再用 justify-content ，主轴对齐设置成 flex-end，下面用 gap 添加 24 像素的间隔。

sidebar 样式

再设计一下边栏的样式，用 .sidebar > div 作为选择器，先把这些元素的 background 设置成 --skelecton-object-background，width 是 24 像素，height 也是 24 像素，border-radius 是 50% 。

上面用 .sidebar 作为选择器再写一段样式，height 是 100%，display 设置成 flex，align-items 是 center，再把 justify-content 设置成 space-around。

在宽度小于 640 像素的浏览器上预览一下这个边栏的样式。

下面我们再去设计一下比 640 像素大的窗口里的这个边栏的项目，写一段媒体查询，@media(min-width: 640px) {}，用 .sidebar 作为选择器，把 flex-direction 设置成 column，再把 justify-content 主轴的对齐设置成 flex-start，然后用 gap 添加 24 像素的间隔。

单独再设计一下这个边栏里的第一个项目的外边距，用 .sidebar > div:first-child 作为选择器，margin-top 是 32 像素，margin-bottom 也是 32 像素。

边栏上的第一个还有第二个项目的大小可以再改的大一点。 .sidebar > div:first-child 逗号分隔一下，再添加一个 .sidebar > div:nth-child(2) ，把这两个元素的 width 改成 32 像素，把 height 改成 32 像素。

边栏上的最后一个项目让它在底部显示，选择器可以写成 .sidebar > div:last-child，把 margin-top 设置成 auto，这样这个元素就跑到最下面这里来了，再把 margin-bottom 在底边添加 32 像素的外边距。

最后在浏览器再预览一下这个页面布局。