用户登录

页面分成三个部分,头部,边栏还有主体。在网页文档里先准备一下页面布局框架需要的元素。

先用一组 div,元素上添加一个类,名字是 page,元素里直接包装的东西就是页面布局框架,一组 header 元素,页面头部里的东西可以放在这个包装里。同一级别,再添加一组 main,页面的主体内容可以放在这个元素里。同一级别再添加一组 aside,页面的边栏可以放在这个元素里。

样式表

打开页面的样式表,用通用选择器写一段样式,把 box-sizing 统一设置成 border-box。下面再用 :root 这个伪类作为选择器,在里面定义几个变量。添加一个 --page-background ,值是 lavender 这种颜色,再定义一个 --page-main-background,值是 *white,然后是 --page-header-background,值是 lavender,再添加一个 --page-aside-background ,变量的值是 lavender,再添加一个 --skeleton-object-background,值是 orchid。

下面用 body 作为选择器写一段样式,把 margin 设置成 0,去掉元素的外边距。再用 background 把元素的背景颜色设置成 --page-background 这个变量表示的颜色值。

.page

用移动设备优先的方法设计页面,需要先让页面适应移动设备,然后通过媒体查询给大尺寸的设备设计样式。

用 .page 作为选择器写一段样式,把元素的 display 设置成 grid,使用 CSS 的网格布局,下面用 grid-template-rows 设计一下网格的行,可以分成三行,第一行高度是 64 像素,第二行的高度设置成 1fr,第三行的高度也设置成 64 像素。下面用 min-height,把元素最小高度设置成 100vh,就是高度至少要跟可视区域一样。

这样网格里的第一行应该是 header,第二行是 main,第三行是 aside。

header

下面用 .page > header 作为选择器,把页面头部的 position 设置成 sticky ,top 是 0 ,再用 padding 添加点内边距,上下是 0,左右是 24 像素,然后用 background 把背景颜色设置成 --page-header-background 这个变量表示的值。

复制一份这段样式,选择器改成 .page > aside,改一下边栏的背景颜色,用一下 --page-aside-background。

main

然后用 .page > main 作为选择器,把页面主体的背景颜色设置成 --page-main-background,用 padding 在元素四周添加 24 像素的内边距。 为了演示滚动页面,我们暂时可以先把页面主体最小高度设置成 200vh,也就是 2 倍的可视区域的高度。

修改一下 .page > aside 这块样式,把 top:0 改成 bottom:0 。

预览

现在页面的顶部是页面头部,高度是 64 像素,中间是页面主体,底部是页面边栏,高度是 64 像素。滚动页面的时候,页面头部还有边栏都会固定在原本的位置上。

@media

下面可以设计一下大尺寸设备的页面布局,写一段媒体查询,@media,媒体特性是 min-width: 640px,这样可视区域宽度大于 640 像素,就会使用这组样式。

这里再用 .page 作为选择器,重新划分一下页面网格,grid-template-rows 分成两行,第一行高度 64 像素,第二行是 1fr,再用 grid-template-columns 划分一下网格的栏,分成两栏,第一栏是 96 像素,第二栏是 1 fr。

为了让边栏在页面左边显示,我们需要单独设置一下它在网格里的位置,用 .page > aside 作为选择器写一段样式,先把 top 设置成 0 。然后把 grid-row 的值设置成 1 / 3,再把 grid-column 的值设置成 1 / 2 。 max-height 设置成 100vh,规定这个边栏高度最大不能超过可视区域的高度。

在浏览器测试一下,现在页面分成上中下三个部分,调整浏览器窗口的宽度,超过 640 像素以后,页面布局会发生变化,最左边是边栏,右边的顶部是页面头部,下面是页面主体。

页面布局《 Web 基础:布局实践 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点