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