新手该怎么学习DIV+CSS网页标准布局?

WEB标准（div+css）该怎么去学习？学习中该注意什么？div布局和table布局的不同在哪里？它的优势在哪儿？css hack又是怎么一回事等等，如果你对这些问题还一头雾水，那么下边这些内容将为你解开谜团，带你找到答案。

俗话说：工欲善其事，必先利其器。要想学好，首先要了解什么是div标准布局，和talle相比，优势在哪儿？那么《DIV＋CSS是什么意思？实质是什么？ 》这篇文章将告诉你这些，如果你准备学习或正在学习div标准布局，建议您先看看这篇文章。主要包括以下内容：

• DIV＋CSS是什么意思？实质是什么？
• DIV+CSS的优势何在？
• 新手学习div＋css，该如何入门？
• 使用什么软件来布局页面和编辑css呢？
• 能不能提供几个实例具体讲解一下怎么来实现？

相信您来学习div标准布局，想必肯定对html及css有了一定了解了，如果还不清楚就要赶紧充电了，不然的话下面的内容学习起来就难了。什么？您连软件还没装，不会吧，除非您能精通到手写代码。否则，赶紧来www.aa25.cn主页的常用软件中把dw下载来安装上吧。

下面该进入正式学习了，本站于2010年9月推出了《十天学会web标准（div+css）》系列教程，适合初学者以最短时间掌握建站方法，从第一课和到第十课，讲的都是实际当中用到的知识，第十课把前边讲解的零碎内容串联起来，把一个网站从切图到框架，到细节布局，幻灯，再到程序的添加，ftp上传下载及错误调试等，如果你认真学完这些教程，相信已经可以做出一个有模有样的网站了。

第一天　XHTML CSS基础知识

第二天 一列布局

第三天 二列和三列布局

第四天 纵向导航菜单及二级弹出菜单

第五天 超链接伪类

第六天　html列表

第七天　横向导航菜单

第八天　下拉及多级弹出菜单

第九天　CSS表单设计

第十天　div+css网页标准布局实例教程（一）

第十天　div+css网页标准布局实例教程（二）

第十天　div+css网页标准布局实例教程（三）

新手在学习过程中，常常会遇到这样那样的问题，有时候可能因为一个很小的问题却困扰半天，那么来这里查查，看看你是不是遇到下面这些问题了。本站为了解决新手的疑惑，本站于2010年6月新特别推出了《新手常见问题》系列视频教程：

1、【视频】怎么让一个div块级元素水平居中

2、【视频】为什么页面四周有一个白边，内容不能贴边显示

3、【视频】如何清除列表前的圆点

4、【视频】格式化标签的默认样式

5、【视频】超链接样式的设置

6、【视频】CSS缩写

7、【视频】IE6的3像素bug

8、【视频】IE6的双倍边距bug

9、【视频】高度自适应

10、【视频】CSS设计网站的导航

11、【视频】背景图片美化导航菜单

12、【视频】CSS Sprites技术

13、【视频】CSS滑动门技术宽度自适应按钮

14、【视频】相对定位和绝对定位

15、【视频】CSS的行高Line Height属性

16、【视频】CSS强制换行与强制不换行

通过这些教程的学习，可以让您迅速掌握div＋css布局的最基本知识和布局方法。同时可以配合本站的div＋css网页版式布局频道提供的50种常用的布局版式，包括固定宽度和自适应宽度两种形式，版式总共如下：

1. 1列固定宽度居中
2. 1列固定宽度居中+头部
3. 1列固定宽度居中+头部+尾部
4. 1列固定宽度居中+头部+导航+尾部
5. 2列固定宽度居中左窄右宽型
6. 2列固定宽度居中右窄左宽型
7. 2列固定宽度居中平分型
8. 2列固定宽度左窄右宽型+头部
9. 2列固定宽度右窄左宽型+头部
10. 2列固定宽度左窄右宽型+头部+尾部
11. 2列固定宽度右窄左宽型+头部+尾部
12. 2列固定宽度左窄右宽型+头部+导航+尾部
13. 2列固定宽度右窄左宽型+头部+导航+尾部
14. 2列固定宽度左窄右宽型+头部+导航+尾部
15. 2列固定宽度右窄左宽型+头部+导航+尾部
16. 3列固定宽度居中
17. 3列固定宽度居中+头部
18. 3列固定宽度居中+头部+尾部
19. 3列固定宽度居中+头部+导航
20. 3列固定宽度居中+头部+导航+尾部
21. 2列左窄右宽、高度自适应+头部+导航+尾部
22. 2列右窄左宽、高度自适应+头部+导航+尾部
23. 2列左窄右宽高度自适应且未知高度底部平齐、型+头部+导航+尾部
24. 2列右窄左宽、高度自适应且未知高度底部平齐+头部+导航+尾部
25. 1列自适应宽度
26. 1列自适应宽度+头部
27. 1列自适应宽度居中+头部+尾部
28. 1列固定宽度居中+头部+导航+尾部
29. 2列左侧固定，右侧自适应宽度，中间无缝型
30. 2列右侧固定，左侧自适应宽度，中间无缝型
31. 2列左侧固定，右侧自适应宽度
32. 2列右侧固定，左侧自适应宽度
33. 2列左侧百分比右侧自适应
34. 2列左侧固定，右侧自适应宽度+头部
35. 2列右侧固定左侧自适应宽度+头部
36. 2列左侧固定右侧自适应宽度+头部+尾部
37. 2列右侧固定，左侧自适应宽度+头部+尾部
38. 2列左侧固定，右侧自适应宽度+头部+导航
39. 2列右侧固定左侧自适应宽度+头部+导航
40. 2列左侧固定右侧自适应宽度+头部+导航+尾部
41. 2列右侧固定左侧自适应宽度+头部+导航+尾部
42. 3列左右侧固定，中间列自适应居中
43. 3列左右侧固定，中间列自适应居中+头部
44. 3列左右侧固定，中间列自适应居中+头部+尾部
45. 3列左右侧固定，中间列自适应居中+头部+导航
46. 3列左右侧固定，中间列自适应居中+头部+导航+尾部
47. 2列左侧固定右侧自适应宽度，未知高度+头部+导航+尾部
48. 2列右侧固定左侧自适应宽度，未知高度+头部+导航+尾部
49. 2列左侧固定右侧自适应宽度，未知高度且底部平齐+头部+导航+尾部
50. 2列右侧固定左侧自适应宽度，未知高度且底部平齐+头部+导航+尾部

