Div+css布局

DIV+CSS 网页布局什么是 Div+CSS 标准？ Div+CSS 的标准化设计有哪些优点？目前主流浏览器（ Browse ）有哪些？如何写符合 seo 的 HTML 页面布局规范？深入了解 CSS 选择器？如何做好浏览器兼容性（ CSS ）？

一、什么是 Div+CSS 标准？ Div 全称 division 意为“区分”使用 Div 的方法跟使用其他 tag 的方法一样。 <code><div>Very excellent webmaster club .</div></code> 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使 <p></p> 是一样的。 Div 本身就是容器性质的 , 你不但可以内嵌 table 还可以内嵌文本和其它的 HTML 代码。 CSS 是 Cascading style Sheets 的简称，中文译作“层叠样式表单”，在主页制作时采用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用 Internet Explorer 还是 Netscape Navigator ，几乎随时都在与 CSS 打交道，在网上没有使用过 CSS 的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用 CSS 。用好 CSS 能使你的网页更加简炼，同样内容的网页，有的人做出来有几十 KB ，而高手做出来只有十几 KB 。

二、 Div+CSS 的标准化设计有哪些优点？表现和内容相分离。它能将设计从功能里面剥离出来，放在一个独立 css 样式表文件中， HTML 文件中只存放文本和网页结构信息。提高搜索引擎对网页的收录。用只包含结构化内容的 HTML 代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价（ ranking) 。 Table 布局灵活性不大，你只能遵循 table tr td 的格式；而 div 你可以 div ul li 也可以 ol li 还可以 ul li …… 但标准语法最好有序的写。易于维护和改版。只要简单的修改几个 CSS 文件，切换一下风格或主题，整个网站就会焕然一新。这个做的比较早的有微软的 msn 站。另外如果你不是 javascript 的高手，你可以不必去写 ID, 只用 class 就可以。当客户端程序员写完程序，需要调整的时候，你可以在利用他的 id 进行控制。

大大缩小页面代码，提高页面浏览速度，缩小带宽的成本。采用 CSS+DIV 重构的网页，容量要比 TABLE 布局的网页，文件容量小很多，前者一般只有后者的 1/2 。缩短改版时间。只要简单的修改几个 CSS 文件就可以重新设计一个有成百上千页面的站点。使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。以前一些非得通过图片转换实现的功能，现在只要用 CSS 就可以轻松实现，从而更快地下载页面。 Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而 Div 更能体现样式和结构相分离，结构的重构性强。你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个 CSS 文件进行控制，只要修改这个 CSS 文件中相应的行，那么整个站点的所有页面都会随之发生变动。你可以轻松地控制页面的布局。以前一些非得通过图片转换实现的功能，现在只要用 CSS 就可以轻松实现，从而更快地下载页面。在几乎所有的浏览器上都可以使用。

使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。可以一次设计，随处发布。你的设计不仅仅用于 web 浏览器，也可以发布在其他设备上，比如 PowerPoint 。（移植性强。）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个 CSS 文件进行控制，只要修改这个 CSS 文件中相应的行，那么整个站点的所有页面都会随之发生变动。 CSS 非常容易编写。你可以象写 html 代码一样轻松地编写 CSS 。你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个 CSS 文件进行控制，只要修改这个 CSS 文件中相应的行，那么整个站点的所有页面都会随之发生变动。

三、目前主流浏览器（ Browse ）有哪些？

http://blog.csdn.net/xiaojianpitt/archive/2008/11/04/3218266.aspx

