《CSS与页面布局》PPT课件

《CSS与页面布局》PPT课件

ID:45085586

大小:890.50 KB

页数:26页

时间:2019-11-09

《CSS与页面布局》PPT课件_第1页
《CSS与页面布局》PPT课件_第2页
《CSS与页面布局》PPT课件_第3页
《CSS与页面布局》PPT课件_第4页
《CSS与页面布局》PPT课件_第5页
资源描述:

《《CSS与页面布局》PPT课件》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、学习内容:Css框模型相对定位绝对定位浮动和清理使用css设置页面布局到现在为止,已经学习了如何使用css格式化文本和颜色,现在学习如何使用css设置网页布局,这种技术称为css-p第5章网页样式表CSS———页面布局5.1.1CSS布局页面的优点1.网站浏览者的好处由于页面代码量减少,文件下载速度更快。同时,浏览器显示页面的速度也更快。由于清晰的语义结构,使得内容能被更多的用户(包括部分残障人士)所访问。由于实现了结构和表现相分离,内容能被更多的设备(包括手机、打印机等)所访问。由于样式文件的独立性,用户选择自己喜欢的界面变得更容易。5.1.1CSS布局页面的优点2.

2、网站拥有者的好处由于代码变得更简洁和组件用得更少,使得维护变得很容易。由于对带宽要求的降低,节约了成本。由于页面结构清晰的语义性,使得搜索引擎的搜索变得更容易。5.1.2CSS布局页面的基本思想CSS布局页面的基本思想,就是实现网页结构和表现相分离。内容、结构和表现是一个网页必不可少的组成部分,其中内容是页面传达信息的基础,表现使得内容的传达变得更加明晰和方便,而结构则是内容和表现之间的纽带,内容、结构和表现的具体含义如下所示。内容:是指网页实际要传达的信息,包括文本、图片、音乐、视频、数据、文档等。其中不包括修饰的图片、背景音乐等。网页文档中的每个元素都被视为一个矩形

3、框。如图,该矩形由环绕着内容区的填充(padding)、边框(border)和空白边(margin)组成的。5.2.1框模型内容:内容区域可以由文本和其他网页元素,如图片、段落、标题、列表等相互构成。网页上一个元素的可见宽度就是它的内容宽度、填充宽度和边框厚度的总和。填充:内容和边框之间的那部分区域。默认的填充值为0。边框:位于填充和空白边距之间。默认的边框值为0,且不显示。空白边:用于决定一个元素和任何其它相邻元素之间的空白间隔大小。空白边总是透明的.5.2.1框模型例1:下面显示一个网页,在上面是两个连续放置的

元素,浏览器使用了正常流,将元素按照它们在代码

4、中出现的顺序进行显示。5.2.1框模型例子:box1.htm例2:元素之间可以互相包含,矩形框之间也可以互相包含。5.2.1框模型例子:box2.htm5.3.1相对定位相对定位可以用于小幅修改某个元素的位置,使其显示在新位置上,即相对于正常流情况它应该出现的位置,通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。使用position:relative属性,加上left,right,top属性可以实现相对定位功能。如果将top设置为20px,那么框将在原位置顶部下面20像素的地方。如果left设置为30像素,那么会在元素左边创建30像素的空间,也就是将元素向

5、右移动。5.3css定位概述#mybox{position:relative;left:30px;top:20px;}5.3.1相对定位注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。绝对定位:用于某个元素在浏览器窗口中的确切位置(即绝对像素素位置)。绝对定位使元素的位置与文档流无关,因此不占据空间,普通文档流中的其它元素的布局就象绝对定位的元素不存在时一样。设置它用position:absolute属性,加上left、top属性。5.3.2绝对定位#box_absolute{position:absolute; le

6、ft:30px; top:20px;}5.3.2绝对定位5.3.2绝对定位注意:对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么是最初的包含块。(可能html元素是最初的包含块)例子:abs.htm浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。使用float属性来实现元素的浮动Float:left/right5.3.3浮动5.3.3浮动右浮动:

7、请看下图,当把框1向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:5.3.3浮动左浮动:当框1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框2,使框2从视图中消失。5.3.3浮动如果把所有三个框都向左移动,那么框1向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。5.3.3浮动如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。