《HTML5与CSS3网页设计》_《HTML5与CSS3网页设计》_HTML5 与CSS5 网页设计（第二版）第九章.pptVIP

图9-10宽度活当并居中的网页(一)返回图9-11宽度活当并居中的网页(二)返回图9-15图文环绕返回图9-16多栏布局返回图9-20使用float属性进行布局返回图9-21使用column-count属性设置多栏布局返回图9-22使用盒布局返回图9-23自适应宽度的弹性盒布局返回图9-24在不同宽度浏监器窗口中的显示返回图9-25改变元素的显示顺序返回图9-26改变元素的排列方向返回图9-27综合实例的页面效果返回第9章使用CSS进行页面布局9.1Web页面布局简介9.2CSS盒模型9.3网页居中9.4多栏布局9.5盒布局9.6弹性盒布局9.7综合实例返回9.1Web页面布局简介9.1.1布局注意事项1.内容与样式分离作为最佳实践，应始终保持内容(HTML)与样式(CSS)分离。第5章介绍了如何通过外部样式表实现这一点。如果对所有的页面都这样做，就可以共享相同的布局和整体样式，这也让日后修改整个网站的设计变得更加容易—只修改CSS文件就可以了。2.浏览器注意事项有时，有必要针对IE的特定版本编写CSS样式规则，以修复IE的异常行为引起的问题。有几种办法可以实现上述要求，不过从性能上说，最好的方法是使用条件注释在html元素上创建IE版本特有的类，并在样式表中应用这个类。另一种方法是使用条件注释引入位于单独样式下一页返回9.1Web页面布局简介表中的IE补丁。9.1.2布局方法1.固定(fixed)布局对于固定布局，整个页面和每一栏都有基于像素的宽度。2.流式(fluid或liquid)布局流式布局使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小。3.弹性布局弹性布局对宽度和其他所有属性的值都使用em，从而让页面根据用户的font-size设置进行缩放。上一页下一页返回9.1Web页面布局简介9.1.3布局结构1.“同”字型布局所谓“同”字型结构就是指页面顶部为“网站标志+广告条+主菜单”，下方左侧和右侧为二级栏目条或链接栏目条，屏幕中间显示具体内容的布局，如图9-1所示。2.“国”字型布局“国”字型布局是在“同”字型布局的基础上演化而来的，在保留“同”字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型。一般最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的基本信息、联系方式、版权声明等，上一页下一页返回9.1Web页面布局简介如图9-2所示。3.T”字型布局这是一个形象的说法，是指页面的顶部是“网站标志+广告条”，左侧(或右侧)是主菜单，右侧(或左侧)是主要内容。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法;缺点是如果不注意细节上的色彩会导致页面呆板，很容易让人觉得乏味，如图9-3所示。4.“三”字型布局这种布局多见于国外站点，国内网站用得不多。其特点是在页面上有横向两条(或多条)色块，将页面分割为三部分(或更多)，色块中大多放广告条、更新和版权提示，如图9-4所示。上一页下一页返回9.1Web页面布局简介5.对比布局顾名思义，这种布局采取左右或者上下对比的方式:一半深色，一半浅色。其优点是视觉冲击力强;缺点是将两部分有机地结合比较困难，如图9-5所示。6.POP布局POP引自广告术语，是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。如图9-6所示。7.Flash布局这种布局是指整个或大部分网页本身就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。如图9-7所示。上一页返回9.2CSS盒模型CSS在处理网页时，它认为每个元素都包含在一个不可见的盒子里。盒子有内容区域、内容区域周围的空间(内边距padding)、内容边距的外边缘(边框border)和边框外面将元素与相邻元素隔开的不可见区域(外边距margin。这类似于挂在墙上的带框架的画，其中衬边是内边距，框架是边框，而该画框与相邻画框之间的距离则是外边距，如图9-8所示。每个元素盒子可以是块级的(block)，也可以是行内的(inline)。在CSS中，使用，display属性来定义盒的类型。(1)block类型:这种盒模型的元素默认占据一行，允许通过CSS设置宽度、高度，例如div,p元素。下一页返回9.2CSS盒模型(2)Inline类型:这种盒模型