1

计算机网络与网页制作Chapter 12 ：页面布局高级技术

复旦大学计算机学院

肖川cxiao@fudan.edu.cn

目标 使用 CSS 的“浮动”属性 使用 CSS 为不同的页面设置不同的布局 display:none 属性的应用

2

3

效果

4

1. 使一个图像浮动 1. 菜单 插入 >> 图像，将图像 i9100.jpg 添加至 about.html 2. 在“ CSS 样式”面板内新建一个类 CSS 规则 .floatimage 。 3. 在“属性”面板内设置图像所用的“类”规则。 选中

.floatimage项

5

效果

6

修改 Float 属性及其效果

7

2. 使用 Div 把页面分区 把标题区 Div 改成相对定位 Div 。

8

插入 Div 作为页面的不同区域 面板 插入 >> 布局 >> 插入 Div 标签，依次插入

navigation Div main Div sidebar Div footer Div

每一次插入在上一个 Div 的标签之后

9

修改导航栏外观 面板 CSS 样式 >> 新建 CSS 规则， #navigation

由于 Div 已经设置ID ，所以新建的 ID CSS 规则自动作用于相同 ID 的 Div 。

10

修改页脚区的背景色 面板 CSS 样式 >> 新建 CSS 规则， #footer

由于 Div 已经设置ID ，所以新建的 ID CSS 规则自动作用于相同 ID 的 Div 。

11

3. 设置主栏区的宽度并浮动 新建名为“ #main” 的 ID CSS 规则。

12

往主栏区填充内容 复制 main_content.html 的内容。

13

4. 设置侧栏区并填充内容 1. 新建名为“ #sidebar” 的 ID CSS 规则。 2. 复制 features.html 的内容。

14

5. 让 footer 区位于下方 修改名为“ #footer” 的 ID CSS 规则。

已有 #footer 规则这个设置值的含义是“不允许浮动元素出现在我的任何一边”

15

6. 创建一个基于列表的导航栏 删除 ( 或选中 ) 占位符文字，菜单 插入 >>HTML>> 文本对象 >> 项目列表，输入列表项文字。列表项之间用【 Enter 】分隔。

为每个条目设置超链接：选中每个条目的文字，菜单 插入>> 超级链接，

16

使列表条目变成水平排列 在“ CSS 样式”面板新建名为“ #navigation ul li”( 或“ #navigation li”) 的 CSS 规则。

17

设置链接的外观和位置 在“ CSS 样式”面板新建名为“ #navigation a”( 或“ #navigation ul li a”) 的 CSS 规则。

使得链接的可点击区域不限于文字，而是链接的箱框 ( 或方框 ) 。

这个间隙是列表<ul> 的默认上边距造成的，左侧间隙是列表 <ul> 的默认左留白造成的。左侧间隙

18

删除导航栏的间隙 在“ CSS 样式”面板新建名为“ #navigation ul” 的

CSS 规则。

19

增加导航链接的易用性 在 “ CSS 样 式 ” 面 板 新 建 名 为 “ #navigation

a:hover” 的 CSS 规则。

20

7. 改变栏区的布局 把 #main 的 Float 属性改成 left ， #sidebar 的 Float属性改成 right 。

sidebar Div

main Div

21

8. 修改页面的总体宽度 把 #container 的 Width 属性值改成 840 ， Height 属性值设为空

( 以便容器更好地适应所容纳的内容 ) 。 把 #header 的 Width 属性值也改成 840 ， 把 #main 的 Width 属性值改成 520 。

间隔 50px=840-520-270 ，若间隔为负数，则破坏页面布局。

22

9. 创建相同高度的栏区 为侧栏区添加背景色使得栏区高度不一致的问题更加突出。

23

用背景图像模拟等高栏区的效果这种模拟方法依赖于容器及栏区的固定宽度。

24

增加主栏区的留白

增加留白属性值将自动增加 Div 的总体宽度，故此处间隔缩小。为了避免可能的布局问题，更倾向于为 Div 内部的元素，如段落、列表等添加边距。

25

10. 使用模板创建预设布局的页面 菜单 文件 >> 新建

26

小结 插入 Div

设置 Div ID 设定 Div 的样式 ( 高度、宽度、背景色、字体、留白、… )

新建类 CSS 规则，手工指定 Div 的“类”规则 新建 ID CSS 规则，自动作用于同名 Div 新建复合内容 CSS 规则，自动作用于对应元素

Float 属性 Clear 属性 创建水平导航栏 模拟等高栏区的效果

注： HTML 页面元素的外观、格式等都是通过CSS 样式来控制。要改变在属性面板内修改某个选项值的思维定势。