我想凡是来到“CSS学习网”的同学，很大部分是冲着DIV+CSS来的，目的就是学习DIV+CSS的，说的再直接一些就是学习如何用DIV+CSS布局页面，如何从一张图片制作成标准的DIV+CSS页面。

DIV+CSS这种叫法其实是一种很错误的叫法，这是国人一厢情愿的叫法，而标准的叫法是什么呢？

呵呵，没错，是xHTML+CSS，不理解吧，我来细细给你说，如果下面的你能理解，保证面试的时候会有很大的帮助，同时也可以让你后面的学习更轻松。

为什么国人将这种页面布局的方法叫做DIV+CSS？

因为过去布局页面基本上都是用Table布局，也可以说是Table+CSS，而现在布局页面呢，用DIV，所以叫DIV+CSS，听起来也挺合理，认为这样布局出来的页面也就是标准页面，甚至有些人走了个极端，看到其他网站用到Table，就会嘲笑页面做的不够标准，好似用不用Table成为了页面是否标准的一个标尺。现在我可以告诉大家，凡是有着这种行为的，都学得不咋样，很皮毛！

用了Table页面就不标准了?!纯粹无稽之谈，那什么才是标准页面呢？先看一个专业概念，WEB标准，然后我会问三个问题，你来回答：

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

看明白了没有？问题来了!先不要看答案，从上面的概念中找出

问题一：WEB标准有几部分组成？

问题二：结构化标准语言是什么？

问题三：表现标准语言是什么？

答案一：三部分，结构、表现、行为

答案二：XHTML和XML

答案三：CSS

看完上面三个问题，哪什么是标准页面呢？呵呵，说白了就是按照WEB标准制作的页面，从第二个问题和第三个问题中，我们又可以说，用XHTML和CSS制作的页面就是标准页面，也就是说xHTML+CSS制作的页面就是标准页面。怎么样，理解了吧

为什么不说XML+CSS呢？

很简单，因为XML过于复杂，且当前的大部分浏览器都不完全支持XML。所以就不用它来布局页面喽!

既然xHTML+CSS制作页面就是标准页面了，又因为xHTML中不只有DIV标签，还有span、p、a、ul、li、dl、dt、dd….，即使我不用DIV，用其他标签(比如:ul、li)制作出来的页面也是标准页面！所以说用DIV+CSS来制作标准页面这句话就很狭隘喽!如果满屏全部都是DIV那也算不上标准页面，曾经由一个朋友告诉我，说他的页面全部用的DIV，每个模块，每个功能区域，就连一条线都是纯DIV实现，并且相当自豪的告诉我，没有人比他做的页面更标准的了，他不但对WEB标准页面的理解有差错还犯了一个很大的错误，xHTML中的每一个标签都有其作用，各司其职，各守其责，要用的恰到好处，这才算是标准页面，DIV不是万能的哟!！

说到这里大家应该明白，这种Web2.0时代的布局页面的方法，叫DIV+CSS是不准确的，应该叫xHTML+CSS。

凡是看到这节的同学们，以后尽可能说xHTML+CSS，不要再说DIV+CSS喽，如果非要说，也要加上一句说明哟，比如

面试官：你对DIV+CSS了解么？

应聘者：DIV+CSS准确的说应该叫xHTML+CSS，我对这种页面布局方法非常了解！……

如果你是面试官，你对这个应聘者，感觉如何呢？呵呵呵

使用Table布局页面为什么是不明智的？

大家看到标题，不要误解认为在页面中不能使用Table，而是可以使用Table，但是尽量不要用Table去布局页面，为什么这么说呢，因为使用Table布局页面会使页面失去灵活性，怎么个灵活法呢，比如今天你好不容易做出来的页面，第二天老板说我不喜欢登录模块放到右边，还是放到左边，通知板块放到右侧去，页面风格最好一个月换一种，如果遇到这种老板，提出这种要求，并且你的页面是用Table布局的，那么你会崩溃的，工作量那是大大滴!，如果不相信的话，你们自己可以找个页面，用Table布局出来，然后变换板块和风格，你就会体会到Table布局的不灵活性，这是为什么呢，因为Table的诞生是为存储数据用的，功能和Execel差不多，不是用来布局用的，只不过后来大家发现用Table可以把想放的页面元素，比如图片，放到任何自己想放的地方，且做出来的页面可以兼容多种浏览器，于是Table就承担起了布局页面的重担，这一做就是好几年... ...直到Web2.0时代的到来，Table才从布局页面的工作中逐渐解脱，专心的去存储数据

既然Table是为存储数据诞生的，那谁的诞生是为了页面布局呢？

答案就是:DIV，DIV就是为布局页面而诞生的，只不过一直不被人认同，原因就是DIV去布局页面需要CSS的配合，使用比较繁琐，还不如Table拖拖拽拽页面就布局OK了，感觉还不如Table方便，从而DIV被人们放置在一个无人问津的昏暗角落里，暗暗的等待着伯乐的出现，直到2003年美国加州Scott Design公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲，使DIV看到了阳光，走出了阴霾... ...

