当前位置：首页 > DIV+CSS教程 > 正文
诚聘网页设计师月薪3000-8000元，工作地：北京

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

作者:×××　来源:source　【大 中 小】　浏览:　修改日期：2010-09-24　我要评论(177)　    

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/DIV布局专题讲解

 CSS与其他技术

 CSS/DIV综合实践

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

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

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

和这些内容：

  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设置首页

 

（如果您觉得本站不错，请告诉身边的朋友，或转载到论坛、百度知道、贴吧等，记得带网址哟，不胜感激！）

〖DIV+CSS教程〗Tags: div＋css 网页标准 新手入门 教程

相关文章

更多评论(177)..会员评论

jiashao712(59.58.*.*) 发表于：2011-08-23 15:13:06
我刚来学习几天，真的很不错的网站，对新手很有帮助。
pine116(58.39.*.*) 发表于：2011-08-21 16:22:56
这个网站的确是非常不错，感觉真正是从学习者的角度去考虑，并且教程写得深入浅出，学习效率极高。很多其他的网站纯粹就是一堆trick的堆积，完全没有用心去做。
tanyachen(113.90.*.*) 发表于：2011-08-13 00:03:10
请问 不会操作Dreamweaver可以直接学吗
管理员回复：软件很好学的，关键你得知道用它可以干什么
tanyachen(113.90.*.*) 发表于：2011-08-12 20:46:36
跪谢！良师益友，教会我许多知识，节约我许多时间和金钱！很受用！比硅俗动力好多了。
f612345(123.157.*.*) 发表于：2011-08-12 02:45:41
都不要钱吗
管理员回复：不要钱，全免费
yangchenguang(61.172.*.*) 发表于：2011-08-01 18:20:41
太好了，就当我准备放弃css时候，一片曙光出现了。站长，你是我再生父母啊。
similarzhang(180.117.*.*) 发表于：2011-07-30 14:22:24
擦，淘宝买了一堆烂教材，还不如在这看会学的清楚，很不错的网站，知道的晚了
a324568b(60.24.*.*) 发表于：2011-07-20 15:19:54
感觉特别好！

推荐文章

热门文章

最新图片素材

    立体办公用品图标EPS矢量素材

最新评论文章

推荐专题

在线交流QQ群

  • 106310407(开)
  • 55427134(开)
  • 2993401(开)
  • 30235673(开)
  • 33424604(开)
  • 2993401(开)
  • 161512108(开)
  • 161510519(开)
  • 158375021(开)
  • 155858414(开)
  • 143309878(开)
  • 16373807(开)
  • 129098721(开)
  • 123473199(开)
  • 146991009(开)
  • 135792800(开)

出差旅游免费预订酒店

【视频教程】新手常见问题