第一章：应知道

1.1 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，行为标准主要包括对象模型（如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给页面穿衣服！

出自: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:10px 20px;最好不要在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通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总共有四种方式行内方式、内嵌方式、链接方式、导入方式，大家通过这四种方式就可以实现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就可以了，如下

复制内容到剪贴板

代码:

这样页面中凡是加上class="one"的标签，样式都是一样的喽~

CSS定义的时候和ID选择器差不多，只不过把#换成.，如下

复制内容到剪贴板

代码:

.one{

font-size:12px;

background:#900;

color:090;

}

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

复制内容到剪贴板

代码:

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

复制内容到剪贴板

代码:

【通用选择器】

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

复制内容到剪贴板

代码:

{此处为CSS代码}

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

复制内容到剪贴板

代码:

大家运行一下上面的例子，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代码选择器、选择器的声明、选择器的嵌套三块知识，要掌握好，如果有不懂，可以留言。

DIV+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块状元素

作者:kwoojan 出自:CSS学习论坛

盒子模型，是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”。

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

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

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

CSS代码如下：

复制内容到剪贴板

代码:

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

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

HTML代码如下：

复制内容到剪贴板

代码:

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

复制内容到剪贴板

代码:

"https://www.wendangku.net/doc/c810195919.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在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代码如下：

复制内容到剪贴板

代码:

效果是不是下面这个

两个连接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垂直排列喽~

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

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

引用:

块元素(block element)

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

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

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 - 非排序列表

引用:

内联元素(inline element)

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；

自己做做，看看能不能作出来？先不要看我的代码，如果真的做不出来，就下载下来，跟着

我下面说的一步一步修改。

下面是我的代码：SY_例子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;

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

HTML试题库

一、选择题（每题2分，共40分） 1．超级链接主要可以分为文本链接、图像链接和_____。A．锚链接B．瞄链接C．卯链接D．瑁链接 2．CSS表示_____。 A．层B．行为C．样式表D．时间线 3．为了标识一个HTML文件应该使用的HTML标记是_____。 A．

B． C． D． 4．HTML代码表示_____。 A．添加一个图像B．排列对齐一个图像C．设置围绕一个图像的边框的大小D．加入一条水平线 5．是用来指定_____。 A．混合分框B．纵向分框C．横向分框D．任意分框 6．在HTML标记中，用于表示文件开头的标记是_____。

A． B． 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS 信息，代码如下： /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

16个最佳的响应式HTML 5框架

分享16个最佳的响应式HTML 5框架 HTML5框架可以快速构建响应式网站，它们帮助程序员减少编码工作，减少冗余的代码。如今有很多免费的HTML5框架可供使用，由于它们有着响应式设计、跨浏览器兼容、相对轻量级等特点，这些框架在开发中都十分流行。如果你也对HTML5框架感兴趣，你可以看看下面我列出的一些最佳的响应式HTML5框架，帮助你快速开发网站。 1、Twitter Bootstrap Bootstrap来自Twitter，是目前最受欢迎的前端框架，它简洁灵活，使得Web开发更加方便快捷。它有着优雅的HTMCSS规范，以及构建响应式网站的基本的组件，例如12列栅格布局、jQuery插件、Bootstrap控件等等。 2、HTML5 Boilerplate HTML5 Boilerplate的核心是用于帮助开发HTML5站点和应用程序的组件，它有着出色的性能和独立性，帮助你开始一个新的项目。 3、Foundation

Foundation一款非常先进的前端框架，易用、强大而且灵活，可用于构建基于任何设备上的Web应用，提供多种Web上的UI组件，如表单、按钮、Tabs 等等。 4、Ulkit 5、Ulkit Ulkit是一个轻量级、模块化的前端框架，帮助开发出快速、强大的Web接口，它有着全面的HTML、CSS和JS集合，易于使用和扩展。 HTML5 KickStart集合了HTML5、CSS和JS，帮助开发人员快速开发Web产品，它覆盖了所有的UI组件，同时也包含一些有用的JS插件。 6、Gumby

Gumby 2基于Sass开发，是一款出色的响应式CSS框架，它包括一个Web UI工具包，有好看按钮，表格，导航、标签、JS插件等。 7、Skeleton Skeleton有着简单、界面友好的特点，有一系列CSS和JS文件的集合，它可以帮你快速地调整网页在不同分辨率下的显示效果，可以优雅地等比例缩放桌面、平板、手机上的浏览尺寸。 8、Groundwork

