新手该怎么学习DIV+CSS网页标准布局?(aa25.cn特别奉献)

作者 ××× 来源:aa25.cn　浏览: 　【大 中 小】　发布时间:08-11-17　 更新时间:09-02-22

　　小站从开站到现在也有一年多了，在这一年多时间里，通过做这个站，使自己的水平处到了很大的提高，最欣慰的是同时也帮助了许多网友提高。但现在仍有许多初学者或即将踏入标准化布局的设计师们，可能对怎么去学习？学习中该注意什么？div布局和table布局的不同在哪里？它的优势在哪儿？css hack又是怎么一回事等等，这些问题还一头雾水。今天，我就把小站一年多的精华，按条理和步骤列出来奉献给大家，方便大家来学习。

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

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

这些内容。

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

　　下面该进入正式学习了，本站提供了一系列初级入门教程，可以从这些教程入门，都是由简单到复杂的循序渐进的方式进行讲解的。

通过这些教程的学习，可以让您迅速掌握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列右侧固定左侧自适应宽度，未知高度且底部平齐+头部+导航+尾部

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

 

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

CSS基础知识与核心概念

 

CSS/div布局专题讲解

 

CSS与其他技术

 

CSS/DIV综合实践

 

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

　　div＋css标准布局时常见的问题，我已在div＋css网页版式布局的底部列出来，您可以参考一下是不是您也遇到了此类问题。主要是布局浮动和css hack问题。

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

和这些内容：

  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/535.shtml
〖DIV+CSS教程〗Tags: div＋css 网页标准 新手入门 教程
下一篇：CSS将已访问的链接标记为已读上一篇：彻底弄懂css中单位px和em的区别

相关文章

查看所有评论>>
网友评论