DIV+CSS布局大全.docx

这不是布局，是结构。

这是一个对内容块的语义说明。

当你理解了你的结构，就可以加对应的ID在DIV上。

DIV容器中

可以包含任何内容块，也可以嵌套另一个DIV。

内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。

根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。

每一个内容块都可以放在页面上任

何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

使用选择器是件美妙的事

id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一

个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。

例如你为#header写一个CSS规则，就可以完全不同于

#content里的图片规则。

另外一个例子是：

你可以通过不同规则来定义不同内容块里的链接样式。

类似这样：

#globalnava:

link或者#subnav

a:

link或者#contenta:

link。

你也可以定义不同内容块中相同元素的样式不一样。

例如，通过#contentp和#footerp分

别定义#content和#footer中p的样式。

从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不

会对显示在什么网络设备中（PDA还是手机或者网络电视）有影响，它们可以被定义为任何的表现外观。

一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。

当你想缩进一个段落，不需要使用blockquote

标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。

p是结构化标签，margin是表现属性，前者

属于HTML，后者属于CSS。

（这就是结构于表现的相分离.）

良好结构的HTML页面内几乎没有表现属性的标签。

代码非常干净简洁。

例如，原先的代码

cellpadding="3"border="2"align="left">，现在可以只在HTML中写

结构化的HTML中，table就是表格，而不是其他什么（比如被用来布局和定位）。

亲自实践一下结构化

上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。

常常会出现DIV嵌套的情况，你会看到

"container"层中又有其它层，结构类似这样：

alist

anotherlist

嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：

你可以给#navcontainer一个规则让列表居右，再给

#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。

用CSS替换传统方法

下面的列表将帮助你用CSS替换传统方法：

HTML属性以及相对应的CSS方法

HTML属性CSS方法说明

align="left"

align="right"float:

left;

float:

right;使用CSS可以浮动任何元素:

图片、段落、div、标题、表格、列表等等

当你使用float属性，必须给这个浮动元素定义一个宽度。

marginwidth="0"leftmargin="0"marginheight="0"topmargin="0"margin:

0;使用CSS,margin可以设置在任何元

素上,不仅仅是body元素.更重要的，你可以分别指定元素的top,right,bottom和left的margin值。

vlink="#333399"alink="#000000"link="#3333FF"a:

link#3ff;

a:

visited:

#339;

a:

hover:

#999;

a:

active:

#00f;

在HTML中，链接的颜色作为body的一个属性值定义。

整个页面的链接风格都一样。

使用CSS的选择器，页面不同部分

的链接样式可以不一样。

bgcolor="#FFFFFF"background-color:

#fff;在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table

元素。

bordercolor="#FFFFFF"border-color:

#fff;任何元素都可以设置边框（boeder），你可以分别定义top,right,bottom

和left

border="3"

cellspacing="3"border-width:

3px;用CSS，你可以定义table的边框为统一样式，也可以分别定义top,right,bottom

andleft边框的颜色、尺寸和样式。

你可以使用table,tdorth这些选择器.

如果你需要设置无边框效果，可以使用CSS定义：

border-collapse:

collapse;

clear:

left;

clear:

right;

clear:

both;

许多2列或者3列布局都使用float属性来定位。

如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear

属性.

cellpadding="3"

vspace="3"

hspace="3"padding:

3px;用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top,right,bottom

andleft。

padding是透明的。

align="center"text-align:

center;

margin-right:

auto;margin-left:

auto;

Text-align只适用于文本.

象div，p这样的块级怨毒可以通过margin-right:

auto;和margin-left:

auto;来水平居中

一些令人遗憾的技巧和工作环境

由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧（hacks）或建立一种环境（Workarounds）来让CSS实现

传统方法同样的效果。

例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。

所有这些技巧都在Molly

Holzschlag的文章《IntegratedWebDesign:

StrategiesforLong-TermCSSHackManagement》中有详细说明。

另外一个关于CSS技巧的资源站点是BigJohn和HollyBergevin的“PositionisEverything”。

XHTML下css+div布局总结

xml（extensibleMarkupLanguage）的出现，结构化文档和数据有了一个通用的、科适应的格式，不仅仅应用在web上，也可

以应用在任何地方。

标准称为可能。

XHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写。

在HTML4.0的基础上，用XML的规则对其进

行扩展，得到了XHTML。

它实现HTML向XML的过渡。

CSS是CascadingStyleSheets层叠样式表的缩写。

纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站

点的访问及维护更加容易。

1）为页面添加正确的DOCTYPE

DOCTYPE是documenttype的简写。

主要用来说明你用的XHTML或者HTML是什么版本。

浏览器根据你DOCTYPE定义的

DTD（文档类型定义）来解释页面代码。

XHTML1.0提供了三种DOCTYPE可选择：

（1）过渡型（Transitional）--使用非常普遍。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0

Transitional//EN""http:

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

（2）严格型（Strict）

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"

"http:

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

（3）框架型（Frameset）

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0

Frameset//EN""http:

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

2）设定一个名字空间（Namespace）

直接在DOCTYPE声明后面添加如下代码：

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

一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的

namespace。

只要照样输入代码就可以。

3）声明你的编码语言

为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。

代码如下：

这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。

4）用小写字母书写所有的标签

XML对大小写是敏感的，所以，XHTML也是大小写有区别的。

