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

《使用CSS样式完成网页布局.ppt》由会员分享，可在线阅读，更多相关《使用CSS样式完成网页布局.ppt（18页珍藏版）》请在金锄头文库上搜索。

1、HTML与CSS前台页面设计第十一章HTML与CSS前台页面设计使用CSS样式完成网页布局http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ ht

2、tp:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/HTML与CSS前台页面设计第十一章 使用CSS样式完成网页布局HTML与CSS前台页面设计本章要点网页居中的实现方式基于FLOAT的网页布局的实现方式图文混排复杂布局的的实现方式http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ ht

3、tp:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/

4、http:/ http:/http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/

5、www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/HTML与CSS前台页面设计第十一章 使用CSS样式完成网页布局HTML与CSS前台页面设计目录：11.1 CSS网页布局介绍11.2 网页居中11.3 基于FLOAT的网页布局11.4 复杂布局11.5 综合实例http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ http:/ http:/ htt

6、p:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/HT

7、ML与CSS前台页面设计1. CSS网页布局的意义 用CSS进行网页布局使网站的信息更丰富、网页表现更美观，意义体现在如下方面： （1）使页面载入得更快 （2）修改设计时更有效率（3）保持一致性（4）对浏览者和浏览器更具亲和力 11.1 CSS网页布局介绍 HTML与CSS前台页面设计2. CSS盒模型 W3C组织建议把所有网页上的对象都放在一个盒(box)中，可以通过创建定义来控制这个盒的属性。盒模型主要定义四个区域：内容(content)、填充(padding)、边界(border)和边距(margin)。margin，padding，content，border之间的层次相互影响。11.

8、1 CSS网页布局介绍 http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/w

9、ww.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/HTML与CSS前台页面设计3. CSS网页布局的基本思路 用CSS进行网页布局时，主要考虑的是页面内容的语义和结构，因为一个用CSS控制的网页，在做好网页后，还可以轻松的调整网页风格。用CSS进行布局的一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。 11.1 CSS网页布局介绍 http:/www.ort- http:/ http:/ http:/ http:/ http:/w

10、ww.light- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ ht

11、tp:/ http:/ http:/ http:/ http:/ http:/HTML与CSS前台页面设计1.自动空白边居中设计 以固定宽度的一列布局代码为例，为其增加居中的CSS样式，主要是要对margin属性进行设置：margin:0px auto;margin属性用于控制对象的上、右、下、左四个方向的外边距，当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。 11.2 网页居中 HTML与CSS前台页面设计2.定位居中设计 使用自动空白边进行居中的方法是最常用的，但也可以使用定位和负值空白边来实现居中对齐的效果。首先定义容器的宽度。然后将容器的position

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

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

14、即为新增加的每个列设置相应的宽度和高度，然后将firstright列向左浮动，将secondright列向右浮动。本质上就是将右边的列再分成两列，形成三列的效果。 11.3 基于FLOAT的网页布局 http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/

15、www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/HTML与CSS前台页面设计3. 多列布局 一种方法是在设置两列布局时，左右两列的宽带之和不占满整个父容器，然后再放入第三列，会浮动到空余的空间，就是中间位置，这样就可以实现三列布局了。 另外一种方法是在刚才两列布局中的右

16、边列的div中再添加firstright和secondright这两个新的div，将右边列再分成两列。 接着可以使用与两列布局相同的样式进行设置，即为新增加的每个列设置相应的宽度和高度，然后将firstright列向左浮动，将secondright列向右浮动。本质上就是将右边的列再分成两列，形成三列的效果。 11.3 基于FLOAT的网页布局 HTML与CSS前台页面设计1. 动态布局 动态布局时，主体部分尺寸是用百分数而不是像素设置的，因此可以自适应用户的分辨率。这使动态布局能够相对于浏览器窗口进行伸缩。随着浏览器窗口变大，列变宽。相反。随着窗口变小，列的宽度减小。合适的动态布局，会使页面在

17、大屏幕、小屏幕上都能得到良好的表现。 11.4 复杂布局 HTML与CSS前台页面设计2. 弹性布局 弹性布局用相对字号来设置元素的宽度。使用em为单位设置宽度，可以确保在字号增加时整个布局随之扩大。这可以将行长保持在可阅读的范围。应用恰当的弹性布局对用户十分友好，页面中所有元素可以缩放。 11.4 复杂布局 http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/

18、http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/HTML与CSS前台页面设计3. 动态-弹性混合布局 可以组合弹性和动态技术来创建混合布局。这种混合方式以em

19、设置宽度，然后用百分数设置最大宽度。在支持max-width的浏览器上，这个布局将随着字号伸缩，但是决不会超过窗口的宽度。 11.4 复杂布局 HTML与CSS前台页面设计4. 动态和弹性图像 如果选择使用动态或弹性布局，那么固定宽度的图像就会对设计产生的影响。当布局的宽度减小时，图像会移动，可能相互产生影响，图像会以自然的最小宽度显示，从而影响某些元素的尺寸减小。有些图像会超出包含它们的元素，从而破坏调整过的设计。有几个办法可以避免这些问题。 （1）对于需要跨越大区域的图像，可以考虑使用背景图像而不是图像元素。（2）如果图像需要作为页面上的图像元素，那么将容器元素的宽度设置为100%并且将o

20、verflow属性设置为hidden。 （3）可以将图像元素添加到没有设置任何尺寸的页面上。然后设置图像的百分数宽度，并且添加与图像宽度相同的max-width以避免像素失真(pixelization) 。11.4 复杂布局 HTML与CSS前台页面设计5. 伪列布局 伪列布局方法是在一个父层的元素(比如一个容器div)上应用重复的背景图像，这个背景图就是为了体现左侧层的高度，因为父对象是会被高的那一列撑高的。faux列这个术语来描述这种技术。 对于固定宽度的两列布局，只需在容器元素上应用一个垂直重复的背景图像，其宽度与left列相同，但是，这一次重复的背景图像需要跨越容器的整个宽度，其中包含

21、两列。按照与前面一样的方式应用这个图像，就会形成faux三列效果。 11.4 复杂布局 HTML与CSS前台页面设计11.5 综合实例 http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ h

22、ttp:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/HTML与CSS前台页面设计使用CSS样式完成网页布局第十一章本章结束http:/www.ort- http:/ http:/ http:/ http:/ http:/www.light- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/ http:/www.ntn- http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/