浅谈div+css页面布局

浏览数：23 / 时间：2015年06月09日

解释：

　　DIV+CSS是Web设计标准，是一种网页布局方法。与传统的通过表格(table)布局定位的方式不同，它可以实现网页页面内容与表现相分离。“DIV+CSS”其实是错误的叫法，而标准的叫法应该是XHTML+CSS。因为DIV和table都是XHTML或HTML语言中的一个标记，而ＣＳＳ只是一种表现形式。

方法：

　　在ＨＴＭＬ文档中加入ＣＳＳ。ｃｓｓ是层叠样式表（Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ）的缩写，用于定义ＨＴＭＬ元素的显示形式，是Ｗ３Ｃ推出的格式化网页内容的标准技术，也是网页设计者必须掌握的技术之一。

发展：

1.样式定义放在一个单独的文件中，例：新建一个后辍为CSS的样式定义。

元素{ 属性color:值red；} 在head段使用<link>标记，

引用语法：<link rel=”stylesheet” type=”text/css” href=”样式表URL” />

2.嵌入式样式表：

语法格式： <style type=”text/css”>

…样式定义…

样式

3.在嵌入式样式表中我们可以使用@import导入一个外部样式表，例：

@import url(外部样式表位置)；

…其它嵌入式的样式定义…

</style>

4.内联样式表：

写在开始标记里面，比如你要H1变红色，

总结：三种样式表优先使用外部样式表、嵌入式样式表用来调试用的、一般不使用内联样式表。

5.样式规则：

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略,,声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束，每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。

选择器

声明块

选择一个元素

声明{ }

属性 : 值;

冒号开始分号结束

6、注释：有关的详细内容在中有详细的解释。

7、选择器分组

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4 { color red;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

例：路径不全： #maincontent p, ul{ border-top:1pxsolid #ddd;}

正确写法：#maincontent p, #maincontent ul{ border-top:1pxsolid #ddd;}

例：结尾多了一个逗号： .a1 p, .a1 ul,{color:red;}

8、选择器

元素选择器：语法格式：元素{color: blue;}

类选择器：语法格式： .类名{属性: 值;}

ID选择器：#id名 {属性 : 值；} ID名不能重复

通配符选择器：语法格式：*{属性:值;}

伪类选择器：

伪类选择器可以以不同方式格式化超级链接<a>元素的四种不同状态：以下顺序依次写；（记忆方法：a Love or Hate）

a:link 是用在未访问的链接的选择器

a:visited 是用在已访问过的链接的选择器

a:hover 是用在鼠标光标放在其上的链接的选择器

a:active 是用在获得焦点（比如，被点击）的链接的选择器

如果需要，我们可以组合这几个状态，按顺序写：

a:link，a:visited { color :blue;}

a:hover ，a:active { color :blue;}

9、伪元素选择器

标准的选择器不能格式化一个元素内容的第一个字母或者第一行，而伪元素选择器能实现：

所有浏览器支持的有两种：：first-line和：first-letter

例：段落的第一行：p：first-line {属性：值；}

例：段落的第一个字母：p：first-letter {属性：值；}

优先级：

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 > 类别(type)，伪对象(pseudo-element)。

使用误区：

1、DIV+CSS的合理之处在于可以进行网页的统一设计管理，通过一个样式表，牵一发而动全身，只要修改样式表，就可以统一全站的风格，如果为一个页面单独做一个样式表，或者一个div就做一个样式表，没有全局设计观念，那么这个div+CSS的设计方式就完全没有必要，甚至成了累赘;

2、像Table一样用DIV+CSS，无穷尽的嵌套，其效果与Table设计没有两样，并不会带来搜索引擎的优化效果，反而会增加页面的负担;

3、推崇Div+CSS，却不考虑兼容性，TABLE设计由来已久，得到浏览器的广泛支持，所以显示效果很好，不会出现错位情况，但是DIV+CSS却在部分浏览器中会发生页面错位的情况，因此在进行设计的时候也要考虑到不同浏览器的情况，进行更改和调试。

作用：

1、精简的代码，使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处;

2、提高访问速度、增加用户体验性

使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。

3、div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。注意：div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

浅谈div+css页面布局