PHP基础教程-零基础学习PHP-DIV CSS标准化网页部局准备工作(下).pdf

DIV+CSS标准化网页部局准备工作 课程内容  DIV+CSS标准化布局的优势  “无意义”的元素div和span  盒子模型  布局中的主要样式  使用区块框设计页面布局 参考教材： 《细说PHP》第四章 概述  使用“DIV+CSS”对网站进行布局符合W3C标准，采用这 种方式布局通常是为了说明与HTML表格定位方式的区别 。因为现在的网站设计标准中，已经不再使用表格定位技 术，而是采用DIV+CSS 的方式实现各种定位。通过使用 div盒子模型结构将各部分内容划分到不同的区块，然后 用css来定义盒子模型的位置、大小、边框、内外边距、排 列方式等。简单地说，div用于搭建网站结构（框架）、 css用于创建网站表现（样式/美化）。该标准简化了 HTML页面代码，获得一个较优秀的网站结构，有利于日 后网站维护、协同工作和便于搜索引擎抓取。当然并不是 所有的网页都需要用div布局，例如数据页面、报表之类 的页面，还是使用HTML 的表格会比较方便，web标准里 并没有说要抛弃table 。 DIV+CSS标准的优点 表现和内容相分离 代码简洁，提高页面浏览速度 易于维护和改版 提高搜索引擎对网页的索引效率 各个浏览器之间的差异 安装多种浏览器,对比差异进行调试 在FF浏览器中安装firebug Firebug 为你的Firefox 集成了浏览网页的同时 随手可得的丰富开发工具。你可以对任何网页 的CSS、HTML 和JavaScript 进行实时编辑、 调试和监控 就算在不同的浏览器中效果不完全一至， 也要做到大概一至 “无意义”的元素div和span  HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如， 标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎 没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。 但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住 的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所 以当样式表失效时它就没有任何的作用  它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用 类属性class和标识属性id与元素联系起来。span和div的不同之处在于 span是内联的，用在一小块的内联HTML 中。而div （division ）元素是 块级的（简单地说，它等同于其前后有断行），用于组合一大块的代 码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段 落、标题、表格甚至其他部分，这使div便于建立不同集成的类。  div 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其 中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表 格式化这个块来进行控制。 盒子模型 每个HTML元素都可以看作一个装了东西的 盒子，盒子具有宽度（width ）和高度 （height ），盒子里面的内容到盒子的边框 之间的距离即填充（padding ），盒子本身 有边框（border ），而盒子边框外和其他盒 子之间，还有边界（margin ）。 布局中的主要样式 font • width: line-height • height color • float: margin • clear padding