所有的XHTML元素和属性的名字都必须使用小写。

否则你的

文档将被W3C校验认为是无效的。

例如下面的代码是不正确的：

5）为图片添加alt属性

为所有图片添加alt属性。

alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对

纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。

只有添加了alt属性，代码才会被W3C正确性校验通过。

注意的

是我们要添加有意义的alt属性，象下面这样的写法毫无意义：

正确的写法：

6）给所有属性值加引号

在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。

还必须用空格分开属性。

例：

这也是不正确的

7）关闭所有的标签

在XHTML中，每一个打开的标签都必须关闭。

空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们自己。

例如：

8）收藏夹小图标

例如：

首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。

然后将下面的代码嵌入head区：

9）用CSS定义元素外观

用css布局的一个好处是可以批量对页面进行修改，它能将文档结构和表现层分离开来，减轻工作量和服务器的负荷，增

加站点的扩展能力和应用。

css是不区别空格和大小写的，下面是一些基础的归纳

（1）颜色值

颜色值可以用RGB值写，例如：

color:

rgb（255,0,0），也可以用十六进制写，就象上面例子color:

#FF0000。

如果十

六进制值是成对重复的可以简写，效果一样。

例如:

#FF0000可以写成#F00。

但如果不重复就不可以简写，例如#FC1A1B必须

写满六位。

（2）定义字体

web标准推荐如下字体定义方法：

body{font-family:

"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}

字体按照所列出的顺序选用。

如果用户的计算机含有LucidaGrande字体，文档将被指定为LucidaGrande。

没有的话，

就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；

LucidaGrande字体适合MacOSX；

Verdana字体适合所有的Windows系统；

Lucida适合UNIX用户

"宋体"适合中文简体用户;

如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;

（3）群选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：

p,td,li{font-size:

12px;}

（4）派生选择器

可以使用派生选择器给一个元素里的子元素定义样式，例如这样：

listrong{font-style:

italic;font-weight:

normal；}

就是给li下面的子元素strong定义一个斜体不加粗的样式。

（5）id选择器

用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。

例如我们首先定义一个层

然后在样式表里这样定义：

#menubar{MARGIN:

0px;BACKGROUND:

#FEFEFE;COLOR:

#666;}

其中"menubar"是你自己定义的id名称。

注意在前面加"#"号。

id选择器也同样支持派生，例如：

#menubarp{text-align:

right;margin-top:

10px;}

这个方法主要用来定义层和那些比较复杂，有多个派生的元素。

（6）类别选择器

在CSS里用一个点开头表示类别选择器定义，例如：

.14px{color:

#f60;font-size:

14px;}

在页面中，用class="类别名"的方法调用：

14px大小的字体

这个方法比较简单灵活，可以随时根据页面需要新建和删除。

（7）定义链接的样式

CSS中用四个伪类来定义链接的样式，分别是：

a:

link、a:

visited、a:

hover和a:

active，例如：

a:

link{font-weight:

bold;text-decoration:

none;color:

#c00;}

a:

visited{font-weight:

bold;text-decoration:

none;color:

#c30;}

a:

hover{font-weight:

bold;text-decoration:

underline;color:

#f60;}

a:

active{font-weight:

bold;text-decoration:

none;color:

#F90;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。

注意，必须按以上顺序写，否则

显示可能和你预想的不一样。

记住它们的顺序是“LVHA”。

（8）组合使用选择器创造精致的设计效果

用漂亮的图案代替普通无序列表前沉闷的黑点。

站点

先用css规则告诉类别属性inventory的无序列表。

ul.inventory{

list-style:

discurl（/images/common/lister2.gig）inside;}

它的调用标记:

（9）缩写是按照顺时针的顺序

margin:

25px025px0;

（10）行高

line-height:

150%说明行距为正常的150%

10）结构化代码div（division）、id、class

用它们来书写紧凑的xhtml，更明智的使用css.

（1）结构化id标签，与class的有区别：

如果你的属性页面包含了一个div，它的id为"content",它就不可能有另外一个div或者其他元素拥有相同的名字。

相反，

class属性可以在意个页面中一次又一次地使用。

（2）id的规则

一个id值必须用一个字母或者下划线开头，它不能用一个数字进行开头，然后跟随字母、数字和下划线。

空格和连字

符-都是不允许的。

11）制作好的网站可以到w3c进行标准校正

http:

validator.w3.org

http:

//jigsaw.w3.org/css-validator/

网页设计DIV+CSS——第1天:

选择什么样的DOCTYPE

前言

大家好！

这个系列文章是按阿捷自己制作这个站点的过程编写的。

之前阿捷也一直没有制作过一个真正符合web标准的网站。

现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。

好了，让我们开始吧

第一天

开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码，可以看到第一行就是：

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

"http:

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

打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。

而另一些符合标准的站点（例如）的代码则如下：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN"

"http:

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

那么这些代码有什么含义？

一定要放置吗？

什么是DOCTYPE

上面这些代码我们称做DOCTYPE声明。

DOCTYPE是documenttype（文档类型）的简写，用来说明你用的XHTML或者HTML是什

么版本。

其中的DTD（例如上例中的xhtml1-transitional.dtd）叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD

来解释你页面的标识，并展现出来。

要建立符合


文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

DIV CSS 布局 大全

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。