说了那么多，我们对比一下Table布局页面和DIV布局页面的优缺点

使用表格进行页面布局会带来很多问题：

* 把格式数据混入你的内容中。这使得文件的大小无谓地变大，而用户访问每个页面时都必须下载一次这样的格式信息,带宽并非免费。

* 这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。

* 这还使我们保持整个站点的视觉的一致性极难，花费也极高。

* 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。

而使用CSS进行网页布局，它会：

* 使你的页面载入得更快

* 降低你的流量费用

* 让你在修改设计时更有效率而代价更低

* 帮助你的整个站点保持视觉的一致性

* 让你的站点可以更好地被搜索引擎找到

* 使你的站点对浏览者和浏览器更具亲和力

* 在世界上越来越多人采用 Web 标准时，它还能提高你的职场竞争实力 (事实上也就是降低失业的风险)。

网上有一篇文章，转过来，文章着重介绍DIV三点优势,也许看完文章后，就像社区元老heflyaway说的感觉作者比较迷恋Table，每篇文章都不可避免的带有个人色彩，而转出来的目的，其实就是想给大家降降DIV+CSS的温度，免得“走火入魔”，视DIV+CSS是为万能的，如果想学好CSS布局页面，就要从多个方面看它，好了，不多说了，下面是作者对CSS布局页面的三点优势及理解：

1、内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。

2、改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。

3、搜索引擎更友好，排名更容易靠前。

第一点、内容和形式分离

网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。

这个是DIV+CSS技术最显著的特点，也是CSS存在的根源。完全的颠覆现在传统（table）网页设计的技术。所有现在用table制作的内容，都可以用CSS来解决掉，而且解决的更完美，更强大。不需要大家再表格套表格，让生成的网页文件大小更精简，更小。table时代，一个页面表格达到10个以上是非常普遍的事情，但是现在用DIV+CSS，一个table都可以不用，就完全达到之前的效果，这就直接导致网页文件大小比使用table时减少50%-80%，更节约各位站长的硬盘空间，访问者打开网页时更快，而且用div+CSS时，不像以往使用table时，必须把全部table读取完了才显示页面内容，现在是可以读一个div就显示一个效果，大家打开网页不用等。好处真是明显而强大。

这个优点的确是显著的，凡是使用传统table建的网页，内容多的话，有时候达到30K左右都有可能，文件打了打开时，肯定就有0.0几秒的延迟。使用DIV+CSS，你前台打开看到的全是直接内容，CSS文件都是导入链接的，是另一个文件，根本和HTML文件大小没关系，这种生成的HTML文件，一个也就10K左右大小。

第二点，改版网站更简单容易了

不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。

DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站HTML页面，只需要重新写CSS，再用新CSS覆盖以前的CSS就可以实现改版了

第三点，搜索引擎更友好，确实能够对SEO起到一定的帮助。

通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。

综上所述，个人感觉DIV+CSS不能太迷信它的很好很强大，它作为制作网页，美化网页的一个重要辅助是很强大方便的。可以弥补table制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时费力，对于全国中小型网站长来说，真的不太适合。我个人觉得用table+DIV+CSS是最好的组合，也是最省时省力的办法。

还需要再说明一下，本节讲得是Table布局页面和CSS布局页面的问题，讨论的是“布局页面”上用谁更好，并不是说在CSS布局的页面内不能用Table，真正厉害的人物是DIV、Table、CSS用得恰到好处，他们三个各做各的事情，DIV布局页面，Table存储数据，CSS给页面穿衣服！

xHTML+CSS与SEO的内容，后面章节会详细给大家介绍，这里就先说一些，让大家对xHTML+CSS与SEO有一定的认识，为后面制作页面打基础，毕竟我们做出来的页面还是要给搜索引擎看的，所以不能不提提xHTML+CSS与SEO的关系。

1)将页面中最重要的内容用h1标签括起来，h1的内容就和页面title很自然的包含了站点或者页面的核心关键词，搜索引擎很重视h1标签的内容哟

2)合理的运用h2、h3等标题标签，他们对于页面来说就是文章不同的等级或者不同的功能区域的标志性元素

3)页面meta信息不可忽视，一定要包含页面核心的内容

4)为了便于搜索引擎更方便的抓取，要尽可能的保证HTML页面代码纯净，强调一下，既然是xHTML+CSS布局页面，所以CSS代码要单独写在一个文件内，保证CSS部分和HTML部分彻底分离；html页面中使用id和class，尽可能的避免style="";尽量使用标准的CSS命名规范，从这里就可以看出你这个页面重构师是否专业哟；尽量使用CSS的缩写以节省代码，例如padding:10px 20px 10px 20px;缩写为padding:10px20px;最好不要在HTML页面用font、center这种标签。

5)在HTML页面中strong标签是可以使用的，可以进一步强化关键词和相应的文字信息。

6)页面中的javascript代码会对搜索引擎分析页面内容产生干扰，可以将javascript代码封装在一个.js文件中外部调用。

7)尽可能的加入alt注释，因为百度和google都有搜索图片的功能，如果加了alt，就更方便搜索蜘蛛的爬行，搜索相应关键词，就可能出现你网站上的图片，点击图片不就进入你的网站了嘛，就又多了点流量吧。

