计算机网络与网页制作 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> body的留白 div的边距厂d的边框 <div> div的留白 h的边距/h的边框 <h1>h1的留白 级标题文本
<body> <div> <h1> 浏览器窗口 body的边距 body的留白 一级标题文本 div的边距 div的留白 h1的边距 h1的留白 body的边框 div的边框 h1的边框 5