DIV CSS简介

最新推荐文章于 2020-03-02 20:58:43 发布
最新推荐文章于 2020-03-02 20:58:43 发布
阅读量579 收藏 1
点赞数 1
分类专栏： div css 文章标签： divcss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32279425/article/details/49387425
版权

一、 什么是DIV CSS

div cssDIV+CSS是网站标准（或称"WEB标准"）中常用术语之一，DIV+CSS 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

二、DIV CSS产生背景

HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后发布了XML。 
XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。 
而CSS关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）——但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。

三、DIV CSS的优势

1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 
2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 
3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 
4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 
5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 
6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

四、DIV CSS嵌入方式

行内套用　　可以在HTML文件内直接宣告样式。 　　举例来说，Thisisfontsize16. 
以上的HTML文件在浏览器上会显现为：Thisisfontsize16. 
嵌入套用样式可以嵌入于HTML文件中(通常是在<head>内)。 　　举例来说，<head><style type="text/css">div{background-color:#FF0000;}</style></head><body>背景颜色是红**ody> 
以上的HTML会显现出：背景颜色是红色 　　
外部连接套用 　　在这种方式下，所有的CSS样式宣告都是存在另外一个档案中。 
该档案通常名称为.css。 
在HTML文件的<header>..</header>之中，我们将用以下的程式码将这个.css档案连接进入： 
<linkrel=style sheettype="text/css" href="external-stylesheet.css"> 
以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。 
汇入套用　　外部的CSS样式也可以被汇入进HTML文件。 　　汇入的做法为利用@import这个指令。 
@import的语法为：<style type="text/css"><!--@import url("style.css");--></style> 
@import指令最初的用意，是为了能够针对不同的浏览器而运用不同的样式。不过，现在已经没有这个必要。现在用@import的目的，最常是要加入多个CSS样式。当多个CSS样式被@import的方式加入，而不同CSS样式互相有冲突时，后被加入的CSS样式有优先的顺位(详情请见CSS串接)。 
还有一种嵌入的方式是直接写在标签上的，不过这种写法有些限制，大多数标签都可以接受这种解法: 　　<div style="color:#000000;">文字</div> 
这个代码通过直接嵌入标签的形式，使得标签内的文字更改颜色，而且根据css的优先调用级直接嵌入标签的写法也更直接更优先选择调用。

五、DIV CSS布局优点

一、使页面载入得更快 
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 
二、降低流量费用 　　页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。 　　
三、修改设计时更有效率 
由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性 
DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录 
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力 
我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

六、DIV CSS存在问题

尽管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标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

七、DIV CSS常见错误

1. 检查HTML元素是否有拼写错误、是否忘记结束标记 
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 　　
2. 检查CSS是否正确 
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 　　
3. 确定错误发生的位置 
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 　　
4. 利用border属性确定出错元素的布局特性 　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。
5. float元素的父元素不能指定clear属性 
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性 
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 
另外指定元素时尽量使用em而不是px做单位。 　　
7. float元素不能指定margin和padding等属性 
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100% 
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式? 
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD? 　　如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

八、DIV CSS常用工具

1.Notepad.exe记事本，（程序小，随时手工编辑，垃圾代码少，不能可视化预览）
2.Dreamweaver（老牌网页编辑工具，功能全，程序比较大，但对DIV+CSS可视化支持程度不太友好）
3..editplus(应该是升级版的记事本工具，代码编辑有颜色提示) 　　
4.Ultraedit
5.Golive（将来替代Dreamweaver的产品）
6.Topstyle(功能相当多，附有CSS码检查功能，减少写错的机会。尤其是它的HELP文件中详细的CSS指令介绍，很适于用作参考文件与初次接触CSS的人做为学习使用)

九、DIV CSS兼容办法

区别IE6与FF： background:orange;*background:blue; 　　
区别IE6与IE7： background:green !important;background:blue; 　　
区别IE7与FF： background:orange; *background:green; 　　
区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue; 　　
IE7,IE8兼容: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 　　
HEAD 　　
1. CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6、IE7识别 _ 可被IE6识别 *+ 可被IE7识别 　　
2. IE专用的条件注释 <!--其他浏览器 --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> <!-- 适合于IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lte IE 6]> <!-- 适合于IE6及一下 --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
3. 几个浏览器对实际像素的解释 IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right) Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right) 　　
4. 鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer 　　
5. FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + 'px'; 　　
6. FireFox无法解析简写的padding属性设置，如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0； 　　
7. 消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效
8. CSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6; 　　
9. CSS控制圆角：IE：不支持圆角； FireFox: -moz-border-radius:4px;或 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px; 　　
10. CSS双线凹凸边框：IE：border:2px outset; FireFox： -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080;

