用户登录

先观察一下我们的这个页面布局的线框图,这个页面分成了几个部分,上面这块是 header 部分,在这里可以放一些工具按钮之类的东西,左边儿是 aside,应用的主要导航可以放在这块地方, 然后还有一个 main 区域,这里面是应用的主要内容。

现在我们可以按照这个设计去组织一下页面的结构,打开 layout 这个网页,先用一组 div 元素,在这个容器里可以包装整个应用。在这个容器上面添加一个 page 类。

在这个 page 里面再嵌套页面上的其它东西,比如 header,用一个 div 元素,上面加上 page__header,再添加一个 div,上面加上 page__aside ,最后再用一个 div,上面加上 page__main 。

一会儿我们可以使用这些类去添加一些样式。 在 page 容器里包装的这三个容器,它们是兄弟关系。page 这个容器是它们的爸爸。

在 assets,css 的下面新建一个样式文件,名字叫 wireframe.css 。 回到 Layout 文档,在 head 标签里,把刚才创建的 wireframe 这个样式嵌入进来。把它放在 page 样式表的上面,normalize 样式表的下面。

打开这个样式表,在里面添加点样式。 设置一下 page__header 的样式,用 background 设置一下它的背景颜色。这个颜色值可以直接在设计文档这里,选中 header 以后,打开这个填充,然后复制一下这里的颜色值。用它作为这个 background 属性的样式。

下面再给 page__aside 添加一个背景颜色的样式,用 background 属性设置一下,这个颜色值也可以在设计文档里复制一下。

然后再设置一下 page__main 的样式, 用 background 设置一下它的背景颜色,颜色值可以在设计文档里复制,把它交给 background 属性。

现在页面上会出现这三块东西,它们会叠加在一起,黄色这块是页面的 header,粉色是页面的 边栏,蓝色是页面的主体部分。

页面布局(CSS):布局的基本结构《 从设计到代码:布局设计 》

统计

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

社会化网络

关于

微信订阅号

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