配合这些布局实例的学习，更可以让您如虎添翼，更加快速掌握。

以上这些模板地址：http://www.aa25.cn/layout/index.shtml

如果您不喜欢文字＋图片教程，没关系，本站还转载了一系列入门级视频教程，同样可以让您快速成为一个div＋css布局高手。从最初的基本知识与概念，到实例讲解，精彩不容错过。

CSS基础知识与核心概念

CSS初探 - CSS基本知识 - 第1课
CSS基本语法与核心概念 - CSS基本知识 - 第2课
设置丰富的文字效果 - CSS基本知识 - 第3课

CSS/DIV布局专题讲解

设置图片效果 - CSS/DIV专题讲解 - 第1课
设置网页背景 - CSS/DIV布局专题讲解 - 第2课
设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课
设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课
用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课
CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课
理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课
CSS排版 - CSS/DIV布局专题讲解 - 第8课
网页变幻 - CSS/DIV布局专题讲解 - 第9课

CSS与其他技术

CSS与Javascript的综合应用 - CSS与其他技术 - 第1课
CSS与XML的综合运用 - CSS与其他技术 - 第2课
CSS与AJAX的综合应用 - CSS与其他技术 - 第3课

CSS/DIV综合实践

博客设计DIY - CSS/DIV综合实践 - 第1课
小型工作室 - CSS/DIV综合实践 - 第2课
公司网站 - CSS/DIV综合实践 - 第3课
购物网站设计 - CSS/DIV综合实践 - 第4课
旅游观光网站设计 - CSS/DIV综合实践 - 第5课

通过这一系列的学习，相信您的水平已经上了很大的一个台阶，下一步就要多动手，做一个博客的布局，实战练习一下。这时您也可能会发现许多问题，比如说高度自适应问题啦，垂直居中，以及用float浮动后下边内容跑到上边重叠一块啦等等。毕竟教程不可能讲解的非常全面，这时您主就要多动脑了，结合上面学习的知识，举一反三，看能不能变通一下解决。如果还是解决不了，请在本站中搜索，相信您遇到的问题，一般在本站中已提供了答案。

div＋css标准布局时常见的问题，我已在div＋css网页版式布局的底部列出来，您可以参考一下是不是您也遇到了此类问题，主要是布局浮动和css hack问题。或者学习本站于2010年6月新特别推出了《新手常见问题》系列视频教程。

如果您还不太清楚，或遇到的问题较多，那么建议您再学习一下这些内容：

• DIV+CSS网页布局技巧实例1：设置网页整体居中的代码
• DIV+CSS网页布局技巧实例2：设置容器中的内容垂直居中
• DIV+CSS网页布局技巧实例3：设置层的透明度
• DIV+CSS网页布局技巧实例4：使用css缩写
• DIV+CSS网页布局技巧实例5：明确定义单位，除非值为0
• DIV+CSS网页布局技巧实例21：CSS代码书写样式

和这些内容：

1. 超链接访问过后hover样式就不出现的问题
2. firefox下如何使连续长字段自动换行
3. ff下为什么父容器的高度不能自适应
4. IE6的双倍边距BUG
5. IE6下绝对定位的容器内文本无法正常选择的问题
6. IE6下为什么图片下方有空隙产生
7. IE6下这两个层中间怎么有间隙
8. list-style-image无法准确定位的问题
9. LI中内容超过长度后以省略号显示的方法
10. web标准中定义id与class有什么区别吗
11. 如何垂直居中文本
12. 如何垂直居中对齐文本与文本输入框
13. 为什么FF下面不能水平居中呢
14. 为什么FF下文本无法撑开容器的高度
15. 为什么IE6下容器的宽度和FF解释不同呢
16. 为什么web标准中IE无法设置滚动条颜色了
17. 为什么我定义的css样式没有作用呢
18. 为什么无法定义1px左右高度的容器
19. 为什么这个背景颜色无法显示
20. 怎么样才能让层显示在FLASH之上呢
21. 怎样使一个层垂直居中于浏览器中
22. IE6使用滤镜使PNG图片透明后，容器内链接失效的问题。
23. 如何让三列横向排列
24. 通用的加入收藏夹代码
25. 复制到系统剪贴板之IE,ff兼容版
26. javascript为FF设置首页

转载：http://www.aa25.cn/div_css/535.shtml