第12章 为什么用DIV布局.pptVIP

第12章 为什么用DIV布局 DIV是HTML中的标签，也称作层，用DIV布局也说成用层布局。DIV标签对是用来布局的，结合层叠样式层设计出完美的网页，这样做比以前的TABLE布局有更多好处，而且更接近标准。 DIV标记主要用来布局，在布局中，可以作为容器使用，其包含其他对象，如表格、表单、文本和图像等，DIV标记中还可以嵌套DIV标记，而且层数没有限制，每个DIV标记与最近的DIV结束标记符（/div）相配对，且每个DIV必须有一个DIV结束符与之对应。 学习本章，将会了解以下内容： DIV与TABLE布局不同 如何用DIV布局 使用DIV注意事项 DIV布局实例手把手 12.1 DIV与TABLE布局比较 现在大部分网站都往W3C标准靠近，对于初学者，先学好基础知识，然后结合W3C标准，使网页质量更高。本节除了介绍基本的DIV外，还比较了其与TABLE的区别。 12.1.1 什么是DIV DIV是标签对，表示一个层，里面包含HTML代码，也可以被HTML标记包围。DIV的属性也很多，都是用来控制DIV的，下面代码表示就是一个DIV。 div p我是一个DIV！/p /div 上面代码在DIV标签对中，包含了一个段落，这时的效果和在body/body中输入一段落没什么不一样，因为对div没有设置，稍后会讲到如何设置DIV。DIV标签对可以嵌套，嵌套的深度没有限制，但必需每个div都能对应一个/div，而且div与最近的一个/div相匹配，有人把外围的DIV称为DIV容器，包含很多层，代码12.1表示层与层之间的嵌套。 12.1.2 DIV与TABLE的区别 DIV层可以用来布局，使所表现的网页更清楚、细腻，而且HTML代码少，所以越来越多的网页制作者采用DIV布局取代TABLE布局。TABLE表现表格式布局更方便，很多初学者习惯用TABLE，对学习DIV布局难以入手，其实这是一种误解，对DIV布局的学习，控制好DIV层就容易学好了。记住一点，有时利用DIV是很方便的，但也有用到TABLE的时候，请读者注意。 在用TABLE布局时，可以再嵌套TABLE，在前面学习过，TABLE可以表示表头、表元等，每一行要有tr/tr标签对，然后再放入td/td标签对，所以布局下来标签对非常多，HTML代码所占用的空间也比DIV多，代码12.2表示三行三列的布局模式，没有用到CSS来控制这些DIV。 12.2 如何用DIV布局 通过前一节的学习，大体知道了用DIV布局方式，现在再总结DIV方面是如何进行的。DIV布局先利用层把内容框架打好，再利用样式表控制。下面通过实例讲解如何进行DIV布局，实例所完成的是门户网站的内容浏览新闻页的布局。 12.2.1 设置好DIV选择符 首先在body/body中定好网站的DIV。对页面的头部、导航条、内容等各个模块用DIV列出并对选择符命名，并在样式表中列出，完成后如代码12.5所示。 12.2.2 设置CSS修饰DIV效果 用样式表修饰内容，样式表就是用CSS来控制HTML标记，使标记达到预定的效果。代码12.6表示在CSS代码中，添加CSS样式来控制选择符关系的DIV标记，层表现出的效果即为CSS的功能。 12.2.3 设置DIV的背景颜色 本实例只表示布局，里面内容如何设置在以后会讲解到，对样式表代码不了解也没有关系，先对样式表有个初步的认识，在脑海形成有对布局的意识。本步骤对四个大层设置了背景颜色，即对header、banner、content、bottom四个大层的backgound设置不同的颜色，颜色值表示方法在前面学过，可以用字母表示，也可以用RGB形式表示，在RGB形式中注意一点，如代码中所看到的#ccc与#cccccc，颜色值为三位时表示这三个值都有重叠的值，第一个C代表CC值，同理，第二个C也代表CC值，所以三个值刚好代表6个C的值，再如，三个不同的值也是重叠的，如#cba表示#ccbbaa，效果如图12.5所示。 12.3 使用DIV注意事项 在使用DIV时，要注意ID与类（class）选择符的应用，ID是在一张网页中单独的HTML关联CSS的名称，而类可以在HTML中重复出现，可以定义一个名称在同一网页多处应用（当然也可以在多个网页中应用）。 用DIV布局时，好多初学者都不太熟悉DIV+CSS布局的使用，而在控制标记时存在比较难以控制的情况，出现这种情况有以下几点。 （1）使用DIV时要确定好层对象的宽度。好多初学者想把层控制到一个方面，但层默认的是100%，在不确定宽度情况下不能移动。 （2）当确定宽度后，使用属性float进行漂移，如在一个位置要想两个层并排，可以设置两层向一个方向漂移（如设置float为left），还有一种方法设置一个向左一个向右，但是中间有