DIV+CSS 案例视频教程（免费的）

新手该怎么学习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网页布局技巧实例6：区分大小写
■DIV+CSS网页布局技巧实例7：取消class和id前的元素限定
■DIV+CSS网页布局技巧实例8：元素属性的默认值
■DIV+CSS网页布局技巧实例9：不需要重复定义可继承的值
■DIV+CSS网页布局技巧实例10：最近优先原则
■DIV+CSS网页布局技巧实例11：多重class定义
■DIV+CSS网页布局技巧实例12：使用子选择器
■DIV+CSS网页布局技巧实例13：不需要给背景图片路径加引号
■DIV+CSS网页布局技巧实例14：组选择器
■DIV+CSS网页布局技巧实例15：用正确的顺序指定链接的样式
■DIV+CSS网页布局技巧实例16：清除浮动
■DIV+CSS网页布局技巧实例17：横向居中(centering)
■DIV+CSS网页布局技巧实例18：导入(Import)和隐藏CSS
■DIV+CSS网页布局技巧实例19：用css hack针对IE的优化
■DIV+CSS网页布局技巧实例20：调试技巧：层有多大？
■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)