CSS基础

CSS 简介
? ? CSS 教程 CSS 基础语法
需要具备的基础知识
在继续学习之前，你需要对下面的知识有基本的了解： ? HTML ? XHTML 如果你希望首先学习这些项目，请在 首页 访问相关教程。
CSS 概述
? CSS 指层叠样式表 (Cascading Style Sheets) ? 样式定义如何显示 HTML 元素 ? 样式通常存储在样式表中 ? 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 ? 外部样式表可以极大提高工作效率 ? 外部样式表通常存储在 CSS 文件中 ? 多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用

、、 这样的标签， HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器 来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性 （比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的 站点变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准 化的使命，并在 HTML 4.0 之外创造出样式（Style）。 所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。 样式通常保存在外部的 .css 文件中。 通过仅仅编辑一个简单的 CSS 文档， 外部样式表使你有 能力同时改变站点中所有页面的布局和外观。 由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为 网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如 需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

网页设计项目策划书

网页设计策划书 个人主页设计的策划 前言：通过创建个人主页站点，展示大学生生活，同时和一些有相同爱好的朋友分享，交流生活，学习心得，让社会了解大学生生活是什么想·的。 一．市场分析 目前市场上个人主页种类繁多，可以分为初级和高级，初级例如一些互联网企业为用户提供的博客，空间等，注册id就能使用，但是受到一定限制；高

级的就是自己建站，可以自由管理。个人主页代表着现代人一种全新的生活和工作方式，人们通过这些个人网页来展示自己，和别人分享，交流。当却没有一个个人网站有如此的特点——可以让人思考大学生的生活 二．目的及功能定位 建立这个个人网页的最主要目的就是建立一个展示自己的作品和设计想法， 同时和其他朋友进行设计交流的平台。除此之外，这个主页还应该能够实时发布 自己的生活，学习状态，提供各种设计佳作供大家欣赏。让社会了解大学

生生活 三．网页技术方案 1.由于硬件条件，本网站决定租用虚拟主机，利用一些专业的网站公司提供 的网站平台来发布自己的网页。 2.这个网站自己进行开发，首先进行自己的网页风格和内容策划，然后利用 一些平面软件，动画软件和办公软件来建设源素材，最后利用dreamweaver 来进行最后的网页设计。 四．网页的内容及实现方式 这个网页内容包含首页动画，首页，分级网页三部分。首页包括“学校介

绍”， “我的作品”“专业介绍”“作者介绍”等分别连接到二级和三级网页，二级网页又连接到三级网页，在各个网页间可以任意切换，进而实现增强网页的可浏览型。 五．网页设计 网站名称：只是一个大三的。网页风格：用宇宙为背景，用太阳系的行星作为导航条 网页制作过程：首先，构思网页的风格，布局和内容进行构思，设计网页的 结构，然后进行各种软件进行素材制作，最后在dreamweaver上进行设计。

《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解

《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用

使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式

Html+css基础教程

H t m l+c s s基础教程 (适合新手) 在这里我把h t m l和c s s放在一起了，适合新手和在学习的人当成笔记用。希望对大家有所帮助。 HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。 一、HTML的组成结构 HTML分为单标识语句和双标识语句。 <标识>内容如：
<标识>内容 如：搜狐 标识中存在标识属性用来定义各标识属性的值。 中心内容 二、HTML全局结构 1、头部。（标题栏）只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是头部的内容，简单不，大家注意一下，这两个非常相似，只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。 2、眼睛。（标题内容）就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在头上的，所以啦:这些应放在和之间。也就是 3、身体。（主体）身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在浏览器的最左上角可以看到），身体----BODY，他的写法也就是：页面内容 最后，别忘了把这些部分组成一体----网页，所以咱们就用把他们给包起来。 咱们来大体看看网页的结构： 页面内容 在进入主体内容标识讲解之前我想给大家介绍下标识中的常用属性，如： 1、内容 leftMargin、topMargin表示：设置页面离外框的左边距和上边距的距离为像素值，默认为1。marginwidth、 marginheight表示：设置页面文字同页面边缘的间距为像素值，默认为1。 注marginwidth、 marginheight还可以用于表格、框架等中。