文章来源：div css http://web.divcss6.com/

divcss6
关注
专栏目录
Div + CSS 基础
gjgj的博客
08-18 5232
DIV和CSS样式 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 DIV是html的一个标签 css是一个样式表 1、先写好样式 ...
十天学会DIV CSS教程完整版完美整理 完整代码.pdf
12-02
完整的DIV+CSS教程，网站设计是做软件的入门，也是最简单，而且最为实用的设计需求。这么多年软件做下来，其实基本上软件设计的原理都有那么一些继承和发展。这篇文章对于初学网站前端设计的朋友很有用。学了这个，...
div+css简介
amarsoft_wxzhou
03-10 350
技术分析: div css ///////////// div: 块标签 <div></div> span:行内的块标签 <span><span> //////////// css:渲染 层叠样式表 作用: 渲染页面 提高工作效率 格式: 选择器{属性:值;属性1:值1;} 后缀名
DIV+CSS介绍
ginger_mr的博客
03-02 875
DIV+CSS介绍 案例介绍 在之前使用了表格<table>对网站首页进行了布局,但是表格布局有自身的缺陷,并不是特别灵活,所以将使用UI工程师经常使用的 DIV+CSS方式进行布局,这种布局方式更为灵活。 DIV相关技术 Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义， 必须结合 CSS 来使用。它主要用于...
div+css基础介绍
傻月菇凉的博客
10-30 2518
div+css是什么？ 传统页面一般是用&amp;lt;table&amp;gt;元素来布局和显示数据，优缺点如下： 优点 显示样式和数据绑定在一起。 布局时使用table，灵活度不高。 一个页面会有大量的&amp;lt;table&amp;gt;元素，代码存在冗余。 增加带宽。使用table要考虑预留空间问题。 搜索引擎不喜欢这样的布局。 缺点 理解比较简单。 不同的浏览器看到的效果一般是相同的。 显示数据较...
初识DIV+CSS
renpingsheng66的博客
08-02 115
&#13; div元素是用来为html文档内大声(block-level)的内容提供结构和背景的元素. css是Cascading Style Sheets(层叠样式表单)的缩写,是一种用来表现html或xml等文件样式的计算机语言. dic+css是网站标准(或称"web标准"),通常为了说明与html网页设计语言中的表格(table)定位方式的区别. 简单来说: div是...
DIV+CSS.rar_DIV_aspnet div css _css_css div_css div asp p
09-19
标签“div aspnet__div_css__ css_css_div_css_div_asp_p”进一步强调了关键主题，即<div>元素在ASP.NET环境下的应用，以及CSS用于样式化<div>和其他HTML元素，如标签。 压缩包内的文件名称列表揭示了包含的具体...
DIVCSS精品模板荟萃
07-22
教程名称：DIV CSS 精品模板荟萃课程目录：【】27款后台管理页面设计 DIV CSS【】32个高质量XHTML和CSS模板【拿来就能用】【】50个Div CSS模板【】css网站设计模板及资源【】免费CSS模板【】四款div css模板【】非常...
divcss布局入门教程
07-22
资源名称：div css布局入门教程内容简介：在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了...
DIV+CSS.rar_DIV_css+div_div+css_html+div+css_web前端
最新发布
09-22
【标题】"DIV+CSS.rar" 是一个关于网页布局技术的压缩包，主要围绕着 `div` 和 `CSS` 进行讲解。`div` 是HTML中的一个块级元素，常用于网页布局，而 `CSS`（层叠样式表）则是用于控制网页元素样式和布局的重要工具。...
div+css简介及他们之间的关系
08-01
介绍了div+css 架构，以及一个函数的用法
DIV_CSS
04-04
源文件 博文链接：https://changaiqing.iteye.com/blog/1483940
Div+CSS 布局大全
01-06
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后再针对语义、结构添加 CSS。这篇文章将告诉你应该怎样把 HTML 结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该 转换成对应的什么 CSS 语句。当你解决了第一种问题，知道了如何结构化你的 HTML，我再给出一个列表，详细列出原来的表 现属性用什么 CSS 来代替。 结构化 HTML 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用 Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑 HTML 将所有设计还原表现在页面上。 如果你希望你的 HTML 页面用 CSS 布局(是 CSS-friendly 的)，你需要回头重来，先不考虑“外观”，要先思考你的页面 内容的语义和结构。 外观并不是最重要的。一个结构良好的 HTML 页面可以以任何外观表现出来，CSS Zen Garden 是一个典型的例子。CSS Zen Garden 帮助我们最终认识到 CSS 的强大力量。 HTML 不仅仅只在电脑屏幕上阅读。你用 photoshop 精心设计的画面可能不能显示在 PDA、移动电话和屏幕阅读机上。但 是一个结构良好的 HTML 页面可以通过 CSS 的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的 目的，然后再根据这些内容目的建立起相应的 HTML 结构。
HTML+DIV+CSS
09-12
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> </head> <style> h1{ color: white; /*文字颜色*/ background-color: #ff9933; /*背景颜色*/ font-size: 30px; /*文字字号*/ font-weight: bold; /*文字粗体*/ text-align: center; /*水平居中*/ } img{ float:left; /*左浮动*/ border: 1px #9999cc dashed;/*边框类型*/ margin: 5px; /*内间距*/ } p{ font-size: 12px; text-indent: 2em; /*首行缩进*/ line-height: 1.5; /*行高*/ padding: 5px; /*外间距*/ } body{ margin: 0px; background-color: #e6e6e6; } #p1{ border-right:6px #0088000 double; } #p2{ border-right:6px #0000ff double; } </style> <body> <h1>凉城夏笑*</h1> <img src="img/oo.png" /> <p id="p1">故人、往事、记忆、流年。，每当这一串串有关时间的词语不经意出现在眼前时，心便有种酥麻麻的感觉，说不出，道不明的伤感像一阵突如其来的寒风， 卷走心底仅存的温明，空荡的心房需要汲取过往的一丝温暖才能安详度日，我知道，在每个人的心里，都有一段美好而又已经逝去的光阴。</p> <p id="p2">如果我突然消失了，你会不会发疯一样的找我，因为找不到我而难过。你会不会无数次的点击我的空间，看看我留下的痕迹。你会不会一直等我，相信我会回到你身边。</p> </body> </html>
div+css的基础简介及应用（一）——CSS的应用
冷锋SJ遗忘
11-06 137
1.div本身相当于一个容器，可以在当中内嵌table、文本和其它HTML代码，也可以将div内嵌至table中； 2.有需要的地方可以直接定义css，通过style引入即可； 例： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/css; charset=utf-8" /&gt;...
Div+css简介
wml
05-18 2093
1、Div+css简介： 传统的页面是用table来布局和显示数据。这样有以下缺点： （1）、显示数据和样式是绑定在一起的，牵一发而动全身； （2）、布局不够灵活； （3）、可能导致一个页面有大量的table元素，致使代码冗余，增加带宽； （4）、table布局不利于搜索引擎的搜索。 其也有优点： （1）、便于理解； （2）、不同的浏览器显示结果相同，table比较稳定； （3）
css+div详细介绍及举例说明 .
sgkuo的专栏
03-21 507
css中padding、margin两个重要属性的详细介绍及举例说明 参考：http://www.cncfan.com/cncfan_com_article.asp?art_id=6215&cat_id=56 css 教程 参考：http://www.w3school.com.cn/css/css_syntax_01.asp javaScript教程 参考：http://develope
div + css 详解
Java海洋
11-28 9664
第 1 页 《Div+CSS 布局大全》 整理者：Jesse Zhao 网站：http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜，希望她可以永远快乐幸福！！！ 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com 第 2
CSS+DIV详解
热门推荐
Switch的博客
12-01 1万+
CSS+DIV详解 css+div基本介绍 层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式
Div+CSS布局完全指南
"《Div+CSS布局大全》是JesseZhao在博客园整理的一份关于Div和CSS布局技术的综合教程。" 这篇教程主要涵盖了Div+CSS布局的基础知识，包括XHTML规范、CSS样式表的调用与设置、以及CSS布局的入门等内容，旨在帮助读者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值