CSS与页面布局

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,学习内容：,Css,框模型,相对定位,绝对定位,浮动和清理,使用,css,设置页面布局,到现在为止，已经学习了如何使用,css,格式化文本和颜色，现在学习如何使用,css,设置网页布局，这种技术称为,css-p,第,5,章,网页样式表,CSS,页面布局,5.1.1 CSS,布局页面的优点,1,网站浏览者的好处,由于页面代码量减少，文件下载速度更快。同时，浏览器显示页面的速度也更快。,由于清晰的语义结构，使得内容能被更多的用户（包括部分残障人士）所访问。,由于实现了结构和表现相分离，内容能被更多的设备（包括手机、打印机等）所访问。,由于样式文件的独立性，用户选择自己喜欢的界面变得更容易。,5.1.1 CSS,布局页面的优点,2,网站拥有者的好处,由于代码变得更简洁和组件用得更少，使得维护变得很容易。,由于对带宽要求的降低，节约了成本。,由于页面结构清晰的语义性，使得搜索引擎的搜索变得更容易。,5.1.2 CSS,布局页面的基本思想,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.3,css,定位概述,#,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.1 display,属性,有些,xhtml,元素（如段落、标题）是区块元素。,Div,也是一个区块元素。浏览器在属于这些元素的行中开始和结束对他们的显示,形成一个个的区块,。,其它元素，比如锚标记则以内联的方式进行显示（在它们的前面和后面没有换行）。,display,属性用于设置一个元素是否显示并以何种方式显示。,display:none,让元素,不显示,display:block,元素当作区块元素进行显示,display:inline,元素当作行内元素进行显示,例子：,homepage.htm,5.4.2 Z-index,属性,绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，可以用,z-index,修改元素在网页上的叠放次序。默认的值为,0,。如果多个元素出现在页面的相同位置上，,z-index,值较大的元素将放在值小的元素上面。,5.,5,页面布局,所有的设计第一步就是构思，以下是构思好的布局图：,5.,5,页面布局,据构思图来规划一下页面的布局，仔细分析一下该图，图片大致分为以下几个部分：,1,、顶部部分，其中又包括了,LOGO,、,MENU,和一幅,Banner,图片；,2,、内容部分又可分为侧边栏、主体内容；,3,、底部，包括一些版权信息。有了以上的分析，就可以很容易的布局了，设计层如下图,:,5.,5,页面布局,根据上图，画一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。,5.,5,页面布局,DIV,结构如下：,body ,/*,这是一个,HTML,元素，具体就不说明了*,/,#Container ,/*,页面层容器*,/,#Header ,/*,页面头部*,/,#PageBody ,/*,页面主体*,/,#Sidebar ,/*,侧边栏*,/,#MainBody ,/*,主体内容*,/,#Footer ,/*,页面底部*,/,页面布局与规划已经完成，接下来我们要做的就是开始书写,HTML,代码和,CSS,。,