Web课件第六章

《Web课件第六章》由会员分享，可在线阅读，更多相关《Web课件第六章（22页珍藏版）》请在装配图网上搜索。

1、Click to edit title style,,Click to edit Master text styles,,Second level,,Third level,,Fourth level,,Fifth level,,,*,第三章 表现层的,CSS (,续,),,,1.,网页布局,我们无法获知用户浏览器窗口的大小和高矮。用户可以用一个标准分辨率设置他们的浏览器填充，或者将他们设置为另一个舒适的尺寸。任何一个给定网页的精确尺寸都是一个未知数。,,另外，没有办法知道你的文本有多大。有的可能喜欢小的文本，但有的用户又会放大它。改变文本尺寸可能会影响你的网页布局。,,1.1,液态布局,液态

2、布局遵循普通流的默认行为，即，网页中的网页区域和栏允许变宽或变窄，从而填充浏览器窗口中的空间，文本允许按需要重新流动。,优势,劣势,不需要为具体的浏览器分辨率而设计。文本填满窗口，从而避免了潜在、笨拙的空白空间。,,在大的浏览器中，行长太长会不适合阅读。,,创建液态布局,通过指定百分比值宽度来创建液态布局。也可以设置为默认的,auto,，元素将填满窗口或其他容器元素的可用宽度。,,处理行长,行长：是一行文本中单词或字母个数的计量。,,,拇指规则：是指最佳行长为,10,到,12,个单词或,60,到,75,个字母。,,在液态布局中，当浏览器尺寸很宽时，行长可能过长,在固定布局中，如果宽度窄且固定的

3、行中文本字体,,尺寸很大，行长可能过短,,处理行长,在大多数情况下，用户浏览器的尺寸在适当范围内，即,800,到,1250,像素之间。,,如果网页有两栏或多栏，那么适当的浏览器宽度中行长失控的可能性不大。,,如果网页只有一栏，建议使用左、右的空白边（在,10%,到,20%,范围内），从而减短行长。,,还可以使用,max-width,属性来限制内容容器的宽度，但,IE6,及更早的版本不支持。,,1.2,固定布局,固定宽度布局：宽度固定在由设计师决定的具体像素上。,,当设置为具体宽度时，需要解决两件事：,,,1.,选择一个网页宽度，通常基于普通浏览器分辨率。,,,2.,决定宽度布局将处于浏览器窗口

4、的什么位置。,,,优势,劣势,布局可预计,,对行长提供更好的控制,,如果浏览器窗口比网页窄，右边的内容将被隐藏。,,如果用户调整字体尺寸，文本元素仍会重新流动，所以不能保证布局完全不变。,,文本字体尺寸非常大时，行长将会短的难用,,如何创建固定布局,通过用像素单位指定,width,属性，来创建固定宽度布局。,,典型地，把整个网页内容放到一个,div,元素中，然后设置,div,元素的具体像素的宽度值。,,1.3,弹性布局,弹性布局随着文本尺寸扩张或收缩。如果用户放大文本，包含它的盒子将同比例扩大；如果用户喜欢文本很小，容器盒子将通过收缩来适应：不管文本尺寸多少，行长（每行单词或字母数）保持不变。

5、,,,优势,劣势,允许文本尺寸适当变动，提供一致的布局体验。,,比液态和固定布局更严密地控制行长,图像不适合随着文本和布局的其他部分缩放。,,使用最大文本尺寸时布局的宽度可能超过浏览器窗口的宽度。,,如何创建弹性布局,弹性布局的关键是,em,，基于文本尺寸的计量单位。,,如果文本尺寸设置为,76%,（在多数浏览器中约等于,12,像素），网页设置为,40em,,结果网页宽度为,480,像素。如果用户放大文本到,24,像素，网页将变为,960,像素,,1.4,网页布局模板,使用浮动元素的多栏布局,,使用定位元素的多栏布局,,,1.4.1,使用浮动元素的多栏布局,创建栏的最流行方式是将一个元素浮动到

6、一边，让其他部分的内容环绕它，宽的空白边用来保持浮动栏周围的区域清晰。,,,1.4.1.1,有页脚的两栏布局,主要内容在源码文档中出现在附加内容之前，这样它可以被非图像浏览器用户首先访问。,,主要内容,div,浮动到左边，并设置宽度为网页的,60%,，应用,margin,属性浮动的,”,main”div,元素的左右方，来添加栏间空白。,,“,footer”div,被清除，这样它可以从浮动的主要内容栏下面开始摆放。,,“,extras”div,的右边添加,margin,属性来添加它与浏览器窗口间的空白。,,B,ody,元素的,margin,和,padding,属性设置为,0,，来清除默认的浏览器

