HTMLcssDIV网页布局_html+css网页布局资源-CSDN文库

5星 · 超过95%的资源需积分: 10 183 浏览量 2010-11-02 20:40:05 上传评论收藏 329KB DOC 举报

DIV+CSS 网页重构 DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定... HTML、CSS以及DIV是构建现代网页布局的核心技术。在网页设计中，HTML（HyperText Markup Language）用于创建页面结构，CSS（Cascading Style Sheets）则用于定义样式和布局，而DIV元素作为HTML中的一个块级元素，常被用作布局容器，帮助设计师实现更加灵活和精确的页面控制。 **DIV+CSS布局入门** 在传统的HTML布局中，表格(table)常被用来组织页面内容，但这种方法会导致代码冗余，且不利于SEO和页面性能。而DIV+CSS布局则是将内容（HTML）和表现（CSS）分离，使得页面结构更清晰，代码更简洁。通过CSS，我们可以控制DIV的宽高、位置、边距等属性，实现复杂的设计布局，如网格系统、响应式设计等。 **XHTML下的CSS+DIV布局总结** XHTML是一种更严格的HTML版本，它结合了HTML的易用性和XML的严谨性。在XHTML中使用CSS+DIV布局，要求语法更规范，例如所有元素必须闭合，这对保证代码质量及浏览器兼容性至关重要。通过CSS，可以实现元素浮动、定位、内边距和外边距的控制，进一步优化布局。 **DOCTYPE的选择** DOCTYPE声明位于HTML文档的顶部，用于告诉浏览器文档遵循的HTML或XHTML规范。选择合适的DOCTYPE对于CSS的解析和页面渲染至关重要。例如，`<!DOCTYPE html>`用于HTML5，`<!DOCTYPE XHTML>`用于XHTML1.0，而`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">`用于HTML4.01。 **名字空间** 在HTML中，名字空间（NameSpace）主要应用于引入XML或SVG等其他语言的元素。例如，使用SVG时，可以定义`<svg xmlns="http://www.w3.org/2000/svg">`来启用SVG的命名空间。 **定义语言编码** `<meta charset="UTF-8">`标签用于定义文档的字符编码，如UTF-8，确保浏览器正确显示非ASCII字符。 **调用样式表** CSS样式表可以外部引用，通过`<link rel="stylesheet" href="style.css">`添加到HTML文档中，这种方式使样式与内容分离，便于管理和维护。另一种方法是内部样式表，通过`<style>`标签在HTML文档头部定义，适用于小型项目或快速原型设计。双表法调用是指同时使用内部样式和外部样式表，以实现局部覆盖和全局控制的平衡。 **head区的其他设置** head区除了包含样式表调用，还可以设置页面标题、元信息（如关键词、描述）、 favicon（收藏夹小图标）等，这些元素对搜索引擎优化（SEO）和用户体验都有重要作用。 HTML、CSS和DIV的组合为网页设计提供了强大的布局工具，让设计师能够创建美观、功能丰富且响应式的网站。理解并熟练运用这些技术，是成为专业前端开发者的基础。学习和实践这些知识点，将有助于提升网页设计和开发的技能水平。

资源详情

资源评论

