DIV+CSS基础教程全攻略.docx

DIV+CSS基础教程全攻略.docx

《DIV+CSS基础教程全攻略.docx》由会员分享，可在线阅读，更多相关《DIV+CSS基础教程全攻略.docx（72页珍藏版）》请在冰豆网上搜索。

DIV+CSS基础教程全攻略

2天掌握DIV+CSS网页制作技术

=================================

基础

【基础一】DIV+CSS的叫法是不准确的

【基础二】使用Table布局是不明智的

【基础三】xHTML+CSS与SEO

【基础四】CSS如何控制页面

【基础五】CSS选择器

【基础六】CSS选择器命名及常用命名

【基础七】盒子模型

【基础八】块状元素和内联元素

=================================

课程

【第一课】盒模型、块状元素与内联元素、CSS选择器

【第二课】浮动

【第三课】清除浮动

【第四课】导航条

【第五课】浮动（float）页面布局

【第六节】定位

【第七节】定位应用

【第八课】CSSHack

=================================

小技巧

【单张图片按钮实例】

【首行文字两文字缩进】

DIV+CSS网页制作这种叫法不准确

2010-01-0115:

29:

25  来源:

CSS学习网 

网页制作Webjx文章简介：

DIV+CSS的叫法是不准确的.

DIV+CSS的叫法是不准确的

我想凡是来到“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，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。

这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputerManufacturersAssociation）的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布局网页不明智

2010-01-0115:

31:

19  来源:

CSS学习网 

网页制作Webjx文章简介：

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

使用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年美国加州ScottDesign公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲，使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的关系

2010-01-0115:

32:

31  来源:

CSS学习网 

网页制作Webjx文章简介：

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

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:

10px20px10px20px;缩写为padding:

10px20px;最好不要在HTML页面用font、center这种标签。

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

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

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

CSS控制页面样式的4种方式和优先级问题

2010-01-0115:

33:

58  来源:

CSS学习网 

网页制作Webjx文章简介：

第一：

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

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

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

第一：

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

第二：

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

使用xHTML+CSS布局页面，其中有个很重要的特点就是内容与表象相分离，内容指HTML页面代码，表象就是CSS代码了，如果把页面看成穿着衣服的人的话，人就是HTML，是内容，而衣服呢就是CSS，是表象，现在出现的问题是，如何让CSS去控制页面？

或者说，如何让衣服穿在人身上，好体现出人得风格特点；不同的CSS就可以使页面出现不同的风格适用不同的网站，而不同的衣服，人穿上后就会体现出不同的职业。

第一：

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

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

1）行内方式

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

#F00;background:

#CCC;font-size:

12px;">

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

2）内嵌方式

内嵌方式就是将CSS代码写在之间，并且用进行声明，例如：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

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

//www.w3.org/1999/xhtml">

--

#div1{width:

64px;height:

64px;float:

left;}

#div1img{width:

64px;height:

64px;}

-->