四、如何写符合 seo 的 HTML 页面布局规范？ 1 、   2 、 <html> 3 、 <head> 4 、 <title> 页面标题 </title>  5 、 <meta http-equiv=Content-Language content=zh-cn> 6 、 <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> 7 、 <meta name=“description” content=“ 网站描述” >  8 、 <meta name="keywords" content=" 关键词 "> 9 、 <link href=“inc/css.css” type=“text/css” rel=“stylesheet”> 10 、 </head> 11 、 <body> 12 、 <div> 13 、 <h1> 页面内容标题 </h1>  14 、 <h2> 页面相关性标题 </h2>  15 、 <h3> 标题系列 </h3> 16 、 <h4> 标题系列 </h4> 17 、 <h5> 标题系列 </h5> 18 、 <h6> 标题系列 </h6> 19 、 <img src=“xxx.jpg” alt=“ 图片说明” > 20 、 <a href=“/” title=“ 链接说明” > 链接词 </a>  21 、 <strong> 重点关键词强调 </strong>  22 、 <b> 关键词强调 </b><u> 关键词强调 </u><i> 关键词强调 < /i> 23 、 </div> 25 、 <div> 26 、版权部分关键词强调  27 、 </div> 28 、 </body> 29 、 </html>

五、深入了解 css 选择器？五种必须知道的 CSS 选择器一、 * （通配符选择器） * 通配符选择器，经常用于 css reset ，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用 * 了，主要是 * 会匹配所有标签，相当耗资源。 * 在 css 的优先级中是最低的。 Example: * { margin: 0; padding: 0; } 也可以用 * 来匹配某一元素下的所有子元素： Example: #container * { border: 1px solid black; } 二、 #X （ ID 选择器） #+id 名，这是日常常用的 css 选择器，用于匹配 id 为 XXX 的元素， id 选择器的优势是精准，高优先级（优先级基数为 100 ，远高于 class 的 10 ），作为 javascript 脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用 id 选择器前，我们最好问下自己，真的到了非用 id 选择器的地步？ Example: #container{ width:960px; height:auto; }

三、 .X （类选择器） .+class 名，标准的样式选择器，与 id 选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，我想也是日常前端人员用到最多的选择器了。 Example Source code: .error{ color:red; } 四、 X Y （后代选择器） Example Source code: li a{ text-decoration:none; } 说明：目前非常常用的 css 选择器，用于选取 X 元素下子元素 Y ，这里有个要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉 li 下的所有 a 的下划线，但 li 里面还有个 ul ，我不希望 ul 下的 li 的 a 去掉下划线。　　使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。　　这种子孙选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为 li

五、 X （标签选择器） Example source code: a{color:red;} ul{margin-left:0;} 说明：标签选择器，优先级仅仅比 * 高，常用于 css reset 。另外 12 种 css 选择器 :link X:visited X:hover X:active 伪类 Example soure code: a:link{color:red;} a:visited{color:purple;} 说明：伪类选择器， visted 已被访问过的样式， hover 鼠标经过的样式， link 未被访问的样式。三种伪类选择器常用于链接，但不是说只适用于链接，可惜的是 IE6 只支持将这三种伪类选择器作用于链接。这里说明一点，由于 CSS 优先级的关系 ( 后面比前面的优先级高 ) ，这几个伪类的书写顺序，一般是 link 、 visited 、 hover 、 active 。 X + Y 相邻选择器 Example soure code: ul+p{ color:red; } 说明：相邻选择器，上述代码中就会匹配在 ul 后面的第一个 p ，将段落内的文字颜色设置为红色。 ( 只匹配一个元素 )

X > Y 子选择器子选择器，留意 X > Y 与 X Y 的区别，后者是子孙选择器，即无视层级，而 X > Y 是字选择器，只匹配 X 下的子元素 Y 。从理论上来讲 X > Y 是值得提倡选择器，可惜 IE6 不支持。 X ~ Y 相邻选择器 Example soure code: ul~p{ color:green; } 说明：相邻选择器，与 X+Y 类似，不同的是 X ~ Y 匹配的是元素集合，比如上述代码，匹配的是所有 ul 相邻的 p X[title] 属性选择器 Example soure code: a[title] { color: green; } 说明：属性选择器，比如上述代码匹配的是带有 title 属性的链接元素。 X[title=“”] 另一种属性选择器 Example soure code: a[title=“I love telligem”]{ color:blue; } 说明：属性选择器，上述代码不只匹配带有 title 属性，更匹配 title 属性等于“ I love telligem" 的链接元素。 [] 内不只可用 title 属性，还可以使用其他属性。

