div+css如何布局头部导航条！
1、新建一个html页面。
2、在html页面上新建三个div标签，分别为这三个div添加class为:header、main、footer。
3、创建style标签用于设置css样式。在title标签下创建一个style标签，然后为header类设置div的高、背景颜色样式。
4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。
5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。
6、保存好html文件后使用浏览器查看效果。
7、在浏览器上看到div标签和浏览器存在一些空白的像素，为了去掉这些空白的像素我们需要把body标签设置外边框。
div+css教程教程
CSS/DIV页面布局设计
http://learning.artech.cn/category/css-div-web-design
CSS/DIV网页设计视频教程目录
2007年05月01日 星期二
欢迎您来到前沿视频教室，下面列出的是CSS/DIV网页设计视频教程列表，我们还会不断地推出相关的课程， 如果您有兴趣，欢迎您常来这里看一看！
CSS基础知识与核心概念
CSS初探 - CSS基本知识 - 第1课
CSS基本语法与核心概念 - CSS基本知识 - 第2课
设置丰富的文字效果 - CSS基本知识 - 第3课
CSS/DIV布局专题讲解
设置图片效果 - CSS/DIV专题讲解 - 第1课
设置网页背景 - CSS/DIV布局专题讲解 - 第2课
设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课
设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课
用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课
CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课
理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课
CSS排版 - CSS/DIV布局专题讲解 - 第8课
网页变幻 - CSS/DIV布局专题讲解 - 第9课
CSS与其他技术
CSS与Javascript的综合应用 - CSS与其他技术 - 第1课
CSS与XML的综合运用 - CSS与其他技术 - 第2课
CSS与AJAX的综合应用 - CSS与其他技术 - 第3课
CSS/DIV综合实践
博客设计DIY - CSS/DIV综合实践 - 第1课
小型工作室 - CSS/DIV综合实践 - 第2课
公司网站 - CSS/DIV综合实践 - 第3课
购物网站设计 - CSS/DIV综合实践 - 第4课
旅游观光网站设计 - CSS/DIV综合实践 - 第5课
DIV+CSS教程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; chart=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="Untitled-3.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">网页导航栏</div>
<div id="pagebody">
<div id="sidebar">分栏一</div>
<div id="mainbody">分栏二</div>
</div>
<div id="footer">网页尾部</div>
</div>
</body>
</html>
以上代码不用我多说吧？其中有一个注意点就是 <link rel="stylesheet" href="Untitled-3.css" type="text/css" />这是用来链接外部样式表的，而这段代码要放在<head></head>之间；
（新建一个HTML文档，把以上代码复制下来，然后粘贴到新建的HTML文档中的<body></body>之间）这里一共用到了七个ID，下面我将CSS样式表再传上来，然后就样式表中的一些相关属性再一一细说！！！！！！
！
！
！
！
新建一个文档，把后辍改为.css，然后把以下代码复制到.CSS样式表中即可；
下面来详细说说其中代码的起到的功能；由于为了让你看的明白，加了颜色，色彩搭配上不是很合适，不好意思了！！！！
body{
margin:0px;
padding:0px;
font-size:12px;
text-align:center;
background-color:#999999;
}
/*body是页面整体布局的设置，参数margin是外部边的样式；他的顺序是：上－右－下－左； 参数padding是内边的样式，顺序与margin是一样的；font-size是字体大小;参数text-align是内容位置，center是居中显示，还有其它参数可供选择，这里就不一一详述。参数background-color是背景颜色*/
a:link {
color: #CC9900;
}
a:visited {
color: #0000FF;
}
a:hover {
color: #009900;
}
a:active {
color: #FF0000;
}
/*以上是链接样式 */
#container{
width:800px;
height:500px;
background-color:#0099FF;
}
/*以上是总体DIV的样式，其中属性：width是宽；height是高；background-color是背景色；以后样式中属性值相同处不再复述。明白吗？呵呵*/
#header{
width:750px;
height:100px;
background-color:#FF6600;
}
/*以上的代码是你要的导航头部*/
#pagebody{
width:690px;
height:240px;
background-color:#339933;
margin:10px;
padding:20px;
}
/*以上这段代码是信息主要区域了，新闻呀！！！商品呀！！！！图片呀！！！主要的都在这里面写了*/
#footer{
width:750px;
height:100px;
background-color:#996600;
}
/*以上这段代码就是你要的结尾了！*/
#sidebar{
width:350px;
height:250px;
float:left;
background-color:#FF0000;
}
#mainbody{
width:340px;
height:250px;
float:right;
background-color:#FF00FF;
}
/*以上两段代码是为了让你看明白怎么加入主区域内的分栏而写，其中有一个参数要特别说一下，那就是float这个属性了，它是让#sidebar与#mainbody这两个ID一个靠左一个靠右，如果不这样设置的话，那么这两个ID就会挤在一起了。明白了吗？*/
不清楚之处请告诉我，我再详细解答给你！
好好学吧！只要持之以恒就一定会学会的！刚开始的时候是有些摸不着头脑，多看资料，多看书 多做练习，第一遍看不懂是正常的，第二遍如果还看不懂也没关系，一直看下去，只到看懂为止，古人云：书读万遍其意自现呀！呵呵，这些都是题外话，有点MJ了，呵呵！！！不要只看不练习，那样看多少都是徒劳的！一定要练习，多练习；正所谓，熟能生巧。
贴子就写到这里了。共同学习，一起进步吧！！！！
DIV+CSS布局网页的教程
推荐去看看《精通CSS》
我就是从那里开始看的···
网上的地址在这里 http://www.enet.com.cn/eschool/video/cpcss/
你也可以去弄本CSS中文完全参考手册.chm 来边做边参考
地址：http://www.jzxue.com/System/plus/download.php?open=1&aid=1463&cid=3&link=aHR0cDovL3h1bmxlaS5qenh1ZS5jb20vMjAwOS0yLzYvQ1NTzerIq7LOv7zK1rLhMy4wLnJhcg%253D%253D
谁会div+CSS教教我 可以吗 提供资料 也好啊
楼主您好，我会，楼主想要资料，可以私信发给你，谢谢，记得采纳我哟！下面是科普DIV+CSS
DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提及DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。
“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。
方法
css是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
在HTML文档中加入CSS
样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。
发展
1、样式定义放在一个单独的文件中，例：新建一个后辍为CSS的样式定义。
元素{ 属性color:值red；} 在head段使用<link>标记，
引用语法：<link rel=”stylesheet” type=”text/css” href=”样式表URL” />
2、嵌入式样式表：
<style>元素段必须出现在head段内，有一个开始和结束标记，并且可以有多个<style>段
语法格式： <style type=”text/css”>
…样式定义…
2样式编辑
3、在嵌入式样式表中我们可以使用@import导入一个外部样式表，例：
<style type=”text/css”>
@import url(外部样式表位置)；
…其它嵌入式的样式定义…
</style>
4、内联样式表：
写在开始标记里面，比如你要H1变红色，
<h1 style=”color:red;”>变为红色</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 {属性：值；}
3优先级编辑
介绍
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
优先说明
内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pudo-class)和属*(attribute)选择符 > 类别(type)，伪对象(pudo-element)
一,解释：
*内联样式(inline style)：元素的style属*，比如 <div style="color:red;"></div> ,其中的color:red;就是内联样式
*ID选择符：元素的id属*，比如 <div id="content"></div> 可以用ID选择符#content
*类选择符：比如<div class="box"></div>，可以使用类选择符 .box
*伪类(pudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属性选择符(attribute lectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type lector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pudo-element lector)：比如div:first-letter,div元素下的第一个单词。
多重CSS样式定义，属性追加重复最后优先原则
一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：
我们先定义两个样式
.one{width:200px;background:url(images/imgA.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(images/imgB.jpg) no-repeat left top;}
在页面代码中，我们可以这样调用:<div class="one two"></div>
这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？
<div class="one two"></div>应用到的样式如下：
width:200px;
border:10px solid #000;
background:url(images/imgB.jpg) no-repeat left top;
因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则
就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
二、CSS的调用
页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样：
<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
<link href="css/style.css" type="text/css" rel="stylesheet"/>
"@import"命令方法：类以下代码, <style type="text/css" media="all">@import url( css/style01.css );</style>
本人推荐使用第二种调用方法（外部调用法）
[1]
优先规则
既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1、统计选择符中的ID属性个数。
2、统计选择符中的CLASS属性个数。
3、统计选择符中的HTML标记名个数。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
例如：
1、每个ID选择符(#someid)，加 0,1,0,0。
2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
3、每个元素或伪元素(:firstchild)等，加0,0,0,1。
4、其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。[1]
4使用误区编辑
1、DIV+CSS的合理之处在于可以进行网页的统一设计管理，通过一个样式表，牵一发而动全身，只要修改样式表，就可以统一全站的[2]风格，如果为一个页面单独做一个样式表，或者一个div就做一个样式表，没有全局设计观念，那么这个div+CSS的设计方式就完全没有必要，甚至成了累赘;
2、像Table一样用DIV+CSS，无穷尽的嵌套，其效果与Table设计没有两样，并不会带来搜索引擎的优化效果，反而会增加页面的负担;
3、推崇Div+CSS，却不考虑兼容性，TABLE设计由来已久，得到浏览器的广泛支持，所以显示效果很好，不会出现错位情况，但是DIV+CSS却在 部分浏览器中会发生页面错位的情况，因此在进行设计的时候也要考虑到不同浏览器的情况，进行更改和调试。
5作用编辑
SEO
1、精简的代码，使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处;
2、提高访问速度、增加用户体验性
使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。
3、div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化o，降低网页大小，让网页体积变得更小。注意：div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。
怎么定义1个DIV的CSS样式？
加入样式可以有两种途径，1是适用ID，2是适用CLASS
如果DIV的ID是AA那么代码会显示为<div id="aa"></div>
class则为<div class="aa"></div>
那么CSS应该写在哪里呢
如果页面是引入了CSS文件，那么你就找到CSS文件中
id的定义样式格式为#aa{background:red;}
class的定义样式格式为.aa{background:red;}
没错 就是#和.的区别
那么如果没有引入CSS文件应该放在哪里呢
看到页面代码头部有个<head>标签么
在<head>和</head>之间加入
<style>#aa{background:red;}</style>
即可。
同样也可以写多个
<style>
#aa{background:red;}
#bb{background:red;}
</style>
by--精通css