html5教程视频教程网盘下载

html5教程入门视频网盘下载 学习HTML、CSS基础知识，实现PC端静态页面制作（例如京东商城），响应式网页布局的制作（微软中国官网）、及WebApp页面布局（淘宝、美团等）。 html5前端人才已成为IT职场的紧缺型人才，如何自学html5？如何短时间内迅速提升html5开发能力？千锋教育html5教程入门视频网盘下载（https://www.wendangku.net/doc/c810195919.html,/video/html5_download.html），助力大家成为企业不可多得的贤才。 实现这些需要的知识有 1、学习HTML基本语法：双标签、单标签语法结构。 2、常用标签：标题标签、段落标签、布局标签、表格、列表、标签标签。 3、学习CSS基本语法：选择器声明。 4、学习CSS的三种样式表：内联、内部、外部 5、学习CSS的各种常用选择器 6、学习CSS的选择器、样式表的优先级和权重问题。 7、学习CSS的核心属性及属性值 8、学习CSS的元素类型的转换

9、学习CSS的定位锚地的应用 10、学习CSS中的图片整合技术的应用 11、学习CSS中常见的浏览器的兼容及解决方法 12、学习HTML5新增元素及属性 13、学习CSS3新增选择器的应用 14、学习CSS3的2D、3D、关键帧动画的相关应用 15、学习CSS3中弹性盒的应用 16、学习CSS3中媒体查询响应式的设计应用 学习JavaScript和jQuery及掌握一门后台程序语言的简单基础和一个数据库，实现PC端项目交互开发（做一个电商类型的网站开发） 需要的知识有 1、学习JavaScript的基本语法 2、学习JavaScript的循环语句 3、学习JavaScript的函数与数组 4、学习JavaScript的String和Data 5、学习JavaScript的BOM与DOM 6、学习JavaScript的相关事件 7、学习JavaScript的拖拽效果 8、学习JavaScript的cookie存储 9、学习JavaScript的正则表达式 10、学习JavaScript的Ajax的应用 11、学习JavaScript的面相对象基础

DIV+CSS基础教程全攻略

CSS教程基础 一、CSS 高度_css height DIV CSS高度基础知识 这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为单位。 实例： .yangshi{height:300px;}即设置了yangshi选择器对象高度为300px。 CSS高度单词：height CSS 最大高度：max-height (IE7及以上版本浏览器支持) CSS 最小高度：min-height (IE7及以上版本浏览器支持) CSS上下居中：line-height 以上可跟值为数字加单位。 Html初始高度与DIV+CSS高度对照 以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素） 为单位。 实例：

我的高度为100px

我高度为50px

分别设置了高度为100px和50px的两行表格 接下来我们讲解CSS 高度使用方法及技巧 1、CSS自适应高度 一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即可实现此效果。同时也无需使用height:auto来实现高度自适应。通常默认情况下不设置高度，对象高度即是自适应高度。 2、固定高度及隐藏超出固定高度的内容 很多时候我需要设置对象固定高度同时让多余的内容不显示出来。 解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容） 如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效果同时设置对象为1px黑色边框演示， CSS 代码： .yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;} Html body内代码：

https://www.wendangku.net/doc/c810195919.html,演示，内容 测试内容高度超出演示实例，divcss5实例

经典教程：discuz x2 风格模板完整教程