本节主要讲解，两个内容，

第一：CSS如何控制页面样式，有几种方式；

第二：这些方式出现在同一个页面时的优先级。

使用xHTML+CSS布局页面，其中有个很重要的特点就是内容与表象相分离，内容指HTML页面代码，表象就是CSS代码了，如果把页面看成穿着衣服的人的话，人就是HTML，是内容，而衣服呢就是CSS，是表象，现在出现的问题是，如何让CSS去控制页面？或者说，如何让衣服穿在人身上，好体现出人得风格特点；不同的CSS就可以使页面出现不同的风格适用不同的网站，而不同的衣服，人穿上后就会体现出不同的职业。

第一：如何让CSS去控制HTML页面效果呢？

有这么4种方式，行内方式、内嵌方式、链接方式、导入方式

1）行内方式

行内方式是4种样式中最直接最简单的一种，直接对HTML标签适用style=""，例如：

虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。

2）内嵌方式

内嵌方式就是将CSS代码写在之间，并且用

进行声明，例如：

=>

无标题文档

=>

全国的CSS爱好者汇聚于此，如果不来，你就OUT喽!我们的口号是：

“分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源”

如果您也愿意，就加入我们吧!

内嵌方式，大家应该也能意识到，即使有公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护也大，如果文件很少，CSS代码也不多，这种方式还是很不错的。

3）链接方式

链接方式是使用频率最高，最实用的方式，只需要在之间加上

，就可以了，这种方式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，只需要修改公共CSS文件就OK了，相当的方便，这才是我们xHTML+CSS制作页面提倡的方式。

HTML代码

=>

无标题文档

=>

全国的CSS爱好者汇聚于此，如果不来，你就OUT喽!我们的口号是：

“分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源”

如果您也愿意，就加入我们吧!

CSS代码

#div1{width:64px; height:64px; float:left;}

#div1 img{width:64px; height:64px;}

4)导入方式

    导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。

具体导入样式和链接样式有什么区别，可以参看这篇文章《CSS:@import与link的具体区别》，不过我还是建议大家用链接方式！

第二：四种样式的优先级

如果这上面的四种方式中的两种用于同一个页面后，就会出现优先级的问题，这里我就不再举例子来说明了，大家在下面自己证明一下下面的结论

四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式

上节课我们讲了一下CSS通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总共有四种方式行内方式、内嵌方式、链接方式、导入方式，大家通过这四种方式就可以实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器共有三种：标签选择器、ID选择器、类选择器。

为了后面的对选择器的解释更容易理解，在这里先打个比喻，如果把你所处的环境视为HTML页面的话，环境里的每一个人则相当于HTML页面内标签元素，每个人都有一个ID(***)，那么html中的每一个标签也都有自己的ID，大家都知道ID是唯一的，不可能重复。

【标签选择器】

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

p{

font-size:12px;

background:#900;

color:090;

}

则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易！

【ID选择器】

ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次，不过就不符合W3C标准了，那页面也就不是标准页面喽!，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID)，就像在你所处的环境中，你只有一个ID(***)，不可能重复！相信大家也能看出来，ID选择器更具有针对性，如：

先给某个HTML页面中的某个p标签起个ID，代码如下：

此处为p标签内的文字

在CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：

#one{

font-size:12px;

background:#900;

color:090;

}

这样页面中的某个p就会是CSS中定义的样式。

【类选择器】

这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢!呵呵，和ID选择器的用法类似，只不过把id换做class，如下：

此处为p标签内的文字

如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下

此处为p标签内的文字

这样页面中凡是加上class="one"的标签，样式都是一样的喽!CSS定义的时候和ID选择器差不多，只不过把#换成.，如下

.one{

font-size:12px;

background:#900;

color:090;

}

补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如：

此处为p标签内的文字

这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用

此处为p标签内的文字

【通用选择器】

到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”

*{此处为CSS代码}

强大之处是因为他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)，这样可以大大精简代码；既然有这么强大的功能为什么是用的最少呢，同样还是因为他的强大，他是对父级元素内的所有标签进行定义，所以只要你定义了，那么父级里面的所有的标签，甭管有没有必要，也都相当于加上了通用选择器里面的代码了，能这么说大家不能够完全理解，没关系，我给大家举个例子，请看下面

=>

无标题文档

这里是p标签区域

这里是a标签区域

这里是p标签区域

这里是a标签区域

大家运行一下上面的例子，div1里面的两个标签是不是样式一样，这就是通用选择器的强大之处，不管里面有多少个标签都会将样式加到所有标签内，如果div1里面得所有的标签都有一部分相同的CSS代码，那么可以把这部分代码提取出来，用通用选择器来定义，这样可以大大缩减代码，但是如果div1里面只要有一个和其他元素没有相同的代码，就不能用通用选择器来定义，这也就是CSS通用选择器不灵活的一点。现在大家明白为什么通用选择器是选择器里面功能最强大的但又是用的最少的选择器了吧,呵呵

对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端

