复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）11 用CSS作页面布局

计算机网络与网页制作 Chapter11:用cSs作页面布局 复旦大学计算机学院 肖川 xiao@fudan edu cn 1

计算机网络与网页制作 Chapter 11：用CSS作页面布局 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

目标 *理解CSS的箱框模型 *创建Di及APDi *堆叠及重叠页面元素 *设定箱框内容的样式 *使用可视化助理调整页面元素位置

目标  理解CSS的箱框模型  创建Div及AP Div  堆叠及重叠页面元素  设定箱框内容的样式  使用可视化助理调整页面元素位置 2

效果 文件)编辑E)查看()收夹(A)工具(T帮助(H 新大陆手机商城 新大陆商用客户服务部成立于2005年,负责新大陆商城在 政府、教育、交通、军队、金融、电信、酒店/房地产 医疗、企事业单位用户的售前及售后服务业务。 商用客户的维修站全国有多少个? 客户服务部特点 新大陆商城在中国的服务中心约1,200个,其中商用客 户专门服务中心共计253个,涉及维修的产品包括打印 专门的维修服务中心 机,笔记本电脑,显示器,电视机,商用空调,以及数码 上门服务覆盖地市级城市 四个备件分配中心 什么是商用(B2B)客户售后服务? 商用客户售后服务是针对商用领域的客户所提供的,是与 般个人消费品售后区别化的服务。商用客户服务技术更 专业、更迅速、由专门的服务中心根据您的需求提供全方 位个性化服务

效果 3

1.cSs箱框模型 *CS把页面上每个元素看作一个虚拟方框 *每个虚拟矩形框充当一个容器,用于容纳 文本、图像、媒体及表格,并在页面上占 据一定区域。 *每个虚拟矩形框可设定自己的留白、边距 及边框。 *箱框模型是嵌套的。浏览器窗口是最大的 箱框,而bod标签对应的箱框是页面中所 有其他元素的根容器

1. CSS箱框模型  CSS把页面上每个元素看作一个虚拟方框。  每个虚拟矩形框充当一个容器，用于容纳 文本、图像、媒体及表格，并在页面上占 据一定区域。  每个虚拟矩形框可设定自己的留白、边距 及边框。  箱框模型是嵌套的。浏览器窗口是最大的 箱框，而body标签对应的箱框是页面中所 有其他元素的根容器。 4

浏览器窗口 body的边距 body的边框 body的留白 div的边距厂d的边框 div的留白 h的边距/h的边框 h1的留白 级标题文本

浏览器窗口 body的边距 body的留白 一级标题文本 div的边距 div的留白 h1的边距 h1的留白 body的边框 div的边框 h1的边框 5

每个HTM标签具有的样式属性 *边距指围绕箱框的透明区域,包括上、下、左、 右边距。四个边距可以设置不同值。边距的默认 值不等于O *body的边距就决定了页面本身的边界 留白指箱框的边框与其内容之间的透明区域,包 括上、下、左、右留白。亦可设置四个不同值。 留白的默认值等于O。 *箱框的边框(或边界)位于箱框的边距区与留白 区之间,包括上、下、左、右边框,定义了箱框 的界线。边框默认是透明的,你可以分别设定每 个边框的宽度、颜色以及样式

每个HTML标签具有的样式属性  边距指围绕箱框的透明区域，包括上、下、左、 右边距。四个边距可以设置不同值。边距的默认 值不等于0。  body的边距就决定了页面本身的边界。  留白指箱框的边框与其内容之间的透明区域，包 括上、下、左、右留白。亦可设置四个不同值。 留白的默认值等于0。  箱框的边框（或边界）位于箱框的边距区与留白 区之间，包括上、下、左、右边框，定义了箱框 的界线。边框默认是透明的，你可以分别设定每 个边框的宽度、颜色以及6 样式

Di标签与页面布局 *一个Dv标签自身是不会产生任何显示效果的,除 非你用CSS规则专门为其作了设定。Di标签的边 距、留白、边框默认值为O。 *页面内的Dⅳ标签将在页面内设定区域,之后你把 页面内容如文本、图像等直接放在这个区域内。 *“绘制APDⅳv”功能可创建精确定位的箱框 *通常页面内不同的位置有不同的样式,因此非常 适合使用D及对应的DCSS规则,当然也不排除 对D使用类CSS规则

Div标签与页面布局  一个Div标签自身是不会产生任何显示效果的，除 非你用CSS规则专门为其作了设定。Div标签的边 距、留白、边框默认值为0。  页面内的Div标签将在页面内设定区域，之后你把 页面内容如文本、图像等直接放在这个区域内。  “绘制AP Div”功能可创建精确定位的箱框。  通常页面内不同的位置有不同的样式，因此非常 适合使用Div及对应的ID CSS规则，当然也不排除 对Div使用类CSS规则。 7

2.Dv与 AP DiV *APDⅳ在设计视图内可以被随意拖动以及手工调整大小 *Dⅳv在设计视图内不能拖动,也不能手工调整大小 *通过修改D的CSS属性 position的值( absolute或 relative), 使得APDv与Di可以相互转化 # container的CSs规则定义 Position(P))absolute Visibility Width Cw) Z-Index (z) Height a) Overflow F) Placement Top(0): Right ( R) (G) Bottom (B) Left L): 96 Left o) 帮助00 匚确定取消应用0

2. Div 与 AP Div  AP Div在设计视图内可以被随意拖动以及手工调整大小  Div在设计视图内不能拖动，也不能手工调整大小。  通过修改Div的CSS属性position的值(absolute或relative)， 使得AP Div与Div可以相互转化。 8

APDv与Div的主要区别1 *绝对定位的元素脱离了HTML内容的正常秩 序,它不考虑周围的元素(如周围的文本 相邻的Div),它总是准确地出现在为它指 定的坐标上。 aP DiV的“Z轴”属性用于解 决堆叠问题。 *一个被设为“相对定位”的元素会考虑相 邻HTML内容的正常秩序

AP Div与Div的主要区别(1)  绝对定位的元素脱离了HTML内容的正常秩 序，它不考虑周围的元素（如周围的文本、 相邻的Div），它总是准确地出现在为它指 定的坐标上。AP Div的“Z轴”属性用于解 决堆叠问题。  一个被设为“相对定位”的元素会考虑相 邻HTML内容的正常秩序。 9

APDv与Div的主要区别(2) *当使用“绘制APDv”作版面设计时, Dreamweaver自动地创建|DCSS规则,它设 定了应用于特定箱框的样式信息,包括 置、宽度、高度等。 *当使用“插入Di标签”作版面设计时, Dreamweaver要求你为每个箱框创建或指派 个DCSS规则

AP Div与Div的主要区别(2)  当使用“绘制AP Div”作版面设计时， Dreamweaver自动地创建ID CSS规则，它设 定了应用于特定箱框的样式信息，包括位 置、宽度、高度等。  当使用“插入Div标签”作版面设计时， Dreamweaver要求你为每个箱框创建或指派 一个ID CSS规则。 10