DIVCSS布局大全.docx

DIVCSS布局大全.docx

《DIVCSS布局大全.docx》由会员分享，可在线阅读，更多相关《DIVCSS布局大全.docx（95页珍藏版）》请在冰点文库上搜索。

DIVCSS布局大全

《Div+CSS布局大全》博客园JesseZhao整理http:

//bloMSN/Mail:

prolibertine@gmail.com

《Div+CSS布局大全》

整理者：

JesseZhao

网站：

http:

//JesseZblogs.com

送给我最爱的女朋友蜜蜜，希望她可以永远快乐幸福！

！

！

第1页

《Div+CSS布局大全》博客园JesseZhao整理http:

//bloMSN/Mail:

prolibertine@gmail.com

目录

div＋css布局入门.................................................................................................................................4

XHTML下css+div布局总结.....................................................................................................................6网页设计DIV+CSS——第1天:

选择什么样的DOCTYPE...........................................................................9第一天.............................................................................................................................................9

什么是DOCTYPE..............................................................................................................................10我们选择什么样的DOCTYPE...........................................................................................................10补充...............................................................................................................................................10网页设计DIV+CSS——第2天:

什么是名字空间...................................................................................10网页设计DIV+CSS——第3天:

定义语言编码.......................................................................................11网页设计DIV+CSS——第4天:

调用样式表...........................................................................................11外部调用样式表.............................................................................................................................11双表法调用样式表.........................................................................................................................12网页设计DIV+CSS——第5天:

head区的其他设置...............................................................................12收藏夹小图标................................................................................................................................12为搜索引擎准备的内容..................................................................................................................12网页设计DIV+CSS——第6天:

XHTML代码规范....................................................................................12

1.所有的标记都必须要有一个相应的结束标记.............................................................................13

2.所有标签的元素和属性的名字都必须使用小写.........................................................................13

3.所有的XML标记都必须合理嵌套...............................................................................................13

4.所有的属性必须用引号""括起来...............................................................................................13

5.把所有<和&特殊符号用编码表示...............................................................................................13

6.给所有属性赋一个值..................................................................................................................13

7.不要在注释内容中使“--”.......................................................................................................13

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

CSS入门...............................................................................................14

1.基本语法规范.............................................................................................................................14

2.颜色值........................................................................................................................................14

3.定义字体....................................................................................................................................14

第2页

《Div+CSS布局大全》博客园JesseZhao整理http:

//bloMSN/Mail:

prolibertine@gmail.com

4.群选择器....................................................................................................................................14

5.派生选择器................................................................................................................................14

6.id选择器...................................................................................................................................14

6.类别选择器................................................................................................................................15

7.定义链接的样式.........................................................................................................................15

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

CSS布局入门........................................................................................15

1.定义DIV.....................................................................................................................................15

2.CSS2盒模型...............................................................................................................................16

3.辅助图片一律用背景处理..........................................................................................................17

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

第一个CSS布局实例............................................................................17

1.确定布局....................................................................................................................................18

2.定义body样式...........................................................................................................................18

3.定义主要的div..........................................................................................................................18

4.100%自适应高度?

.......................................................................................................................20网页设计DIV+CSS——第10天:

自适应高度.........................................................................................20网页设计DIV+CSS——第11天:

不用表格的菜单..................................................................................21

1.不用表格的菜单（纵向）..............................................................................................................21

2.不用表格的菜单（横向）..............................................................................................................22

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

校验及常见错误..................................................................................24

1.XHTML校验.................................................................................................................................24

2.CSS2校验...................................................................................................................................25

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

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

Div+CSS布局入门教程...........................................................................................................................37

第3页

《Div+CSS布局大全》博客园JesseZhao整理http:

//bloMSN/Mail:

prolibertine@gmail.com

div＋css布局入门

你正在学习CSS布局吗？

是不是还不能完全掌握纯CSS布局？

通常有两种情况阻碍你的学习：

第一种可能是你还没有理解CSS处理页面的原理。

在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。

这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性（例如：

cellpadding,、hspace、align="left"等等）束手无策，不知道该转换成对应的什么CSS语句。

当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

结构化HTML

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

然后我们用Photoshop

或者Fireworks画出来、切割成小图。

最后再通过编辑HTML将所有设计还原表现在页面上。

如果你希望你的HTML页面用CSS布局（是CSS-friendly的），你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。

外观并不是最重要的。

一个结构良好的HTML页面可以以任何外观表现出来，CSSZenGarden是一个典型的例子。

CSSZen

Garden帮助我们最终认识到CSS的强大力量。

HTML不仅仅只在电脑屏幕上阅读。

你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。

但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。

开始思考首先要学习什么是"结构"，一些作家也称之为"语义"。

这个术语的意思是你需要分析你的内容块，以及每块内容服务的

目的，然后再根据这些内容目的建立起相应的HTML结构。

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

标志和站点名称主页面内容站点导航（主菜单）子菜单

搜索框功能区（例如购物车、收银台）页脚（版权和有关法律声明）

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