目录
div＋css 布局入门...................................................................................................................................................................2
XHTML 下 css+div 布局总结................................................................................................................................................4
网页设计 DIV+CSS——第 1 天:选择什么样的 DOCTYPE................................................................................................7
第一天.....................................................................................................................................................................7
什么是 DOCTYPE..................................................................................................................................................8
我们选择什么样的 DOCTYPE..............................................................................................................................8
补充.........................................................................................................................................................................8
网页设计 DIV+CSS——第 2 天:什么是名字空间...............................................................................................................8
网页设计 DIV+CSS——第 3 天:定义语言编码...................................................................................................................9
网页设计 DIV+CSS——第 4 天:调用样式表.......................................................................................................................9
外部调用样式表.....................................................................................................................................................9
双表法调用样式表...............................................................................................................................................10
网页设计 DIV+CSS——第 5 天:head 区的其他设置.........................................................................................................10
收藏夹小图标.......................................................................................................................................................10
为搜索引擎准备的内容.......................................................................................................................................10
网页设计 DIV+CSS——第 6 天:XHTML 代码规范..........................................................................................................10
1.所有的标记都必须要有一个相应的结束标记................................................................................................11
2.所有标签的元素和属性的名字都必须使用小写............................................................................................11
3.所有的 XML 标记都必须合理嵌套..................................................................................................................11
4.所有的属性必须用引号""括起来.....................................................................................................................11
5.把所有<和&特殊符号用编码表示...................................................................................................................11
6.给所有属性赋一个值........................................................................................................................................11
7.不要在注释内容中使“--”..................................................................................................................................11
网页设计 DIV+CSS——第 7 天:CSS 入门.........................................................................................................................11
1.基本语法规范....................................................................................................................................................12
2.颜色值................................................................................................................................................................12
3.定义字体............................................................................................................................................................12
4.群选择器............................................................................................................................................................12
5.派生选择器........................................................................................................................................................12
6.id 选择器............................................................................................................................................................12
6.类别选择器........................................................................................................................................................12
7.定义链接的样式................................................................................................................................................13
网页设计 DIV+CSS——第 8 天:CSS 布局入门.................................................................................................................13
1.定义 DIV............................................................................................................................................................13
2.CSS2 盒模型......................................................................................................................................................14
3.辅助图片一律用背景处理................................................................................................................................14
网页设计 DIV+CSS——第 9 天:第一个 CSS 布局实例....................................................................................................15
1.确定布局............................................................................................................................................................15
2.定义 body 样式...................................................................................................................................................15
3.定义主要的 div..................................................................................................................................................16
4.100%自适应高度?.............................................................................................................................................17
网页设计 DIV+CSS——第 10 天:自适应高度...................................................................................................................17
网页设计 DIV+CSS——第 11 天:不用表格的菜单...........................................................................................................18
1

1.不用表格的菜单(纵向).....................................................................................................................................18

2.不用表格的菜单(横向).....................................................................................................................................20

1.XHTML 校验.....................................................................................................................................................23

2.CSS2 校验..........................................................................................................................................................23

CSS 的十八般技巧...............................................................................................................................................................24

WEB 打印实例教程..............................................................................................................................................................28

div＋css 布局入门

你正在学习  布局吗？是不是还不能完全掌握纯  布局？通常有两种情况阻碍你的学习：

　　第一种可能是你还没有理解  处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容

的语义和结构，然后再针对语义、结构添加 。这篇文章将告诉你应该怎样把  结构化。

　　另一种原因是你对那些非常熟悉的表现层属性例如：、、等等束手无

策，不知道该转换成对应的什么  语句。当你解决了第一种问题，知道了如何结构化你的 ，我再给出

一个列表，详细列出原来的表现属性用什么  来代替。

　　结构化 

　　我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们

用  或者  画出来、切割成小图。最后再通过编辑  将所有设计还原表现在页面上。

　　如果你希望你的  页面用  布局是  的，你需要回头重来，先不考虑“外观”，要先思

考你的页面内容的语义和结构。

　　外观并不是最重要的。一个结构良好的  页面可以以任何外观表现出来，!"!# 是一个

典型的例子。!"!# 帮助我们最终认识到  的强大力量。

　　 不仅仅只在电脑屏幕上阅读。你用  精心设计的画面可能不能显示在 $%、移动电话和

屏幕阅读机上。但是一个结构良好的  页面可以通过  的不同定义，显示在任何地方，任何网络设备上。

　　开始思考

　　首先要学习什么是结构，一些作家也称之为语义。这个术语的意思是你需要分析你的内容块，以及每

块内容服务的目的，然后再根据这些内容目的建立起相应的  结构。

　　如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：

标志和站点名称

主页面内容

站点导航主菜单!

子菜单

搜索框

功能区例如购物车、收银台!

页脚版权和有关法律声明!

我们通常采用 $&' 元素来将这些结构定义出来，类似这样：

()!*(+)*

()!*(+)*

()!,)*(+)*

()!-,)*(+)*

()!*(+)*

()!*(+)*

()!*(+)*!

　　这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的 &$ 在 $&'

上。$&' 容器中可以包含任何内容块，也可以嵌套另一个 $&'。内容块可以包含任意的  元素标题、段

落、图片、表格、列表等等。

