第7章 CSS布局
了解DIV的概念
掌握DIV的布局
CSS盒模型
CSS元素的定位
本章主要内容:
《网页设计制作基础与上机指导——HTML+CSS+JavaScript》清华大学出版社
什么是DIV+CSS
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格定位方式,真正地达到了内容与表现相分离。,不再发布新版本,原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展,适合自动数据交换,并且更加规整。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。
初识DIV
div标签是双标签,即以<div></div>的形式存在,中间可以放置任何内容,包括其他的div标签。也就是说,div标签是一个没有任何特性的容器而已。
【例7-1】初识DIV标签
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div>第1个div标签中的内容</div>
<div>第2个div标签中的内容</div>
<div>第3个div标签中的内容</div>
</body>
</html>
该代码的浏览效果如图所示,从浏览效果中可以看出,在没有CSS的帮助下,div标签没有任何特别之处,无论怎么调整浏览器窗口,每个div标签占据一行。即默认情况下,一行只能容纳一个div标签。
初识DIV
DIV元素的样式设置
块状元素是其他元素的容器,一般是矩形的,可容纳内联元素和其他块状元素,它有自己的高度和宽度。默认情况下,在父容器中占据一行,同一行无法容纳其他元素及文本。其他的元素将显示在其下一行,这可以看做被块级元素“挤”下去的。块状元素就是一个矩形容器,在CSS设置了高度和宽度后,形状无法被改变。
DIV元素的样式设置
和块级元素相反,内联元素没有固定形状,也无法设置宽度和高度。内联元素形状由其内含的内容决定,所以在宽度足够的情况下,一行能容纳多个内联元素。如果说相对于块状元素是一个硬盒子,内联元素就是一个软软的布袋子(形状由内容决定)。
块状元素和内联元素的基本差异是块状元素一般都从新行开始,而当加入了CSS控制以后,块状元素和内联元素的这种属性差异就不成为差异了,完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性。相对来说,块状元素适合于大块的区域排版,所以常用来布局页面。而内联元素适合于局部元素的样式设置,所以常用于局部的文字样式设置。
DIV的页面布局
在布局页面宽度时一般要考虑最小显示分辨率的浏览用户,过去浏览用户的显示分辨率最小为800×600(15寸CRT显示器),其最小宽度为800像素。浏览器的边框及滚动条部分约占24像素左右,故布局宽度为分辨率的水平像素应减去24像素,即过去网页布局宽度一般为778像素,再宽就会使页面产生水平滚动条。
由于计算机设备的飞速发展,现在使用800×600显示分辨率的用户很少了,现在页面布局宽度最大不超过1002~1003像素(考虑到最小宽度1024像素,即1024×768显示分辨率)。
DIV的页面布局
为了适应不同浏览用户的分辨率,网页设计师要始终保证页面整体内容在页面居中。在使用HTML表格布局页面时,只需要设置布局表格的align属性为center即可,而div居中没有属性可以设置,只能通过CSS控制其位置。
在布局页面前,网页制作者一定要把页面的默认边距清除。为了方便操作,常用的方法是使用通配选择符“*”,将所有对象的边距清除,即margin属性和padding属性。margin属性代表对象的外边距(上、下、左、右),padding属性代表对象的内边距,也叫填充(上、下、左、右)。
DIV元素的布局技巧
从技术角度来说,XHTML在控制样式时也不需要过多的嵌套。DIV+CSS起到的作用是将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。
类似于表格布局页面,为了实现复杂的布局结构,div元素也需要互相嵌套。但
第7章 CSS布局 来自淘豆网m.daumloan.com转载请标明出处.