X[title*=“”] 模糊匹配属性选择器 Example source code: a[title*=“ 祥” ] ｛ color:blue; ｝说明：加了 * 号，意味着是模糊匹配，比如上述代码，会匹配 title 属性为明或明河或明河共影等带有明字的链接属性。 X[title^=“”] 另一种模糊匹配属性选择器 Example source code: a[title^=“ 祥” ] ｛ color:blue; ｝说明：模糊匹配 , 与 * 的作用相反， ^ 起到排除的作用，比如上述代码，会匹配 title 属性不带有明字的链接属性。 X[href$=“”] 很实用的属性选择器 Example source code: a[href^=“.png”] ｛ color:blue; ｝说明：在属性选择器中多一个 $ 符号，用于匹配结尾为特定字符串的元素，比如上述代码匹配的就是 href 属性值的结尾为 .png 的链接。

X[data-*=“”] 不太常用的属性选择器 Example source code: a[data-filetype="image"] { color: red; } 说明 :data-filetype 这个属性目前用的实在不多，但有些场合非常好用。比如我要匹配所有的数据类型为图片的链接，如果使用 X[href$=“”] 的方式如下： Example source code: a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; } 而使用 data-filetype ，只要： a[data-filetype="image"] { color: red; } 你也可以提前给没一个链接添加一个 data-filetype attribute X:checked 另一种伪类选择器 input[type=radio]:checked{ border:1px soild #000; }

X[foo~=“”] 非常少用的选择器 Example source code: a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; } 说明：这也是非常少用的选择器，加上 ~ 号，有一种情况特别适用，比如你有个 data-filetype=”external image” 属性，这时候我希望分别针对 external 和 image 样式控制。 Example soure code: a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; } 说明：上述代码会匹配 data-filetype=”external” 、 data-filetype=”image” 、 data-filetype=”external image” 的 a 。

六、如何做好浏览器兼容性（ CSS ）？为什么无法定义 1px 左右高度的容器 IE6 下这个问题是因为默认的行高造成的 , 解决的方法也有很多 , 例如 :overflow:hidden | zoom:0.08 | line-height:1px cursor:hand VS cursor:pointer 问题： firefox 不支持 hand, 但 ie 支持 pointer 。解决方法：统一使用 pointer 。 css 中的 width 和 padding 在 IE7 和 FF 中 width 宽度不包括 padding ，在 Ie6 中包括 padding. 怎么样才能让层显示在 flash 之上呢？解决方法：给 flash 设置透明 <param name=”wmode” value=”transparent” />

ul 和 ol 列表缩进问题消除 ul 、 ol 等列表的缩进时，样式应写成 : {list-style:none;margin:0px;padding:0px;} 显示类 display:block,inline 两个元素 display:block; // 可以为内嵌元素模拟为块元素 display:inline; // 实现同一行排列的的效果 display:table; //for FF, 模拟 table 的效果 display:block 块元素，元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的 100% ，除非设定一个宽度 <div> ， <p> ， <h1> ， <form> ， <ul> 和 <li> 是块元素的例子 display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。 <span> ， <a> ， <label> ， <input> ， <img> ， <strong> 和 <em> 是 inline 元素的例子

margin 加倍的问题问题：设置为 float 的 div 在 ie 下设置的 margin 会加倍。解决方法：这是一个 ie6 都存在的 bug 。解决方案是在这个 div 里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的 css 为 #IamFloat{ float:left; margin:5px;/*IE 下理解为 10px*/ display:inline;/*IE 下再理解为 5px*/ } 背景透明问题 IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60); IE: filter: alpha(opacity=10); FF: opacity:0.6; FF: -moz-opacity:0.10; 最好两个都写，并将 opacity 属性放在下面

