CSS与页面布局.ppt

学习内容 Css框模型相对定位绝对定位浮动和清理使用css设置页面布局到现在为止 已经学习了如何使用css格式化文本和颜色 现在学习如何使用css设置网页布局 这种技术称为css p 第5章网页样式表CSS 页面布局 5 1 1CSS布局页面的优点 1 网站浏览者的好处由于页面代码量减少 文件下载速度更快 同时 浏览器显示页面的速度也更快 由于清晰的语义结构 使得内容能被更多的用户 包括部分残障人士 所访问 由于实现了结构和表现相分离 内容能被更多的设备 包括手机 打印机等 所访问 由于样式文件的独立性 用户选择自己喜欢的界面变得更容易 5 1 1CSS布局页面的优点 2 网站拥有者的好处由于代码变得更简洁和组件用得更少 使得维护变得很容易 由于对带宽要求的降低 节约了成本 由于页面结构清晰的语义性 使得搜索引擎的搜索变得更容易 5 1 2CSS布局页面的基本思想 CSS布局页面的基本思想 就是实现网页结构和表现相分离 内容 结构和表现是一个网页必不可少的组成部分 其中内容是页面传达信息的基础 表现使得内容的传达变得更加明晰和方便 而结构则是内容和表现之间的纽带 内容 结构和表现的具体含义如下所示 内容 是指网页实际要传达的信息 包括文本 图片 音乐 视频 数据 文档等 其中不包括修饰的图片 背景音乐等 网页文档中的每个元素都被视为一个矩形框 如图 该矩形由环绕着内容区的填充 padding 边框 border 和空白边 margin 组成的 5 2 1框模型 内容 内容区域可以由文本和其他网页元素 如图片 段落 标题 列表等相互构成 网页上一个元素的可见宽度就是它的内容宽度 填充宽度和边框厚度的总和 填充 内容和边框之间的那部分区域 默认的填充值为0 边框 位于填充和空白边距之间 默认的边框值为0 且不显示 空白边 用于决定一个元素和任何其它相邻元素之间的空白间隔大小 空白边总是透明的 5 2 1框模型 例1 下面显示一个网页 在上面是两个连续放置的元素 浏览器使用了正常流 将元素按照它们在代码中出现的顺序进行显示 5 2 1框模型 例子 box1 htm 例2 元素之间可以互相包含 矩形框之间也可以互相包含 5 2 1框模型 例子 box2 htm 5 3 1相对定位相对定位可以用于小幅修改某个元素的位置 使其显示在新位置上 即相对于正常流情况它应该出现的位置 通过设置垂直或水平位置 让这个元素 相对于 它的起点进行移动 使用position relative属性 加上left right top属性可以实现相对定位功能 如果将top设置为20px 那么框将在原位置顶部下面20像素的地方 如果left设置为30像素 那么会在元素左边创建30像素的空间 也就是将元素向右移动 5 3css定位概述 mybox position relative left 30px top 20px 5 3 1相对定位 注意 在使用相对定位时 无论是否进行移动 元素仍然占据原来的空间 因此 移动元素会导致它覆盖其它框 绝对定位 用于某个元素在浏览器窗口中的确切位置 即绝对像素素位置 绝对定位使元素的位置与文档流无关 因此不占据空间 普通文档流中的其它元素的布局就象绝对定位的元素不存在时一样 设置它用position absolute属性 加上left top属性 5 3 2绝对定位 box absolute position absolute left 30px top 20px 5 3 2绝对定位 5 3 2绝对定位 注意 对于定位的主要问题是要记住每种定位的意义 相对定位是 相对于 元素在文档流中的初始位置 而绝对定位是 相对于 最近的已定位祖先元素 如果不存在已定位的祖先元素 那么是最初的包含块 可能html元素是最初的包含块 例子 abs htm 浮动的框可以向左或向右移动 直到它的外边缘碰到包含框或另一个浮动框的边框为止 由于浮动框不在文档的普通流中 所以文档的普通流中的块框表现得就像浮动框不存在一样 使用float属性来实现元素的浮动Float left right 5 3 3浮动 5 3 3浮动 右浮动 请看下图 当把框1向右浮动时 它脱离文档流并且向右移动 直到它的右边缘碰到包含框的右边缘 5 3 3浮动 左浮动 当框1向左浮动时 它脱离文档流并且向左移动 直到它的左边缘碰到包含框的左边缘 因为它不再处于文档流中 所以它不占据空间 实际上覆盖住了框2 使框2从视图中消失 5 3 3浮动 如果把所有三个框都向左移动 那么框1向左浮动直到碰到包含框 另外两个框向左浮动直到碰到前一个浮动框 5 3 3浮动 如果包含框太窄 无法容纳水平排列的三个浮动元素 那么其它浮动块向下移动 直到有足够的空间 如果浮动元素的高度不同 那么当它们向下移动时可能被其它浮动元素 卡住 例子 float htm 5 3 4清理浮动 浏览器按照正常流来显示浮动元素 然后将它们转移到所在容器的左侧或右侧最远端 其他内容将环绕在悬浮元素的周围 要停止这种环绕 使用clear属性 clear的属性值可以是left right both或none 它表示框的哪些边不应该挨着浮动框 5 3 4清理浮动 例子 float3 htm 例子 float2 htm 为了实现这种效果 在被清理的元素的上外边距上添加足够的空间 使元素的顶边缘垂直下降到浮动框下面 5 4 1display属性 有些xhtml元素 如段落 标题 是区块元素 Div也是一个区块元素 浏览器在属于这些元素的行中开始和结束对他们的显示 形成一个个的区块 其它元素 比如锚标记则以内联的方式进行显示 在它们的前面和后面没有换行 display属性用于设置一个元素是否显示并以何种方式显示 display none让元素不显示display block元素当作区块元素进行显示display inline元素当作行内元素进行显示 例子 homepage htm 5 4 2Z index属性 绝对定位的框与文档流无关 所以它们可以覆盖页面上的其他元素 可以用z index修改元素在网页上的叠放次序 默认的值为0 如果多个元素出现在页面的相同位置上 z index值较大的元素将放在值小的元素上面 5 5页面布局 所有的设计第一步就是构思 以下是构思好的布局图 5 5页面布局 据构思图来规划一下页面的布局 仔细分析一下该图 图片大致分为以下几个部分 1 顶部部分 其中又包括了LOGO MENU和一幅Banner图片 2 内容部分又可分为侧边栏 主体内容 3 底部 包括一些版权信息 有了以上的分析 就可以很容易的布局了 设计层如下图 5 5页面布局 根据上图 画一个实际的页面布局图 说明一下层的嵌套关系 这样理解起来就会更简单了 5 5页面布局