*{margin:0; padding:0;}

为什么要这么用呢，因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对HTML标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下

body,div,p,a,ul,li{margin:0; padding:0;}

如果还需要dl、dt、dd标签重置，那就在上面加上就可以了，如下

body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

用到那些就写那些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面到这里大家更应该明白这句话“通用选择器是功能最强大但是用的最少的选择器”了吧!^_^

OK！选择器的内容我向大家应该都明白了，后面就继续讲解一下“选择器的集体声明”和“选择器的嵌套”

【选择器的集体声明】

在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如：

h1,h2,h3,h4,h5,h6{color:#900;}

#one,#three,.yellow{font-size:14px;}

#one{background:#ccc;}

#three{background:#ccc;}

.yellow{background:#ccc;}

和小学的提取公因式差不多，把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化CSS代码的一块，要记住哟!

【选择器的嵌套】

选择器也是可以嵌套的，如：

#div1 p a{color:#900;}/*意思是在ID为div1

内的p标签内的链接a标签的文字颜色为红色*/

这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器，CSS代码不就少了嘛!同样也是CSS代码优化的一块。

到这里，基本的选择器说完了，但是还需要给大家介绍一个“通用选择器”

*{此处为CSS代码}

好，这节课主要讲解了三种CSS代码选择器、选择器的声明、选择器的嵌套三块知识，要掌握好，如果有不懂，可以留言。

规范的命名也是Web标准中的重要一项，标准的命名可以更好的看懂代码，我想大家应该都有这种经历，某日翻出自己过去写的代码居然看不懂了，呵呵，为了避免这种情况我们就要规范化命名，再说了，现在一个项目不是一个人就可以完成的，是需要大家互相合作的，如果没有规范化命名，别人就无法看懂你的代码，大大降低了工作效率，所以必须规范化命名，这样还显着咱专业！

好了不多说了，关于CSS命名法，和其他的程序命名差不多，也是有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。

【骆驼命名法】

说到骆驼大家肯定会想到它那明显的特征，背部的隆起，一高一低的，我们的命名也要这样一高一低，怎么才能这样，就用大小写字母呗!，大写的英文就相当于骆驼背部的凸起，小写的就是凹下去的地方了，但是这个也是有规则的，就是第一个字母要小写，后面的词的第一个字母就要用大写，如下：

#headerBlock

.navMenuRedButton

【帕斯卡命名法】

这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下

#HeaderBlock

.NavMenuRedButton

【匈牙利命名法】

匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如：

#head_navigation

.red_navMenuButton

以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则就可以，就是“容易理解，容易认，方便协同工作”就OK了，没有必要强调是那种命名法。

以下为于页面模块的常用命名

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

到这节课，都是CSS非常基础的知识，是为了照顾没有一点基础的同学，从下节课开始，将介绍CSS布局页面中的很重要的两个概念，也是必须要掌握的概念，如果不能很好理解的话后面再布局页面的时候就会出现很多问题。

1）盒子模型

2）内联元素VS块状元素

盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！

什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子大家熟悉吧，哈哈，这里提到的盒子模型你就可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢

好！既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"

OK!！这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图

我们的页面就是由许许多多的盒子组成的哟!!!，但是和现实生活中的盒子我们会忽略外边距(margin)，但是在页面中，我们是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，我们也不要忽略它，要知道他是存在的。

怎么样，理解“盒子模型”了没？就是这么点知识

在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。

注：这节课看似挺长，其实内容很少，通过举例子让大家更容易理解而已，不要被眼前的文字和代码吓到哟!

块状元素

一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素

内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。

做了个对比表，帮助大家更容易理解。

	块状元素	内联元素
是否允许其他元素同处一行	no	yes
width和height是否起作用	yes	no

对于上面的概念，我们用实例的方式给大家讲明白，要注意听哟!

要求：ID为div1的红色(#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度均为100像素的div2。

CSS代码如下：

#div1{width:300px; height:300px; background:#900;}

#div2{width:100px; height:100px; background:#090;}

HTML代码如下：

为了方便初学者更好的学习，我把完整的代码发出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

=>

CSS学习网---“可容纳内联元素和其他块状元素”

怎么样，是不是下面的效果

如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在div1里放入一个链接a，内容为“可容纳内联元素和其他块状元素”颜色为白色。

CSS代码如下：

#div1{width:300px; height:300px; background:#900;}

#div2{width:100px; height:100px; background:#090;}

a{color:#fff;}

HTML代码如下：

可容纳内联元素和其他块状元素

是不是下面的效果

到这里，我们可以看得到div1这个块状元素里面拥有两个元素，一个是块状元素div2，另一个是内联元素a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素”，为什么要说一般呢，因为块状元素不只是用来做容器，有时还有其他用途，比如利用块状元素将上下两个元素隔开些距离，再比如利用块状元素来实现父级元素的高度自适应，这方面的内容会在后面详细讲解，因为不属于本节知识，就不多说。

好!！我们继续加条件，在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)区域块，代码如下

CSS代码如下：

#div1{width:300px; height:300px; background:#900;}

#div2{width:100px; height:100px; background:#090;}

#div3{width:100px; height:100px; background:#009;}

a{color:#fff;}

HTML代码如下：

可容纳内联元素和其他块状元素

是不是下面这个效果

是不是和自己事先想象的不一样，本以为蓝色会处于绿色的右侧，可是却位于下侧，如果你再加几个div4，div5同样的他们还是继续位于前一个下面，垂直排列，这就是块状元素概念中说的“块状元素排斥其他元素与其位于同一行”说白了，就是块状元素比较霸道，谁都别想和他坐同一行，甭管你是和他有亲戚关系的块状元素还是毫无联系的内联元素，都不行，都到下面一行待着去，看看例子中，绿色方块和蓝色方块是不是各处同一行，内联元素a也别想和他处一行，但是事情是没有绝对的，块状元素不是不允许其他元素和他处一行嘛，不是比较霸道嘛，没关系，咱有办法，具体什么办法，我们后面会详细讲解，知识不属于本节内容，就也不多说了，大家留意后面的教程唷!

到这里，我想大家对“块状元素”的概念已经比较清楚了，下面通过例子给大家继续解释“内联元素”的概念，当然还是继续加条件，加个什么条件呢，在a的后面再加一个内容为“Love CSS”的链接，所有链接的背景设置为淡橙色(#F93)

CSS代码如下：

#div1{width:300px; height:300px; background:#900;}

#div2{width:100px; height:100px; background:#090;}

#div3{width:100px; height:100px; background:#009;}

a{color:#fff; background:#F93;}

HTML代码如下：

可容纳内联元素和其他块状元素

Love CSS

效果是不是下面这个

两个连接a是不是处于同一行(不要忘记a是内联元素哟!)，这就解释了概念上说的“内联元素允许其他内联元素与其位于同一行”，为什么不说“内联元素允许其他元素与其位于同一行”，因为其他元素包括两种元素，内联元素和块状元素，它如果和内联元素在一块那就肯定在一行了，如果和块状元素在一块，即使它同意，他后面的块状元素也不同意，块状元素会另起一行位于它的下一行。

我们继续添加条件，现在大家给内联元素a在css中加上宽度和高度，比如width:100px;height:50px;看看有什么变化

CSS代码

#div1{width:300px; height:300px; background:#900;}

#div2{width:100px; height:100px; background:#090;}

#div3{width:100px; height:100px; background:#009;}

a{color:#fff; background:#F93;width:100px;height:50px;}

看到效果了没有，是不是没有任何变化呢，这就说明了概念中的内联元素的宽度(width)高度(height)不起作用，它的大小只随内部文本或者其他内联元素变化，具体证明算是给大家一个作业，自己来证明一下。

如果要让定义好的宽度和高度对内联元素起作用，有什么办法没有？答案是：当然。因为事情没有绝对的在CSS上面也成立，因为CSS中有两种元素，内联元素和块状元素，但是宽度和高度只对块状元素起作用，内联元素不起作用，如果我们把内联元素转化成块状元素，他不就具有了块状元素的特性了嘛，当然宽度和高度也就起作用了，如果你能想到这个思路，证明你的大脑现在非常活跃哟，这时候我们只需要给相应的内联元素加上一个属性display:block就可以了，如下

a{color:#fff; background:#F93;width:100px;height:50px;display:block;}

怎么样，起作用了吧，和下面的效果一样嘛!

为什么两个a不处于同一行了呢，那是因为这两个内联元素a都被转化成了块状元素，既然成功转化为块状元素，就应该具有块状元素最显著的一个特点，不允许其他元素与他同一行，所以这两个a垂直排列喽!

那有没有把法让他们处于同一行？当然有啦，后面课程会告诉大家^_^

好了，到这里，大家通过实例对内联元素的概念理解的也应该很透彻了，后面就列出所有的内联元素和块状元素，方便以后大家查阅

块元素(blockelement)

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易，也是CSSlayout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表

内联元素(inlineelement)

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体(不推荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码(在引用源码的时候需要)

dfn - 定义字段

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线(不推荐)

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 定义变量

课程关键词：盒模型、块状元素与内联元素、CSS选择器

【例子】

要求：

1）宽度、高度均是200像素；

2）颜色为红色#900；

自己做做，看看能不能作出来？先不要看我的代码，如果真的做不出来，就下载下来，跟着我下面说的一步一步修改。

下面是我的代码：  例子1.rar(498 Bytes)

在IE6和FF中显示效果如下图：

怎么样，比较容易吧!，但是你们有没有发现，红色区域离浏览器的顶部和左边的边距IE6和FF的不一样，有没有发现？这样的话，我们作出来的页面浏览器就不兼容了，效果不一样了？为什么会这样？

这是因为每个浏览器都有一个内置的CSS文件，当你没有对某个标签的属性设置的时候，浏览器就会应用内置的CSS文件，怎么才能做到浏览器兼容？不着急，你只需要在CSS文件中，将我们目前应用到得标签body和div置零就OK了，代码这么写

body,div{padding:0; margin:0;}

当把这句话加上之后，是不是两款浏览器显示效果一样了吧!如下图

好，我们接着来，现在再加一个条件

3）让红色区域与浏览器的顶部和左边距离为20像素；

怎么样，有没有思路？没有思路没关系，继续向下看

我们，只需要设置红色方块的外边距就可以了，添加如下CSS代码：

margin-top:20px;

margin-left:20px;

这样就使红色区域定位于页面坐标(20,20)处了，与浏览器上边距和左边距都为20像素。

不过上面的这种写法我们可以精简为

margin:20px 0 0 20px;

其中的数值顺序是：上右下左。

而margin:20px 0;则和margin:20px 020px 0;是等价的哟!只不过是更加精简而已，这样写CSS加载速度会更快。

我们接着将问题延伸，怎样才能让红色区域水平定位于浏览器的正中间，无论浏览器窗口的大小，显示器分辨率的大小。

也很简单，刚刚加的两句话"margin-top:20px;margin-left:20px;"修改为

margin:0 auto;

怎么样，有意思吧，红色区域是不是位于浏览器的正中间了!

好!！到这里第一节课结束，是不是很简单，或者太简单了!!!KwooJan可以保证,后面的课程照样很简单，当你看完教程，肯定会说XHTML+CSS就这么简单！easy！

如果你有看不懂的，赶紧点击文章最上面的课程关键词，只要你看了这些关键词，相信你绝对能明白！

第一次写教程，不知道大家能不能看懂，能不能接受，如果你觉着不错，就顶我吧，如果你有建议或者想法，就直接留言，我会在下节课改进！

课程关键词：浮动

页面布局有两种方式

1）浮动Float

2）定位Position

今天就来一个小小的练习，让大家理解Float的含义

【例子】

要求：

1）两个方块，一个红色#900，一个蓝色#009；

2）红色方块宽度和高度均为200像素，蓝色方块

宽度为300像素，高度为200像素；

3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；

页面效果如下：

大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行，如图

此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：

这时候就需要注意了，FF中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。

怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“Float:left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了!

到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟，比如KwooJan的博客中间内容部分，分为左边(LEFT)和右边(RIGHT)，就是要用上面这个方法布局的哟，如下图

细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：

其实这是IE6的一个BUG，(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:

1）要为块状元素；

2）要左侧浮动；

3）要有左外边距(margin-left)

解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下：

#redBlock{

width:200px;

height:200px;

background:#900;

margin-top:20px;

margin-left:20px;

float:left;

display:inline;

}

现在再看看，是不是IE6和FF显示一样了呢!

呵呵，这节课也比较容易吧，如果大家有不明白的可以留言，我会做进一步解释。

下节课，我们讲讲“浮动清除(Clear)”问题

课程关键词：清除浮动Clear

还记得第二课我们做的例子的效果么？最后效果是，红色方块和蓝色方块都处于一行，我们使用“Float:left”，打击了块状元素的“霸道”即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了“Float:left;”后，红色方块终于允许蓝色方块和它处于同一行。如图：

我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的尾后；

在上个例子中，为了达到浏览器兼容性，我们分别在红色蓝色方块CSS代码中分别加了“Float:left;”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100的绿色方块，并让其处于第二行，效果如下图：

导致绿色拍到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有"Float:left;"，但是为了浏览器兼容性，又不能去掉(什么？这句话看不明白，只能说明第二节课你没有好好学，好好品味！)，怎么办？

好办!！只要在CSS代码中加入下面这段代码：

.clear{clear:both;}

并在HTML代码中加入下面代码：

上面这句话究竟加在那个位置呢，要加在蓝色方块和绿色方块中间，然后看看效果是不是我们想要的了!^_^

博客的左侧

博客的右侧

="clear">

博客的版权信息

目的就是为了清除蓝色方块的浮动对下面绿色方块的影响！是影响哟!是清除影响，而不是清除蓝色方块的浮动，或者说清除蓝色方块的浮动对下面区域块产生的作用！（仔细品品我说的这句话！）

如果还是不明白，你就在红色方块和蓝色方块中间加上“”，看看效果变成什么样子，然后再品品我刚才说的话！="clear">

制作导航

CSS标签重置

对于XHTML+CSS布局起着一个重要的决定性作用，它是提高页面浏览器兼容性的第一步。

那么什么是标签重置呢？

顾名思义，就是对HTML中的所有标签属性重置，因为每个浏览器都有一个自己默认的CSS文件，对HTML中的所有的标签进行定义，以便没有定义CSS的页面能够正常显示在页面，页面在加载的时候如果没有找到自带的CSS文件，浏览器就用事先为您准备好的CSS样式，但是这个对于页面布局，没有什么用，所以我们需要将它们重新设置，不过标签有那么多，属性那么多，怎么设置？！这都是个问题！

哈哈，不要着急，问题很容易解决，其实在我们布局页面的时候，将最容易影响页面布局的是HTML标签中的内外边距，只要我们将最常用的标签的内外边距设为零就OK了!比如一个页面中用到下面div,p,ul,li四个标签那么我们的重置代码就要这么写

body,div,p,ul,li{margin:0; padding:0;}

因为body标签不同的浏览器定义的内边距是不一样的，所以在上面代码中加入body。

如果后面我用到form,h1,h2标签的话，我就再添加上去就OK了

body,div,p,ul,li,form,h1,h2{margin:0; padding:0;}

用到几个标签就写几个！

有些人很喜欢用*{margin:0; padding:0;},其实KwooJan不建议这么用，因为HTML标签太多了，HTML4.01 参考手册中就多达89个，我们平时常用的也就那么几个，所以没有必要将所有标签重置，这样反而使页面加载速度变慢！特别是对于大站点，更不提倡！

不过呢，如果页面出了问题，用这个可以检验一下，是不是有标签没有重置而导致的布局错位哟!！

制作网页导航条

几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好。

ol 有序列表

• ……

• ……

• ……

表现为：

1……

2……

3……

ul 无序列表，表现为li前面是大圆点而不是123

• ……

• ……

很多人容易忽略 dl dt dd的用法

dl 内容块

dt 内容块的标题

dd 内容

可以这么写：

标题

内容1

内容2

dt 和dd中可以再加入 ol ul li和p

理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。

制作网页导航条

注：只要本节又看不懂的，就查看本节课程的课程关键词或者去看前三节教程！

课程开始：

前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟!，厉害吧!！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY  ！！！

OK！我们要做的导航条的效果如下：

鼠标移动上去背景变黑，并且字体颜色变成白色

其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵

【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟!代码如下：

HTML代码：

CSS代码：

#nav{

width:960px;

height:35px;

background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/

margin:0 auto;/*水平居中*/

margin-top:30px;/*顶部30px*/

}

还有一点需要提醒的是，为了页面在浏览器的兼容性，不要忘记在CSS文件顶部加入标签重置代码哟!

代码：

body,div{padding:0; margin:0;}

这里就不多说了，不明白的就看，课程顶部的课程关键词

怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间，并且所有浏览器效果一样呢!呵呵

(如果没有做出来证明你没有认真看教程哟!用这种态度看教程会学不好的，本身我把整个XHTML+CSS的理论都压缩到教程里了，或者说教程的“知识点浓度”很高，有时需要你一字不漏的去品我说的话，不要一目十行的去看哟!只要你把我写的教程逐字逐句的研究透了，KwooJan保证你以后只要做出个页面就很Easy的兼容各种浏览器，并且代码绝对的精简！CSS文件加载速度大大提升哟!)

【第二步】

盒子做好了，我们就要往里面放导航条中的内容了“CSS学习 学前准备 入门教程 提高教程 布局教程 精彩应用”，如果我们把这内容(目前有6个)，当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“有序列表”起个英文名字叫：ul,里面的每个单元格我们也给起个英文名字叫“li”，大家想想里面的这个ul是不是和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳，所以我们定义UL的时候大小一定也要和外面的盒子一样大哟!,所以呢，我们的代码就知道怎么写了吧

HTML代码

• CSS

学习

学前准备

入门教程

提高教程

布局教程

精彩应用

CSS代码：

#nav ul{

width:960px;

height:35px;

}

效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)：

效果不一样吧，没关系，IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想!!!

想出来了没有？什么没有？

没关系，我带着大家想想，因为

• 标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个

• ,所以他们六个就像台阶似的纵向排列起来了，我提示到这里，大家应该知道怎么做才能让这些“酒杯”横向排列了吧！^_^

对喽!用浮动Float！可是让谁浮动呢，当然是

• 标签喽!代码如下：

#nav ul li{ float:left;}

效果是不是和下面的一样呢

大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的

1）盒子(#nav)高度不一样

2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！

解决上面这两个问题，也很容易，如下

1）做到这里标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”

2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在li标签的CSS属性中加入“list-style:none;”就OK了

现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢!

如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，绝对可以学会

【第三步】

第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。

好!！我们现在就将他们分开！设置

• 标签的宽度为100像素：

CSS代码：

#nav ul li{

width:100px;

float:left;

list-style:none;

}

为了便于观察我们暂且将

• 标签的背景设置成红色(设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围)

CSS代码：

#nav ul li{

width:100px;

float:left;

list-style:none;

background:#900;

}

效果如下：

瞧瞧，发现问题了吧，我们的

• 标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，经常会设置一下背景色，就是这个道理，不然的话，你是发下不了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低哟!

现在暂不把

• 标签的背景色去掉，当我们把它调成我们需要的效果的时候再去掉！

继续，我们把li的高度设置成盒子的高度35像素，代码自己写，怎么样，高度一样了吧，但是文字却位于顶端，如何将它设置成居中呢，对喽!设置行距(如果你不会，建议你看看这篇文章《两种方法实现垂直居中》)，在

• 的CSS代码中再加入下面这句代码：

line-height:35px;

效果是不是和下图一样呢

好垂直居中解决了，轮到水平居中了，这个就容易了吧，直接在

• 的CSS代码中再加入下面这句代码：

text-align:center;

怎么样，效果有点意思了吧!到这里我再发一次代码，保证大家每个步骤都学会！

好!！做到这里，大家有没有想过一个问题，因为我们的

• 标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那这时候我们就需要去掉其宽度，这时候

• 的宽度就会缩小至文字的宽度，也就是说，如果我们再添加一些文字(把我们的酒杯换成一个大个的)，这个

• 也会跟着变大，大家去掉宽度后试试，是不是这个样子，这样我们的导航条就比较灵活了，不会对“酒杯”的大小有所顾忌了！

虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，这里设置边距为10px，在

• 标签加上下面代码，顺便把背景颜色去掉

padding:0 10px;

效果是不是这样

无论你的“杯子”是增大还是缩小，

• 不但宽度会随之增大缩小，但是杯子和杯子之间的距离永远不变！怎么样有点意思吧!！

制作网页导航条

我们将导航条做成了下面的效果

但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条

【第四步】

我们需要将上面的导航条做以下几个修改

1）给上面的导航加上链接；

2）链接文字大小修改为12px;

3）并且规定链接样式，鼠标移上去和拿开的效果

修改方法如下

1）导航加链接，HTML代码如下：

• CSS="#">

学习

学前准备

入门教程下载

提高教程

布局基础教程

精彩应用

2) 文字大小12像素，CSS代码如下

a{font-size:12px;}

3）鼠标移动上面和拿开效果

#nav ul li a{color:#333; text-decoration:none;}

#nav ul li a:hover{color:#fff;text-decoration:underline;}

效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接

到这里，基本上一个导航条就出来了!不过为了能让大家再提高一个层次，KwooJan就帮大家对上面的导航条进行一下修改，算是抛砖引玉！

我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤

首先把链接a加上一个背景，以方便看出来链接a的区域

#nav ul li a{color:#333; text-decoration:none; background:#0FF;}

怎么样，知道a的区域了吧

现在我要将a的高度设定为35px和盒子一样高度，这样我在把刚才的亮蓝色背景就可以完全覆盖下面盒子的灰色了

于是我插入下面红色的代码：

#nav ul li a{height:35px; color:#333; text-decoration:none;background:#0FF;}

可是不管我怎么刷新浏览器，高度都没有任何变化，这是为什么呢？！

原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说道这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:block;”将内联元素转化成块状元素。大家先不要加这段代码，闭上眼想想界面会变成什么样子？

#nav ul li a{display:block; height:35px; color:#333;text-decoration:none; background:#0FF;}

实际效果：

IE6和FF显示效果居然大相径庭，IE6中为什么所有链接纵向排列了呢？其实这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性---霸道，它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导致IE6中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为FireFox认为a即使为块状元素，也应该受到外面

• 元素的影响，所以如此现实，究竟以谁标准，因为大家都认为FF是标准浏览器，所以大家可以以FF为标准，不过KwooJan认为，不用管谁标准不标准，那都是相对的，我认为IE标准，FF就不标准了呢，我不愿意在这个问题上浪费精力，我更喜欢将精力用在思考如何提高页面的浏览器兼容性！

看到这里我想大家应该知道如何让页面在IE6中显示的和FF中一样，很简单，只需要在a的CSS代码中加入“float:left;”

#nav ul li a{display:block; height:35px; color:#333;text-decoration:none; background:#0FF; float:left;}

问题迎刃而解，这还是用到前三节的课程内容，如果你想不起来如何解决，说明前面的课，特别是第二节的课，你没有真正理解！怎么做，你应该知道....回去再品品去

但是这样你不觉着，每个连接的左边和右边是不是太挤了，紧贴着a区域的左侧和右侧，应该怎么做？还是很简单，只需要再加上一句话“ padding:0 10px;”

#nav ul li a{display:block; height:35px; color:#333;text-decoration:none; background:#0FF; float:left; padding:0 10px;}

这样看看是不是不挤了吧，哈哈，看着舒服了吧，但是这离我们的想要的效果只有一步了，因为现在看到的连接效果是，鼠标移上去和拿开背景都是蓝色的，我们现在只需要将，a链接中的背景去掉，移到a:hover的CSS代码中，并且颜色变成“#000”就ok了!

#nav ul li a{display:block; height:35px; color:#333;text-decoration:none; float:left; padding:0 10px;}

#nav ul li a:hover{color:#fff; text-decoration:underline;background:#000;}

效果好多了吧，这下是我们想要的效果了吧!

当然！大家还可以把背景不设置成黑色，用个图片也可以！现在大家明白，为什么一开始我说这款导航栏可以演变出成千上万的不同特色的导航栏了吧!万变不离其宗！

第四课的思路就是这样的，如果吃透了这节课，那么以后什么样子的导航都很轻易作出来，如果你在和js很好的结合起来用!你就可以很自信的向老板提出加薪了！！！^_^

页面浮动

前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！

【第一步 整体布局与公共CSS定义】

我们先来分析一下这个页面

页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图

这样HTML就很容易写出来了

因为这5块的宽度都是900像素，并且都是水平居中的，所以相应CSS代码如下

body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}

/*为什么写这段代码没有忘记吧，作用就是重置可能用到的标签，不明白的去看第四节的课程关键词*/

#logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0auto;}