第11章 使用CSS样式完成网页布局.ppt

1、第十一章,HTML与CSS前台页面设计,使用CSS样式完成网页布局,第十一章 使用CSS样式完成网页布局,HTML与CSS前台页面设计,本章要点 网页居中的实现方式 基于FLOAT的网页布局的实现方式 图文混排复杂布局的的实现方式,第十一章 使用CSS样式完成网页布局,HTML与CSS前台页面设计,目录： 11.1 CSS网页布局介绍 11.2 网页居中 11.3 基于FLOAT的网页布局 11.4 复杂布局 11.5 综合实例,1. CSS网页布局的意义 用CSS进行网页布局使网站的信息更丰富、网页表现更美观，意义体现在如下方面： （1）使页面载入得更快 （2）修改设计时更有效率 （3）保持

2、一致性 （4）对浏览者和浏览器更具亲和力,11.1 CSS网页布局介绍,2. CSS盒模型 W3C组织建议把所有网页上的对象都放在一个盒(box)中，可以通过创建定义来控制这个盒的属性。盒模型主要定义四个区域：内容(content)、填充(padding)、边界(border)和边距(margin)。margin，padding，content，border之间的层次相互影响。,11.1 CSS网页布局介绍,3. CSS网页布局的基本思路 用CSS进行网页布局时，主要考虑的是页面内容的语义和结构，因为一个用CSS控制的网页，在做好网页后，还可以轻松的调整网页风格。用CSS进行布局的一个目的是让

3、代码易读，区块分明，强化代码重用，所以结构很重要。,11.1 CSS网页布局介绍,1.自动空白边居中设计 以固定宽度的一列布局代码为例，为其增加居中的CSS样式，主要是要对margin属性进行设置： margin:0px auto; margin属性用于控制对象的上、右、下、左四个方向的外边距，当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。,11.2 网页居中,2.定位居中设计 使用自动空白边进行居中的方法是最常用的，但也可以使用定位和负值空白边来实现居中对齐的效果。 首先定义容器的宽度 。 然后将容器的position属性设置为absolute，将left属性

4、设置为50%。这会把容器的左边缘定位在页面的中间，但需要的是让容器居中。所以需要对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半，这会把容器向左边移动它的宽度的一半，从而让它在页面上居中。,11.2 网页居中,基于float的网页布局是设定希望定位的元素的宽度，然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的空间，就不再对包围它们的边框产生影响，因此需要对布局中各个点上的浮动元素进行清理。 1. 两列布局 要想使用float创建两列布局，首先需要有一个基本的框架。在下面的示例中，HTML页面由头部区域、主页面区域和的页脚组成。其中主页面区域分成左右两列，左列用作导航页面，右列

5、用作显示页面。主页面区域就是用float实现的两列布局。整个设计放置在一个div中，这个div使用前面介绍的方法进行水平居中。,11.3 基于FLOAT的网页布局,2. 多列布局 一种方法是在设置两列布局时，左右两列的宽带之和不占满整个父容器，然后再放入第三列，会浮动到空余的空间，就是中间位置，这样就可以实现三列布局了。 另外一种方法是在刚才两列布局中的右边列的div中再添加firstright和secondright这两个新的div，将右边列再分成两列。 接着可以使用与两列布局相同的样式进行设置，即为新增加的每个列设置相应的宽度和高度，然后将firstright列向左浮动，将secondri

6、ght列向右浮动。本质上就是将右边的列再分成两列，形成三列的效果。,11.3 基于FLOAT的网页布局,3. 多列布局 一种方法是在设置两列布局时，左右两列的宽带之和不占满整个父容器，然后再放入第三列，会浮动到空余的空间，就是中间位置，这样就可以实现三列布局了。 另外一种方法是在刚才两列布局中的右边列的div中再添加firstright和secondright这两个新的div，将右边列再分成两列。 接着可以使用与两列布局相同的样式进行设置，即为新增加的每个列设置相应的宽度和高度，然后将firstright列向左浮动，将secondright列向右浮动。本质上就是将右边的列再分成两列，形成三列的

7、效果。,11.3 基于FLOAT的网页布局,1. 动态布局 动态布局时，主体部分尺寸是用百分数而不是像素设置的，因此可以自适应用户的分辨率。这使动态布局能够相对于浏览器窗口进行伸缩。随着浏览器窗口变大，列变宽。相反。随着窗口变小，列的宽度减小。合适的动态布局，会使页面在大屏幕、小屏幕上都能得到良好的表现。,11.4 复杂布局,2. 弹性布局 弹性布局用相对字号来设置元素的宽度。使用em为单位设置宽度，可以确保在字号增加时整个布局随之扩大。这可以将行长保持在可阅读的范围。应用恰当的弹性布局对用户十分友好，页面中所有元素可以缩放。,11.4 复杂布局,3. 动态-弹性混合布局 可以组合弹性和动态技

8、术来创建混合布局。这种混合方式以em设置宽度，然后用百分数设置最大宽度。在支持max-width的浏览器上，这个布局将随着字号伸缩，但是决不会超过窗口的宽度。,11.4 复杂布局,4. 动态和弹性图像 如果选择使用动态或弹性布局，那么固定宽度的图像就会对设计产生的影响。当布局的宽度减小时，图像会移动，可能相互产生影响，图像会以自然的最小宽度显示，从而影响某些元素的尺寸减小。有些图像会超出包含它们的元素，从而破坏调整过的设计。有几个办法可以避免这些问题。 （1）对于需要跨越大区域的图像，可以考虑使用背景图像而不是图像元素。 （2）如果图像需要作为页面上的图像元素，那么将容器元素的宽度设置为100%并且将overflow属性设置为hidden。 （3）可以将图像元素添加到没有设置任何尺寸的页面上。然后设置图像的百分数宽度，并且添加与图像宽度相同的max-width以避免像素失真(pixelization) 。,11.4 复杂布局,5. 伪列布局 伪列布局方法是在一个父层的元素(比如一个容器div)上应用重复的背景图像，这个背景图就是为了体现左侧层的高度，因为父对象是会被高的那一列撑高的。faux列这个术语来描述这种技术。 对于固定宽度的两列布局，只需在