　　根据上面讲述的，你已经知道如何结构化 ，现在你可以进行布局和样式定义了。每一个内容块都可

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

　　使用选择器是件美妙的事

　　 的名称是控制某一内容块的手段通过给这个内容块套上 $&' 并加上唯一的 你就可以用  选择器来

精确定义每一个页面元素的外观表现包括标题、列表、图片、链接或者段落等等。例如你为. 写一个

 规则，就可以完全不同于. 里的图片规则。

　　另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：.,)!/

或者 .-,)!/ 或者.!/。你也可以定义不同内容块中相同元素的样式不一样。例如，通

过.! 和.! 分别定义. 和. 中  的样式。从结构上讲，你的页面是由图片、

链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中$% 还是手机或者网络电视有影

响，它们可以被定义为任何的表现外观。

　　一个仔细结构化的  页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使

用 ,0- 标签，只要使用  标签，并对  加一个  的 1 规则就可以实现缩进目的。 是结构化

标签，1 是表现属性，前者属于 ，后者属于 。这就是结构于表现的相分离2

　　良好结构的  页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码 (,

345!6!,7!*，现在可以只在  中写(,*，所有

控制表现的东西都写到  中去，在结构化的  中，, 就是表格，而不是其他什么比如被用来布局

和定位。

　　亲自实践一下结构化

　　上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现 $&' 嵌套的情况，

你会看到层中又有其它层，结构类似这样：

()!)*

()!,)*

(-*!(+-*

(+)*

()!-,)*

(-*!(+-*

(+)*

(+)*!

　　嵌套的 ) 元素允许你定义更多的  规则来控制表现，例如：你可以给.) 一个规则让列

表居右，再给.,) 一个规则让列表居左，而给.-,) 的  另一个完全不同的表现。

　　用  替换传统方法

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

 属性以及相对应的  方法

 属性  方法说明



!8/!9!

　　8/!9!使用  可以浮动任何元素/图片、段落、)、标题、表格、列表等等

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

　　 14! 14!14!14!1/ !49 ! 使用 

1 可以设置在任何元素上!不仅仅是 , 元素2更重要的，你可以分别指定元素的 !!,1

和  的 1 值。

).6666::!.444444!.6666!/!.6;9

/)/!.66:9

/)/!.:::9

/)/!.449!

　　在  中，链接的颜色作为 , 的一个属性值定义。整个页面的链接风格都一样。使用  的选择器，

页面不同部分的链接样式可以不一样。

　　,.!,-/!.;9!在  中，任何元素都可以定义背景颜色，不仅仅局限

于 , 和 , 元素。

　　,.!,/!.;9!任何元素都可以设置边框,，你可以分别定义

!!,1 和 

,6

　　6!,/!6<9!用 ，你可以定义 , 的边框为统一样式，也可以分别定义

!!,1!! 边框的颜色、尺寸和样式。

　　你可以使用 ,!!!!这些选择器2!

　　如果你需要设置无边框效果，可以使用  定义： ,/!9

(,!*

(,!*

(,!*!

/!9

/!9

/!,9!

　　许多 7 列或者 6 列布局都使用 8 属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可

以使用  属性2

6

)6

　　6!/!6<9!用 ，任何元素都可以设定  属性，同样， 可以分别设

置 !!,1!!。 是透明的。

!</!9

1/!-9!1/!-9!

<!只适用于文本2!

　　象 )， 这样的块级怨毒可以通过 1/!-9!和 1/!-9来水平居中

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

　　由于浏览器对  支持的不完善，我们有时候不得不采取一些技巧  或建立一种环境

=-来让  实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧，盒模型

,- 的技巧等等。所有这些技巧都在  !> 的文章《&!=,!$/!!

1!!!1》中有详细说明。

　　另外一个关于  技巧的资源站点是 ?!@ 和  !?) 的“!!A) B。

XHTML 下 css+div 布局总结

xml<,!-!-的出现，结构化文档和数据有了一个通用的、科适应的格式，不仅仅应

用在 , 上，也可以应用在任何地方。标准称为可能。

XHTML 是 !A<,! <!-!- 可扩展标识语言的缩写。在 C24 的基础上，

