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)

你可能感兴趣的:(JavaScript,XHTML,css,IE,Class,div)