7、设置。这样允许灰暗的页眉和页脚区域在浏览器窗口的正上边，而之间没有白色的缝隙。,,1.4.1.2,有页脚的三栏布局,文档中所有的内容元素都已经放在了应用了固定计量值宽度的,”container”,中。,,使用浮动时，元素出现在源码文档中的顺序很重要。这里需要将,”,links”div,移到,”,main”div,之前来保持样式表直观。,,本示例中给容器元素添加边框来显露它的边缘。,,样式表将,”,links”,”main”,”news”div,浮动到左边。它们靠着容器块累积，从而创建三栏。,,三个块的宽度和等于外围容器元素的宽度。,,确保,”,footer”div,从所有的浮动元素下面开始摆放

8、,,通过在它包含的元素（,h2,ul,p,等）中应用,padding,属性，在各个内容,div,里添加空白。,,使用定位元素的多栏布局,绝对定位能用来创建多栏网页，优势在于源码文档中的顺序并没有浮动方法中那么重要，元素盒子可以摆放到任何位置。劣势在于，要承担元素重叠和内容模糊的风险。,,在使用绝对定位时，应该记住定位的每个元素都会从普通流中移除。如果发现本应该放在网页下方的内容变得位置很高，那就是因为你定位了它上面所有“压制它”的元素（因此需要移除）,,1.4.2.1,有窄页脚的两栏布局,“,extras”div,元素倚靠着网页的右边，这个样式表绝对地定位,”,extras”div,元素于顶部

9、之下,100,像素，来给页眉元素留出空间。“,main”,右边的空白边的宽度足以容纳新的定位盒子。,,页眉的高度为,100,像素（,70,像素高度加,30,像素填充）,,30%,的右空白边给栏制造空间，包括,25%,的页栏距加,5%,的栏间距。,,“,extras”div,绝对定位于距浏览器右边,0,像素，顶部之下紧缺的,100,像素之处。,,应用于主要内容的,margin,属性也应用于页脚的,div,。这样防止页脚与长的侧栏重叠。,,1.4.2.2,三栏布局（窄页脚）,因为绝对定位依赖顺序，所以文档源码中第一个主要内容,div,可以出现在你喜欢的任何位置。,,本布局中，只有,”links”,

10、和,”,news”div,被定位。,,“links”,和,”,news”div,分别倚靠浏览器窗口的左边和右边定位。,,定位栏的宽度比主要内容,div,用来制造栏空间的空白边窄。,,页脚与主要内容栏有相同的空白边，来确保侧栏不与它重叠。,,1.4.2.3,带有栏间边界和填充的三栏布局,在这个布局中，固定布局的三栏全部是绝对定位。为了简单起见，本例中忽略页脚。因为绝对定位的元素会从文档流中完全移除，这时页脚会紧挨这也偷，显示在页头的下方。,,如果一定要采用绝对定位，那么必须预先知道这三栏中每一栏的高度，然后再根据其中最高的一栏定位页脚。若是任意一栏的文本长度无法确定的话，除了使用,javascr

11、ipt,，我们也只能放弃绝对定位的念头，而使用浮动定位。,,,内容全到容器部装入,”,container”div,中。,,三个被包含内容的,div,元素被绝对定位。,D,iv,元素的主要内容首先出现在源码文档中。,,“,container”div,有固定的宽度，它的位置与确定它为定位栏元素的容器块有关。,,三个内容,div,都在页眉下面绝对定位。,,左值（指到容器块区域左边缘的距离）与各个,div,的整个元素（包括空白边）的左边缘有关，不只针对内容区域。,,只要你添加,padding,，,margin,，,border,属性到固定宽度布局结构中，就需要做一些数学计算来确保元素宽加上所有附加部分的和不超过整个容器的宽度。,,1.5,居中的固定宽度网页,指定包含整个网页内容的,div,元素的宽度，然后设置左右边的,margin,属性为,auto.,,用负的,margin,属性值来有效地将网页中窗口块居中对齐。首先使容器块绝对定位，让它的左边跨越了浏览器窗口宽度的,50%,，然后应用负的,margin,属性将容器块向左拉回一半。,,