没有XHTML基础，不知道什么是CSS？没关系~~~ 从今天开始，我会给各位从0开始讲解如果动手做一个完整的模板。 我相信只要你有兴趣，再抽出一点时间，还得花费一点记忆力（有些东西必须背下来，临时翻书不是好习惯），应付一些基本的样式修改和模板仿制应该还是没问题的。 本教程会很基础，请各位高手轻轻地飘过~~~~~ 首先说一说前期要准备的工具。 工具的选择： 1，当然是FTP啦，个人推荐cuteftp，速度很快…… 2，修改工具：我个人推荐notepad2，原因是体积小速度快能高亮不要钱，而且味道还很好吃呢。。。使用是请把这个工具关联到FTP的默认修改工具里面。 3，DOM树查看工具的选择：这个是用来快速定位CSS的选择器的。现在一般的浏览器都能支持DOM模型了，比如opera，IE7起，chrome，FF……（什么？360？什么？遨游？什么……？疼讯？赶紧扔掉！！！！！），一般这四个浏览器是必须的，因为要比较调试出来的CSS 在各个浏览器是否兼容。最后还要考虑IE6的情况，（这个IE6，虽然被千夫所指，但是仍然有很多人在使用，你能怎么办？） 关于IE6，请到微软官网上下载一个专用开发插件。 （以上工具介绍纯属自愿，如果你有自己习惯的工具，请飘过~~） 关于风格系别的选择： 现在国内主流网站，我觉得大多数追着两种潮流，第一种是欧美的那种绚丽的，圆角的，立体阴影的特点的，详见国内各大微薄。。。这种网站风格有许许多多的导航网站。因为图片很多，结构复杂。模仿起来也比较费劲。但是只要把他们的结构弄清楚后，也是简单的。 还有一种就是日系（我个人巨爱啊……） 日系的网站简约大方，一眼看过去重点突出（无论是上面的两个基本点还是下面的一个中心 ）。但是其实日系的网站虽然简单，但还真没有几个人做的好看的，因为，你不知道怎么配色啊…… 一般看来，美系的字体都稍大，而日系字体偏小。 千万不要把这两种风格综合起来，因为那样剧难看（其实不是剧难看，而是难看致死，死到没JJ，比如某网站风格……） 好吧，先说明，我更新的时间不会太快，大概好几天更新一个。 由于水平有限，如果发现有错误，请迅速指出来，免得误人。。。

网页设计基础Div+CSS布局入门教程

网页设计基础：Div+CSS布局入门教程 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 以下为引用的内容： DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/

│├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CS S布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 以下为引用的内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