用 D 的规则对其进行扩展，得到了 D。它实现  向 D 的过渡。

 是 ! ! 层叠样式表的缩写。纯  布局与结构式 D 相结合能帮助设计师分离

外观与结构，使站点的访问及维护更加容易。

1)为页面添加正确的 DOCTYPEE

EEE$FGA 是 -1!  的简写。主要用来说明你用的 D 或者  是什么版本。浏览器根据

你 $FGA 定义的 $$文档类型定义来解释页面代码。

EE!DH24 提供了三种 $FGA 可选择：

E!H过渡型（!）使用非常普遍。

E! (I$FGA ! 1 ! J?& ! ++=6++$$ ! D ! H24 ! ++AKEEEEEEE

/++262+L+<1H+$$+<1H2*!

7严格型（!）

E! (I$FGA ! 1 ! J?& ! ++=6++$$ ! D ! H24 ! ++AK

/++262+L+<1H+$$+<1HEEE!2*!

6框架型（1!）

EE! (I$FGA ! 1 ! J?& ! ++=6++$$ ! D ! H24 ! 1++AKEEEEE

/++262+L+<1H+$$+<1H12*!

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

EE!直接在 $FGA 声明后面添加如下代码：

(1!D/++262+H:::+<1!*!

EE!一个 1 是收集元素类型和属性名字的一个详细的 $$，1 声明允许你通过一个在线地

址指向来识别你的 1。只要照样输入代码就可以。

3)声明你的编码语言

EE!为了被浏览器正确解释和通过标识校验，所有的 D 文档都必须声明它们所使用的编码语言。代码如下：

(1!0-) !<+19!#?76H7!+*!

EE!这里声明的编码语言是简体中文 #?76H7，你如果需要制作繁体内容，可以定义为 ?&#M。

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

EE!D 对大小写是敏感的，所以，D 也是大小写有区别的。所有的 D 元素和属性的名字都必须使

用小写。否则你的文档将被 =6 校验认为是无效的。例如下面的代码是不正确的：

5)为图片添加 alt 属性

EE!为所有图片添加  属性。 属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有

可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了  属性，代码才会被 =6

正确性校验通过。注意的是我们要添加有意义的  属性，象下面这样的写法毫无意义：

EE!(1!2!2*!

正确的写法：

EE!(1!2!互动力工作室标志，点击返回首页*!

6)给所有属性值加引号

EE!在  中，你可以不需要给属性值加引号，但是在 D 中，它们必须被加引号。还必须用空格分开属

性。

例：(!NM5>N+*!这也是不正确的

7)关闭所有的标签

EE!在 D 中，每一个打开的标签都必须关闭。空标签也要关闭，在标签尾部使用一个正斜杠 +来关闭它们

自己。例如：

E!(,!+*!

8)收藏夹小图标

EE!例如：首先制作一个 HO<HO 的  图标，命名为 )2，放在根目录下。然后将下面的代码嵌入

 区：

(!!+)2! 1+<!+*

(!-!!+)2! 1+<!+*

剩余33页未读，继续阅读

评论收藏

内容反馈

qq_28346693

2015-06-26

简单的布局，使用初学者

HTML css DIV 网页布局

评论1

最新资源

HTML css DIV 网页布局

评论1

最新资源

相关推荐

50个Div+CSS模板

HTML DIV布局

DIV_CSS 网页布局

CSS.DIV网页样式与布局

CSS+DIV网页设计与布局

html css div网页布局

HTML5.CSS3网页布局和样式精粹

网页设计-页面布局篇(Css+Div)

精通CSS+DIV网页布局

DIV布局，网页结构

CSS+DIV网页布局和样式

DIV+CSS布局网页大全

DIV+CSS网页布局专题

精通CSS+DIV网页样式与布局

divcss布局入门教程

CSS+DIV网页布局技术详解

css+div网页布局实例40例

精通css+div网页样式与布局

DIV+CSS 网页布局心得

DIV+CSS网页布局提升篇

漫画图说CSS+DIV网页布局（上）

Div+CSS 布局大全

Html+div+CSS布局

DIV＋CSS＋HTML布局（三行两列布局）

[变幻之美-DivCSS网页布局揭秘-案例实战篇](金峰) 源码+PDF