HTML5与CSS3基础教:用CSS布局及注意事项

HTML5DW讯 自7月11日开始,HTML5DW与“图灵教育”合作推出的“图书免费上网看”的活动开始放出《HTML5与CSS3基础教》(第11章)。和此前一样,活动无需注册,也无须付费,登录http://www.html5dw.com/即可免费查阅。

《HTML5与CSS3基础教》(第11章)全部内容:

开始布局的注意事项 

建立页面结构

在旧版浏览器上为HTML5元素添加样式

对默认样式进行重置或标准化

盒模型

控制显示类型和元素的可见性

设置元素的高度和宽度

添加元素周围的内边距

设置元素的边框

设置元素周围的外边距

使元素浮动

控制元素浮动的位置

对元素进行相对定位

对元素进行绝对定位

在栈中定位元素

处理溢出

垂直对齐元素

修改鼠标指针

第11章第1节:用CSS布局

可以使用CSS创建各种各样的布局。本章将演示如何创建一种常见的布局:顶部有一个报头,中间是两栏内容,底部有一个页脚,如图11.0.1所示。不过,使用即将讲到的CSS属性,还可以创建截然不同的布局。

1.jpg

图11.0.1:这个页面包含两栏、一个页眉和一个页脚,它是用CSS进行布局的。CSS具有强大的改变页面外观的功能。这个页面的设计相当简单,以内容为重点。本章一步步地介绍了如何构建该布局,我们还会在第12章将这个页面做成响应式Web页面

本章和下一章是相互关联的。为了缓解学习曲线,本章演示了创建固定宽度布局的方法,不过你学到的大部分知识也适用于其他布局。在第12章中,我们会学习如何将这个页面做成响应式Web页面。 

在本章中,不会将CSS的每一行都显示出来。例如,大部分文本格式化都在前面完成了(完整的代码点击这里)。所有这些文件(尤其是样式表)中都包含了大量的注释,用以对代码进行解释。

11.1 开始布局的注意事项

下面列举的一些要点有助于对网站进行布局,并在发布之前对网站进行调整。

1. 内容与显示分离

之前的章节已经提到过了,不过,由于这是构建网页的根本,因此有必要再次强调一下。作为最佳实践,应始终保持内容(HTML)与显示(CSS)分离。第8章介绍了如何通过外部样式表实现这一点。如果对所有的页面都这样做,就可以共享相同的布局和整体样式,而只在具体页面设置差异即可。

2. 布局方法

网站设计主要有两大类型:固定宽度和响应式。

对于固定(fixed)布局,整个页面和每一栏都有基于像素的宽度。顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还是使用桌面浏览器并对窗口进行缩小,它的宽度都不会改变。要知道,你访问过的大部分网站都使用固定布局。在引入响应式Web设计之前,这是大多数网站选用的布局方式。尽管使用固定布局的网站的比例在减少,但这种布局仍很常见,尤其是公司网站和大牌网站。此外,固定布局也是学习CSS时最容易掌握的布局方式,这也是本章演示这种布局的原因。

响应式页面也称为流式(fluid或liquid)页面,它使用百分数定义宽度,允许页面随显示环境的改变进行放大或缩小。除了具有流动栏,响应式页面还可以根据屏幕尺寸以特定方式调整其设计。例如,可以更改图像大小或者调整每一栏,使其大小更合适。这就可以在使用相同HTML的情况下,为移动用户、平板电脑用户和桌面用户定制单独的体验,而不是提供三个独立的网站。

没有一种布局方式可以适用于所有的情景。不过,随着智能手机和平板电脑的广泛出现(更别提我们目前还不知道,但未来一定会出现的各种不同尺寸的设备),有必要将网站做成响应式布局。这也是每天都有大量响应式网站出现的原因。上文已经提到,我们将在下一章学习如何创建响应式

网站。

3. 浏览器注意事项

并非所有的访问者都使用同样的浏览器,同样的操作系统,甚至同样的设备访问你的网站。因此,大多数情况下,在将网站放到服务器上发布之前,通常需要在很多浏览器上对页面进行测试。推荐在开发过程中就用几个浏览器对页面定期进行测试,这样,在最后进行全面测试时,碰到的问题就会少一些。关于如何对页面进行测试,以及测试用浏览器的有关信息,参见20.2节。

1.jpg