[color=#aaaaaa][/color]

[color=#aaaaaa][/color]

[color=#aaaaaa][/color]

[color=#aaaaaa][/color]

[color=#aaaaaa][/color]

[color=#aaaaaa][/color]

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：

Web前端开发简明教程(HTML+CSS+JavaScript+jQuery)教学大纲

高级网页设计与制作 Advanced Web Design and Implementation 一、课程编号： 二、课程类别： 三、课程性质：选修课 四、学时： 48（讲课学时：24 实验学时：上机学时：24 课外学时：） 五、学分： 3 六、先修课程要求：无 七、适用专业：计算机相关专业 八、适用年级、学期：二年级第1学期 九、课程目的及任务： 本课程是面向计算机相关专业学生开设的一门专业选修课程，培养学生WEB 开发中的前端界面设计能力，为后续课程的学习奠定基础。 本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括如何在网页上显示文字、图片、表格、表单等；利用CSS技术对网页上内容进行排版，并设置相关格式；利用JavaScript技术对网页内容进行操作，实现一些动态效果。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。 十、课程内容及基本要求（重点、难点、知识掌握程度及考核要求）： 第1部分 HTML 第 1 章 HTML 概述 第 2 章 HTML 文本与图像 第 3 章 HTML 列表 第 4 章 HTML 表格 第 5 章 HTML 表单 第 6 章 HTML 5 要求：掌握HTML文档的结果，掌握标签、属性等的使用；掌握在页面上输出文字、段落，设置字体；掌握有序列表、无序列表的使用，能制作简单导航栏；掌握图片、背景与颜色的使用；掌握链接的使用，能使用超链接下载文件；掌握使用表格来表示数据和布局，用CSS对表格进行美化；掌握使用表单来与用户交互。第2部分 CSS语法基础 第 7 章 CSS 基础 第 8 章 CSS 盒子模型 第 9 章 CSS 字体与文本 第 10 章 CSS 列表与表格 第 11 章 CSS 定位 要求：掌握CSS的基本语法，掌握伪类与伪元素的使用；掌握CSS属性的使用，重点掌握定位、边距、填充属性。

DIV+CSS基础教程

div+css基础教程 第一节了解div+css 一、什么是div+css div元素是html(超文本语言)中的一个元素，是标签，用来为html 文档内大块（block-level）的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 css是英语cascading style sheets（层叠样式表单）的缩写，它是一种用来表现 html 或 xml 等文件式样的计算机语言。 div+css是网站标准（或称“web标准”）中常用术语之一，通常为了说明与html网页设计语言中的表格（table）定位方式的区别，因为xhtml 网站设计标准中，不再使用表格定位技术，而是采用div+css的方式实现各种定位。 html语言自html4.01以来，不再发布新版本，原因就在于html语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的html标记，这显然有碍于html网页的兼容性。于是w3c组织进而重新从sgml中获取营养，随后，发布了xml，xml是一种比html更加严格的标记语言，全称是可扩展标记语言。但是xml过于复杂，且当前的大部分浏览器都不完全支持xml。于是xhtml这种语言就派上了用场，xhtml语言就是一种可以将html语言标准化，用xhtml语言重写后的html页面可以应用许多xml应用技术。使得网页更

加容易扩展，适合自动数据交换，并且更加规整。 二、div+css的优势 1、符合w3c标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、对浏览者和浏览器更具亲和力。由于css富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是什么，您的网站都能很好的兼容。 3、使页面载入得更快。页面体积变小，浏览速度变快，由于将大部分页面代码写在了css当中，使得页面体积容量变得更小。相对于表格嵌套的方式，div+css将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 4、保持视觉的一致性。以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用div+css的制作方法，将所有页面，或所有区域统一用css文件控制，就避免了不同区域或不同页面体现出的效果偏差。 5、修改设计时更有效率。由于使用了div+css制作方法，使内容和结构分离，在修改页面的时候更加容易省时。根据区域内容标记，到css 里找到相应的id，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式，在团队开发中更容易分工合作而减少相互关联性。 6、搜索引擎更加友好。相对与传统的table, 采用div+css技术的网页，由于将大部分的html代码和内容样式写入了css文件中，这就使得网页中代码更加简洁，正文部分更为突出明显，

html5教程：8个炫酷CSS动画及源码分享

html5教程：8个炫酷CSS动画及源码分享在现代网页中，我们已经越来越习惯使用大量的CSS3元素，而现在的浏览器也基本都支持CSS3，所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画，有几个非常经典，比如大象走路的那个，如果你对CSS3感兴趣，赶紧来看看吧。 1、纯CSS3实现大象走路动画之前我们分享过一款纯CSS3人物行走动画，效果相当震撼。这一次要给大家介绍的是一款纯CSS3实现的大象走路动画，大象走路时的形态表现的十分逼真，你可能不会想到，这么给力的动画居然是用纯CSS3实现的，很可爱的大象，下载源码自己去研究吧。 2、纯CSS3实现苹果设备 iPhone iPad iMac及iWatch今天我们又要用CSS3来绘制一些有趣的东西，这次要绘制的是全套的苹果设备，包括iPhone、iPad、iMac及iWatch，配合各自的界面壁纸，显得非常逼真，同时跟现实中的设备一样，屏幕同样具有切换的效果，只不过这个是定时切换，并不能滑动切换，有兴趣的同学可以自行实现一下。 3、纯CSS3实现变形金刚组装动画特效今天要分享的依然是一款用纯CSS3实现的动画，是一个变形金刚组装动画特效，这种组装动画将人物的各部位按某种顺序组合起来，显得非常酷。 4、纯CSS3 3D按钮按钮酷似牛奶般剔透CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。 5、CSS3音量调节旋转按钮之前我们分享过很多可以调节音量的HTML5视频播放器，大部分音量调节按钮都比较普通，没有什么特色。今天要分享一款基于CSS3的音量调节旋转按钮，只要按住鼠标即可旋转按钮来调节音量。这是一款很有特色旋转按钮。

《HTMLCSS网站设计基础教程》教学大纲

《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47学时上机学时：26学时） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、JavaScript网页特效 适用专业：信息技术及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。 二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 三、教学条件要求

开发工具：DreamweaverCS6 四、课程的主要内容及基本要求第一章初识HTML5 第二章HTML5页面元素及属性

第三章CSS3入门 第四章CSS3选择器

DivCSS布局入门教程相当经典

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#H eader {} /*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

(完整版)《HTML5+CSS3网站设计基础教程》_教学大纲

HTML5+CSS3 网站设计基础教程》课程教学大 纲 （课程英文名称） 课程编号：201601210011 学分： 5 学分 学时：76 学时（其中：讲课学时：47 学时上机学时：26 学时） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI 设计、JavaScript 网页特效 适用专业：信息技术及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。 二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。

三、教学条件要求 开发工具：Dreamweaver CS6 四、课程的主要内容及基本要求第一章初识HTML5 第二章HTML5 页面元素及属性