HTML学习--DIV+CSS布局实验

实验 DIV+CSS 布局

1 实验目的

1) 了解页面常用布局结构；

2) 掌握DIV 的使用方法；

3) 掌握DIV+CSS 布局的基本方法；

4) 熟练编制符合W3C 标准的XHTML 文档。

2 实验内容

1) 将实验三中完成的网站页面，修订成为符合W3C 标准的XHTML 文档；

2) 采用DIV+CSS 将实验三的页面重新布局；

3) 制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标出区域即可；

4）采用DIV+CSS 的方法，进一步完善实验三中建立的网站。 3 实验仪器、设备

1) PC 机最低配置：2G Hz 以上CPU ；1G 以上内存；1G 自由硬盘空间；

2) Internet Explorer 、Firefox 、Chrome 、Opera 、Safari 任意浏览器；

3) Macromedia Dreamweaver 8或Macromedia Dreamweaver CS3。

4实验要求

1)了解页面常用布局结构；

2)掌握DIV的使用方法；

3)掌握CSS布局得基本方法；

4)熟练编制符合W3C标准的XHTML文档。

5实验步骤

5.1CSS布局入门

CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin、padding、border等属性来控制版块的间距。

定义DIV，分析一个典型的定义div例子：

说明如下：

1)层的名称为sample，在页面中用就可以调用这个样式；

2)MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一

个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边

距，如果都一样，可以缩写成"MARGIN: 10px;"。如果边距为零，要写成

"MARGIN: 0px;"；

3)注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面

可以不跟单位"px"。MARGIN是透明元素，不能定义颜色；

4)PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指

定上右下左边框到内容的距离。如果都一样，可以缩写成"PADDING:0px"。

单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定义颜色；

5)BORDER是指层的边框，"BORDER-RIGHT: #CCC 2px solid;"是定义层的

右边框颜色为"#CCC"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"；

6)BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用

"url(../images/bg_logo.gif)"来指定背景图片路径；其次定义背景色

"#FEFEFE"。"no-repeat"指背景图片不需要重复，如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的

"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE；

7)COLOR用于定义字体颜色；

8)TEXT-ALIGN用来定义层中的内容排列方式，center居中，left居左,right

居右；

9)LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写

作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思；10)WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百

分比，象这里的"60%"。要注意的是：这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。

下面是这个层的实际表现：

我们可以看到边框是2px的灰色，背景图片在右下没有重复，内容距离上和左边框20px，内容居中，一切和预想的一样。虽然不好看，但它是最基本的，掌握了它，你就已经学会一半的CSS布局技术了。

5.2CSS2盒模型

自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

5.3第一个CSS布局实例

接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。

1）确定布局，这里我们采用三列布局方式作为示例。

2）定义body样式，先定义整个页面的body的样式,代码如下：

以上代码的作用定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。

3）定义主要的div

采用固定宽度的三列布局(比自适应分辨率的设计简单，先实现简单的，增加点信心！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义：

注意：定义中列和右列div都采用了POSITION: absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。

这时候整个页面的代码是（红色部分替换为你的邮箱和姓名）：

这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是希望高度是满屏的，怎么办呢？

3）自适应高度

如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子：

大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？是因为我们在#header、#mainbox、#footer中使用了以下属性：margin:0px auto;按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。通过margin:auto我们就可以轻易地使层自动居中了。

重点在于#mainbox层嵌套了#menu、#sidebar、#content三个层。当#content 的内容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer 层就自动下移。这样就实现了高度的自适应。另外值得注意的是：#menu和

#content都是浮动在页面右面"FLOAT: right;"，#sidebar是浮动在#menu层的左面"FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。这个方法存在另一个问题，就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满(不能使用#mainbox的背景色，因为在Mozilla等浏览器中#mainbox的背景色失效)。

5.4动手试一试

1)新建一个html页面；

2) 制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标

出区域即可。提示：可以借鉴Dreamweaver 中提供“入门页面”。

3) 现在基本掌握了DIV+CSS 布局的方式，对CSS 也有了一定的了解。可以

对实验三建立的网站进一步规范，采用DIV+CSS 的布局方式。为了得到更好的效果，需要美工的基础，可是我们不会PS ，不会flash 怎么办？没关系，可以利用网络上一些现成的绚丽模版（例如：

https://www.wendangku.net/doc/202546255.html,/），大家可以在网络上搜索自己喜欢的模版，构建绚丽的属于自己的站点。

6 实验报告要求

1) 详细写出需要自己动手做的实验内容的步骤；

2) 填写实验报告，将5.4要求的内容全部htm 文件、图片打包提交；

3) 提交文件名格式：班级号-学号-姓名-实验五.rar ；

7 实验注意事项

1) 看清实验指导书后再动手；

2) 按实验指导书动手做实验的过程中要勤于思考；

3) 实验中充分利用搜索引擎学习相关知识和解决问题，同时要掌握如何利

用高级搜索功能快速找到相关网页。

8思考题

大家经常浏览网站，那常见的页面布局你还知道哪些？

9扩展阅读

9.1CSS的十八般技巧

1）明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位。注意，不要在数值和单位之间加空格。

2）区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，建议所有的定义名称都采用小写。class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

3）取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID 在一个页面里是唯一的，而class可以在页面中多次使用。你限定某个元素毫无意义。例如：

可以写成

这样可以节省一些字节。

4）默认值

通常padding的默认值为0，background-color的默认值是transparent。但是

在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，像这样：

5）不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，像颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

6）最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码Update: Lorem ipsum dolor set 在CSS文件中，你已经定义了元素p，又定义了一个class"update"

p {

margin:1em 0;

font-size:1em;

color:#333;

}

.update {

font-weight:bold;

color:#600;

}

这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《Calculating a selector’s specificity》了解更多。

7）多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

在页面代码中，我们可以这样调用：

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

8）使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

这段代码的CSS定义是：

你可以用下面的方法替代上面的代码：

样式定义是：

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

9）不需要给背景图片路径加引号

为了节省字节，建议不要给背景图片路径加引号，因为引号不是必须的。例如：

可以写为

如果你加了引号，反而会引起一些浏览器的错误。

10）组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义，这可以节省不少字节。例如：定义所有标题的字体、颜色和margin，你可以这样写：

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

11）用正确的顺序指定链接的样式

当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确

的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

12）清除浮动

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

13）调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background 更加安全些。另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。提示：Firefox+FireBug是调试CSS与JavaScript 的利器。

9.2如何使页面居中？