div css目录什么是 DIV+CSS 网页重构 DIV+CSS 的优势何在？ CSS 放入网页的几种方式 CSSDIV 网站设计的问题 使用 DIV+CSS 布局网站的优点和缺陷 Div+CSS 常见错误总结 DIV+CSS 常用编辑工具 DIV+CSS 浏览器兼容办法编编辑辑本本段段什什么么是是 D DI IV V+ +C CS SS S 网网页页重重构构DIV+CSS 是网站标准（或称 “WEB 标准”）中常用术语之一，通常为了 说明与 HTML 网页设计语言中的表格（ table）定位方式的区别，因为 XHTML 网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS 的方 式实现各种定位。 HTML 语言自 HTML4.01 以来，不再发布新版本，原因就在于HTML 语言 正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商 也开发出只适合于其特定浏览器的HTML 标记，这显然有碍于 HTML 网页的 兼容性。于是 W3C 组织进而重新从 SGML 中获取营养，随后，发布了 XML，XML 是一种比 HTML 更加严格的标记语言，全称是 可扩展标记语言（EXtensible Markup Language）。但是 XML 过于复杂，且当前的大部分 浏览器都不完全支持 XML。于是 XHTML 这种语言就派上了用场， XHTML 语言 就是一种可以将 HTML 语言标准化，用 XHTML 语言重写后的 HTML 页面可以 应用许多 XML 应用技术。使得网页更加容易扩展，适合自动数据交换，并且 更加规整。说了这么多，现在该说正题了 CSS。其实 CSS 单独使用除了 麻烦一点之外，我个人觉得并无明显的优于HTML 的好处。而关键就在于其 与脚本语言（如 Javascript）及 XML 技术的融合，即 C CS SS S+ +J Ja av va as sc cr ri ip pt t+ +X XM ML L（实际上有一种更好的融合： X XM ML L+ +X XS SL L+ +J Ja av va as sc cr ri ip pt t） 但 XSL，即可扩展样式表语言相较于 CSS 过于复杂，不太容易上手。自 从 CSS 出现之后，HTML 终于摆脱了杂乱无章的恶梦，开始 将将页页面面内内容容与与样样 式式分分离离。说了这么多，其实，个中真谛，还得使用过后才知道，所以，现在 就开始学习使用吧。 DIV 元素是用来为 HTML 文档内大块（ block-level）的内容提供结构和 背景的元素。 DIV 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由 DIV 标签的属性来控制，或者是通过使用 样式表格式化这个块来进行控制。 在可以预计的将来， table 的地位依然十分重要，于是，如 google 之 流依然会生意兴隆。但是 div 代表的是网络世界发展的方向。它们一个简单， 一个先进，萝卜白菜，您选什么都是有可取之处的我们都会按您的要求认 真服务的！ div 是 html(超文本语言 )中的一个元素 ,div+css 是一种网页的布局方 法,这一种网页布局方法有别于传统的table 布局,真正地达到了 w3c 内容 与表现相分离 . div 是标签 css 是层叠样式表 DIV+CSS 高级布局已逐渐流行，但面对所谓DIV+CSS 布局的叫法让人更 为担心，不要让 DIV 成为 Table 的替代品，多层嵌套的 DIV 会严重影响代 码的可阅读性，活用 HTML 为我们提供的标签吧。 什么时候应该用 DIV？ 虽然在这方面没有什么硬性的规定 ,但个人认为 DIV 更适用于大体框架 的定位.例如我们要定义一块头部的区域 ,一般会这样定义一个 DIV： 这里就是头部框架里要写的内容 当然,可以用 class 来定义，但一般来讲如不是在同一页面会重复的元 素，用 id 能更好的区别开来。 查看如下定义代码 Articles Topics About Contact Contribute Feed No. 214 定义了最上面的导航（ ul 部分），左边的大 logo 和那个圆圆的 No.xxxx 的标记.。 他没有使用 DIV 来做顶部的框架，但却很好的说明了这些代码的用途， 为什么?因为他活用了 HTML 提供的标签 ,以及样式名称的定义 其它最常用的布局标签 h1 这个标签或许真正会去用的人很少 ,因为它显示的 字体真的是太“大” 了,但我们是 CSSer，有什么标签样式不能改呢？而且它所能表达的意思就 如同它原先的作用一样明显（大标题）我想你已经知道怎么去用它了 _ ul 这个标签很多情况是用来定义导航部分的，当然也可以用ol 来代替， 但导航连接没有什么顺序之分吧，所以还是用ul 来的比较确切（去掉 CSS 后效果更明显） b 这个已经不再推荐使用的标签，在布局上却能带来不少的方便（因为短） 。在和之间的文字，用粗体表示。 b 顾名思义，就是 bold 的意思。 虽然我不是太赞成使用这个标签，但有些时候（比如细小地方的布局定义） 还是不错的选择 h2 h2 使用最多的地方应该不是布局上，而是副标题 ,但有些地方需要定义 栏目样式的话，用这个标签比较合适，栏目内容就使用p 编编辑辑本本段段 D DI IV V+ +C CS SS S 的的优优势势何何在在？1、符合 W3C 标准。微软等公司均为 W3C 支持者。这一点是最重要的， 因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是 IE7 或者是火狐，您的网站都能很好的兼容。 3、搜索引擎更加友好。相对与传统的table, 采用 DIV+CSS 技术的网 页，对于搜索引擎的收录更加友好。 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变 得更加方便。 现在 YAHOO,MSN 等国际门户网站，网易，新浪等国内门户网 站，和主流的 WEB2.0 网站，均采用 DIV+CSS 的框架模式，更加印证了 DIV+CSS 是大势所趋。 5、CSS 的极大优势表现在简洁的代码，对于一个大型网站来说，可以节 省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。编编辑辑本本段段 C CS SS S 放放入入网网页页的的几几种种方方式式行内套用 我们可以在 HTML 文件内直接宣告样式。 举例来说，Thisisfontsize16. 以上的 HTML 文件在浏览器上会显现为： Thisisfontsize16. 嵌入套用样式可以嵌入于 HTML 文件中(通常是在内)。 举例来说，divdivbackground- color:#FF0000;背景颜色是红色 以上的 HTML 会显现出：背景颜色是红色 外部连接套用在这种方式下，所有的CSS 样式宣告都是存在另外一个 档案中。 该档案通常名称为 .css。 在 HTML 文件的.之中，我们将用以下的程式码将 这个.css 档案连接进入： 以上这一行会将在 external-stylesheet.css 这个档案内所宣告的样 式加入 HTML 文件内。 汇入套用汇入套用外部的 CSS 样式也可以被汇入进 HTML 文件。 汇入的做法为利用 import 这个指令。 import 的语法为：import“!- -importurl(style.css);importurl( import 指令最初的用意，是为了能够针对不同的浏览器而运用不同的 样式。不过，现在已经没有这个必要。现在用 import 的目的，最常是要 加入多个 CSS 样式。当多个 CSS 样式被import 的方式加入，而不同 CSS 样式互相有冲突时，後被加入的 CSS 样式有优先的顺位 (详情请见 CSS 串接)。d di iv v c cs ss s- -其其它它最最常常用用的的布布局局标标签签 h1 这个标签或许真正会去用的人很少 ,因为它显示的字体真的是太 “ 大“了,但我们是 CSSer,有什么标签样式不能改呢 ?而且它所能表达的意思就 如同它原先的作用一样明显 (大标题)我想你已经知道怎么去用它了 _ . ul 这个标签很多情况是用来定义导航部分的 ,当然也可以用 ol 来代替,但 导航连接没有什么顺序之分吧 ,所以还是用 ul 来的比较确切 (去掉 CSS 后效 果更明显) . b 这个已经不再推荐使用的标签 ,在布局上却能带来不少的方便 (因为 短),虽然我不是太赞成使用这个标签 ,但有些时候 (比如细小地方的布局定 义)还是不错的选择 h2 h2 使用最多的地方应该不是布局上 ,而是副标题 ,但有些地方需要定 义栏目样式的话 ,用这个标签比较合适 ,栏目内容就使用 p。 编编辑辑本本段段 C CS SS SD DI IV V 网网站站设设计计的的问问题题尽管 DIV+CSS 具有一定的优势，不过现阶段 CSS+DIV 网站建设存在的 问题也比较明显，主要表现在： 第一，对于 CSS 的高度依赖使得 网页设计变得比较复杂。相对于 HTML4.0 中的表格布局（ table），CSS+DIV 尽管不是高不可及，但至少要 比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说 初学者了，这在一定程度上影响了XHTML 网站设计语言的普及应用。 第二，CSS 文件异常将影响整个网站的正常浏览。 CSS 网站制作的设计 元素通常放在几个 l 外部文件中，这一个或几个文件有可能相当复杂，甚至 比较庞大，如果 CSS 文件调用出现异常，那么整个网站将变得惨不忍睹。 第三，对于 CSS 网站设计的浏览器兼容性问题比较突出。基于 HTML4.0 的网页设计在 IE4.0 之后的版本中几乎不存在浏览器兼容性问题， 但 CSS+DIV 设计的网站在 IE 浏览器里面正常显示的页面，到火狐浏览器 （FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐 浏览器的原因所在 ）。CSS+DIV 还有待于各个浏览器厂商的进一步支持。 第四，CSS+DIV 对搜索引擎优化 与否取决于网页设计的专业水平而不是 CSS+DIV 本身。CSS+DIV 网页设计并不能保证网页对搜索引擎的优化，甚至 不能保证一定比 HTML 网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS 定位来衡量，这就是为什么很 多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS 及 web 标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结 构、内容、相关网站链接等因素始终是网站优化最重要的指标。 编编辑辑本本段段使使用用 D DI IV V+ +C CS SS S 布布局局网网站站的的优优点点和和缺缺陷陷随着 WEB2.0 标准化设计理念的普及，国内很多大型门户网站已经纷纷 采用 DIV+CSS 制作方法，奋斗网络也成为了 CSS 网页布局技术学习的先锋 站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。 如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法 对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲 和力的、更灵活的，而且功能更强大的网站设计方法DIV+CSS。 CSS 网页布局的意义体现在如下方面： 一一、使使页页面面载载入入得得更更快快 由于将大部分页面代码写在了 CSS 当中，使得页面体积容量变得更小。 相对于表格嵌套的方式， DIV+CSS 将页面独立成更多的区域，在打开页面的 时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得 加载速度很慢。 二二、降降低低流流量量费费用用 页面体积变小，浏览速度