第13章+利用CSS+Div进行网页布局和.ppt

第13章利用CSS+Div进行网页布局和排版,本章将讲述如何进行网页的布局和排版。所谓布局，英文名称叫做Layouts，是指网页上不同功能分区的数量以及它们之间排列的位置和顺序。从事网页布局这项工作非常像报纸的主编，将每天大大小小长短不一的新闻在固定的版面中进行摆放，以达到最好的效果。目前，利用CSS和Div组合对页面进行布局已经成为一个公认的标准方法，而在这之前，流行甚至唯一的方式就是利用表格进行页面布局。本章就先从它们两个各自的优缺点谈起。,13.1表格还是Div,“生存还是死亡？这是一个问题。”对于网页布局来说，用表格还是用Div，也是一个问题。在Div+CSS占网页布局统治地位的今天，在学习它的时候，有必要先回顾一下表格的方法。,13.1.1利用表格进行网页布局,利用表格进行网页布局的方法其实很简单：将网页分为几个表格，页面上方，一般是导航条的位置，一个表格；页面中间，内容列表，新闻图片等等，分为2到3栏，一个表格；页面下部，文字导航条，版权声明等等，一个表格。如果在页面中间的内容部分有所需要，还可以在其中进一步嵌套表格。,利用表格进行页面布局,13.1.2利用Div+CSS进行网页布局,既然利用表格进行网页布局有前面所提到的一些缺点，近年来人们开始逐渐利用Div+CSS的方法实现布局的任务。Div+CSS的方法最大的优点就是讲内容和布局分开处理，去掉了表格那么多的繁琐标签，缩减了网页文件大小。根据网页的流行结构，利用Div+CSS能够完成如下多种布局：创建一列式网页布局。创建两列式网页布局。创建多列式网页布局。创建不规则网页布局。从下面的小节开始，我们将学习利用Div和CSS创建网页布局的具体过程。,13.2用Div+CSS创建一列式网页布局,上一节中提到了网页布局的概念与两种布局方法，特别是传统表格布局的优劣。本小节将介绍用Div+CSS创建网页布局的具体过程。我们已经浏览过众多的网站，从目前流行的结构来看，主流网站的网页布局一般有如下几种：一列式布局：整个网页一列到底部，不分左右两栏，类似大部分书籍的排版方式。两列式布局：网页主要部分分为左、右两个区域，分别放置不同的内容，类似大部分杂志的排版方式，多用于一般商业网站、博客等等。多列式布局：网页主要部分分为左、中、右三个甚至更多的区域，分别放置不同的内容，类似不少报纸的排版方式，多用于一般商业网站等等。不规则布局：网页主要部分的各个区域不规则排列，多用于艺术、设计等类别的网站。本小节将从基本的一列式布局讲起。,13.2.1创建一列式布局,最有名的一列式布局莫过于谷歌、百度等搜索引擎了。图是百度的首页面，可以看到，内容是从上到下，没有左右分栏的。,一列式布局：百度,13.2.2代码解读,由于创建一列式网页布局是二列式、多列式布局的基础，详细地学习一下代码13-1对今后几个小节的学习会非常有好处。通过阅读代码13-1，我们能够体会到格式和内容分离这一原则。格式设置都在页面开头的标签内，而内容则只有很短的几行，一目了然，而且在内容标签中除了必要的Id，type等属性外，不进行显示效果的设置。整段代码的样式规则利用多种选择器：类型选择器：比如其中的body和input样式规则，代表页面内所有的body和input标签的效果。Id选择器：比如其中的#bottom，#logo，#content三段样式规则。Id选择器和后代选择器以及属性选择器的组合：比如#ContentInputtype=”text”这样的样式规则。各选择器的具体样式规则则包含我们在前面几章学习过的一些技巧：设置边框粗细、颜色以及类型（border:1pxsolid#FFCC00）；设置标签内文字居中（text-align:center）等等，读者可以通过它们复习学过的知识。,13.2.3观察与思考：三个问题,对于第一点，我们在第五章已经了解到：Div标签（还有、等）等容器，所有被其包含的元素在垂直方向上永远是顶端对齐的。而对于第二点，我们可以通过在其他浏览器中打开相同页面来验证，代码在Firefox2中的显示如图所示。,代码13-2在Firefox2中的显示,13.2.4解决Div内容垂直居中的问题,如何令Div标签中的内容在垂直方向上也居中？这个问题可以分为两种情况：设置图片的垂直居中：有一种方法就是将图片设置为背景，然后指定该背景图片居中。为此Div#Top样式规则做了如代码的修改，同时去掉标签内的Img图片（防止图片重复显示），另保存为Div-OneColumn-ImgVertCenter.html。,改变行间距设置文字垂直居中的局限性,13.2.5解决IE7中底部Div突出的问题,由于这是IE对于CSS支持的一个问题，我们还需要对样式进行修改以适应浏览器的显示，使其正常。这种情况在实际工作中可能会遇到一些，一般都采取这样的办法：对受影响的属性直接设置具体数值。在本例中，既然是底部Div的宽度超出了标签和其他Div，那么只要在#Bottom的样式规则中增加指定宽度的代码：width:600px，相信就能解决问题。修改后的文件div-onecolumn-bottom.html在IE7中的显示如图所示。,指定底部Div的宽度以消除IE显示问题,13.2.6设置Body居中的技巧,最后再来讲解一下设置Body标签居中的技巧。我们知道标签可以说是页面所有和内容有关的标签的父标签，如果在浏览器内容窗体里居中，那么其内部的所有标签也都会居中。最简单的方法就是利用已经学习过的标签，它可以放置在网页内容的任意标签之外（包括标签），使得其之间的元素居中。但是，这样就产生了一个问题：如果在和之间有标签额外设置了样式规则，但其中并没有设置居中，由于浏览器确定标签显示以样式规则为准，从而可能无法达到预期的居中效果。比如代码这样一个简单的网页：,由于margin-left设置了负值使得body左半部分在浏览器之外,13.3用Div+CSS创建两列式网页布局,一列式布局在实际的网站中应用的并不算多，两列式乃至三列式则是网页布局的主流。有了第一节的基础，学习用Div+CSS创建两列式布局会比较容易。,13.3.1创建基本的两列式布局,图13-11显示了新浪网财经频道首页的两列式布局。,新浪网财经频道的两列式布局,13.3.2设置固定宽度的两列式布局,设置固定宽度的两列式布局很简单，只需要在左列和右列中指定具体的像素值，而不是百分比就可以了。这样，当浏览器窗口改变大小的时候，左右列的宽度并不随之改变，从而保证了内容不会因此改变显示外观。如果需要设置左列宽度不变，右列可以随浏览器改变大小而变化的布局，可以将Body标签的总宽度设置为百分比，同时将左列宽度设置为具体像素值，这样右列的宽度随浏览器窗口的变化也可以变化了。还有一种方法，即利用上一节所讲述的绝对定位技术，来实现网页上不同Div的分区显示，我们将在下一节中介绍。,13.4用Div+CSS创建多列式网页布局,创建多列式布局类似于两列布局，理想状态下，只需要把内容部分的Div标签由两个增加到多个就好了。除此之外，还可以通过设置每一个Div标签的绝对定位来精确控制页面结构。利用定位技术实现了一个简单的三列式网页布局，显示效果如图所示。另外，为了说明问题，先把网页最底端的Div注释掉。,利用绝对定位创建的三列布局网页,13.5用Div+CSS创建不规则网页布局,所谓不规则网页布局，多见于艺术设计类网站或者公司网站的入口页，由于打破了一半网页一行一行排列的模式，因此显得生动、整体感好、视觉冲击力强。这种形式一般只适用于网页在一屏就可以显示完全的情况下。至于具体的实现方法，则并不新鲜：利用绝对定位，将不同内容区块散布在网页上。图显示了一个不规则网页的布局，引自国外某设计工作室的首页。在类似这样的网页上，用绝对定位的Div会非常方便，我们察看一下这个页面的源代码就可以学习到这种方法：,一个不规则布局的网页,13.6小结,本章我们首先介绍了利用表格进行网页布局的优缺点，引入了利用Div+CSS实现布局的方法，这种方法最大的优点就是能够做到内容和格式区别开，方便了网页的修改和维护。在后面的几节中陆续介绍了用Div+CSS设置一列式、两列式、三列式和不规则布局的方法以及常见的问题，在实际使用中一定要注意以下几点：如果要设置某个标签的宽度随浏览器大小变化而变化，则应该用百分比作为宽度值。如果要保持固定的宽度，则用具体的像素值。如果对Div利用了Floa