如何对齐文本与文本输入框解决方法：加上 vertical-align:middle; <style type="text/css"> <!— input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style> 元素水平居中问题解决方法： FF: margin:0 auto; IE: 父级 { text-align:center; } Div 的垂直居中问题 vertical-align:middle; 将行距增加到和整个 DIV 一样高： line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

margin 加倍的问题设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug 。解决方案是在这个 div 里面加上 display:inline; 例如： <div id=”imfloat”> 相应的 css 为 #imfloat{ float:left; margin:5px;/*IE 下理解为 10px*/ display:inline;/*IE 下再理解为 5px*/ } IE 捉迷藏的问题问题：当 div 应用复杂的时候每个栏中又有一些链接， DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对 #layout 使用 line-height 属性或者给 #layout 使用固定高和宽。页面结构尽量简单。

FF 和 IEBOX 模型解释不一致导致相差 2px 问题： box.style{width:100;border 1px;} ie 理解为 box.width = 100 ff 理解为 box.width = 100 + 1*2 = 102 // 加上边框 2px 解决方法： div{margin:30px!important;margin:28px;} 注意这两个 margin 的顺序一定不能写反， IE 不能识别 !important 这个属性，但别的浏览器可以识别。所以在 IE 下其实解释成这样： div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important; 为什么 web 标准中 IE 无法设置滚动条颜色了解决方法：将 body 换成 html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!— html{ scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style>

怎样使一个层垂直居中于浏览器中解决方法：使用百分比绝对定位 , 与外补丁负值的方法 , 负值的大小为其自身宽度高度除以二 <style type="text/css"> <!— div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --> </style> IE6 下为什么图片下有空隙产生解决这个 BUG 的方法也有很多 , 可以是改变 html 的排版 , 或者设置 img 为 display:block 或者设置 vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决 . 超链接访问过后 hover 样式就不出现的问题被点击访问过的超链接样式不在具有 hover 和 active 了。解决方法是改变 CSS 属性的排列顺序 : L-V-H-A Code: <style type="text/css"> <!— a:link {} a:visited {} a:hover {} a:active {}--> </style>

UL 的 padding 与 margin ul 标签在 FF 中默认是有 padding 值的 , 而在 IE 中只有 margin 默认有值 , 所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题 CSS HACK 的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 注意顺序。这样也属于 CSS HACK ，不过没有上面这样简洁。 #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */  <link rel="stylesheet" type="text/css" href="css.css" />  <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->  <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

css filter 的办法新建一个 css 样式如下： #item { width: 200px; height: 200px; background: red; } 新建一个 div, 并使用前面定义的 css 的样式： <div id="item">some text here</div> 在 body 表现这里加入 lang 属性 , 中文为 zh ： <body lang="en"> 现在对 div 元素再定义一个样式： *:lang(en) #item{ background:green !important; } 这样做是为了用 !important 覆盖原来的 css 样式 , 由于 :lang 选择器 ie7.0 并不支持 , 所以对这句话不会有任何作用 , 于是也达到了 ie6.0 下同样的效果 , 但是很不幸地的是 ,safari 同样不支持此属性 , 所以需要加入以下 css 样式： #item:empty { background: green !important } :empty 选择器为 css3 的规范 , 尽管 safari 并不支持此规范 , 但是还是会选择此元素 , 不管是否此元素存在 , 现在绿色会现在在除 ie 各版本以外的浏览器上。对 IE6 和 FF 的兼容可以考虑以前的 !important 个人比较喜欢用 ie7 和 ie8 在 head 部分加上 <meta content="ie=7" http-equiv="x-ua-compatible"> ie7 ， ie8 基本一样

Div+css布局

More Related Content

Similar to Div+css布局 (20)

Div+css布局

Editor's Notes