CSS布局：40个教程、技巧、例子和最佳实践.doc

css布局：40个教程、技巧、例子和最佳实践基于css的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解css布局的基础和本质。这也是本文成文的原因-找到那些完美的布局，完全灵活的，等高栏和工作完美的布局。因此下面这个列表就是我们整理了网络上关于基于css布局的一些技巧，教程和最佳实践的列表。ad：前言： 布局是web开发一个重要的课题，进入xhtml/css后，使用table布局的方式逐渐淡出，css布局以众多优点成为主流，本文将介绍40个基于css的web布局的资源和教程。文章的出处在/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的css书籍ccs: the missing manual, 2nd edition中都可以找到，据我所知，第二版在中国没有翻译出版。你可以从这里下载英文版（不过需要注册个用户名）正文基于css的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解css布局的基础和本质。这也是本文成文的原因 找到那些完美的布局，完全灵活的，等高栏和工作完美的布局。因此下面这个列表就是我们整理了网络上关于基于css布局的一些技巧，教程和最佳实践的列表。当然你也可能对下面这些和css相关的主题有兴趣：the 7 css hacks that we should useusing css to do anything: 50+ creative examples and tutorialsusing css to fix anything: 20+ common bugs and fixescss 布局教程1、使用css完成三栏固定布局结构- 这篇文章解释了如何实现一个基于的html/css来设计一个简单的带有基本要素（顶部的logo条，导航条，文本区，定义分类的中部栏，右边侧栏插入google的120x600的广告区）的固定三栏页面布局。2、使用css设计页面布局- 如何使用css文件来为你的站点设计页面布局。3、如何创建一个水平布局的站点- 创建不同于常规的水平布局的站点技术（译者注：水平布局，客户体验也就仁者见仁了）例子查看这里 |下载4、超级简单的两栏布局- 创建不同于常规的水平布局的站点技术（译者注：这里是原作者笔误吧和上面的内容一样）.例子查看这里 下载5、简单两栏css布局- 这是一个创建简单两栏布局的教程。这种布局包含了一个标题区，一个水平导航条，主内容区，边侧栏，和页脚区。并且这个布局是水平居中的。例子查看这里6、圣杯布局(the holy grail layout) 3栏布局会有一些问题 ，这篇文章讨论了一种三栏布局两栏固定宽度边侧栏加上一栏变宽中栏布局，保证了页面的良好结构和清晰。例子查看这里7、css居中101- 如何使用css完成居中一个固定宽度的布局使用css，通过下面两条规则完成对id为container的div所包含的内容居中1234 .entire layout goes here.12345678body text-align: center;#container margin: 0 auto; width: xxxpx; text-align: left;8、从头创建css布局- 这个指南通过创建一个全功能的 css布局来一步步教你入门css布局。9、非主流！多栏布局- 多栏布局，等高栏（每一列的高度都相等），固定或变宽中央区，简洁标记，css 。(译者注：原文作者的图配的和上图一样)例子查看这里10、创建天下无双的css布局- 高灵活性布局,等高栏，跨栏垂直摆放元素。本文告诉你通过何等手段完成这些目标，并使用它们创建天下无双的css布局（译者注:原文是one true layout ，不知道怎么翻译，就天下无双吧。）查看这里11、从psd到html，手把手完成web设计-从photoshop到完整html，全过程手把手教会你。例子查看这里 | 下载12、5个xhtml/css技巧 5个css技巧帮助你完成从基于表格的布局到基于css的布局。13、设计一个基于css的模板 这是一个教你创建基于css的模板页的基础教程。这个教程由下面几个部分构成：第一部分覆盖了在photoshop cs*中的创建导航条按钮，第二部分：创建背景接下来的清单是标题和页面布局，最后的部分在xhtml和css中实现。下载14、使用css布局跳出常规布局- 如果你理解了基于表格布局的工作方式，你能通过合并或拆分表格创建你随心所欲的布局。就这个目标（同时支持灵活性和可维护性），css能够提供比基于表格更多地东西。jina bolton的教程解释如何达到这个目标。15、高级css教程:手把手- 这个教程的终极目标创建一个css布局，这个css布局精确地重组了原有使用table的webr的布局。16、了解css布局的6个关键要素- 本文讲述了6件基于css布局需要了解的事情：盒模型(box model)，浮动栏(floated columns) （译者注：float是web布局最重要的一个属性了）。使用em来设置尺寸（sizing using ems），图片替换（image replacement）,浮动导航和sprintes。17、你会犯这些常见的博客布局错误吗？-讨论4个博客布局中常见而且易修复的错误。18、页面布局-css页面布局中的浮动元素和定位元素实践指导。你可以查看这些例子：absolute position within a relative box two floated boxes和using a border to provide the background for a column19、site in an hour- 使用复杂ccs布局完成简单的工作。关于布局的最佳资源下面的大多数这些资源不需要许可就能直接使用，然而，其中的一些需要先发邮件确认一下是否可以使用这些资源。因此，在使用之前最好先检查资源的版权信息。20、简单css页面布局- 这里有一套2栏和3栏的css布局。你可以通过这里查看这些样例 liquid three column layout, left aligned, set widthand liquid insanity.21、完美的三栏变宽布局（百分比定宽度）the perfect 3 column liquid layout (percentage widths)- 没有css hack（译者注：不知道怎么翻译，点击这里查看解释）. 良好地收索引擎优化.无图. 无javascript. 跨浏览器 和iphone设备兼容。你可以通过这里查看样例 liquid three column layout, left aligned, set width 和liquid insanity. (译者注：这里的链接和上面重复了，哎，原文的错误吧)22、css模板和样例你可以通过这里查看这些样例 3 columns fixed centered, fixed box totallycenteredand 3 columns, alldynamic23、im 布局- im 布局是一种简单地的css布局系统，im布局提供了全a级的浏览器的支持。你可以通过这里查看这些样例: the holy grail 3 column layout, the classic blog layout 和 the multi column layout.24、cssplay - css布局列表你可以通过这里查看这些样例:cross browser fixed, three columns and css frame the holy grill.25、layoutgala - 基于同样的的标记l得到最大数量的不同的布局方式。没有ccs hack，没有css workaround ，良好的浏览器兼容性。40种不同布局。你可以通过这里查看这些样例:three fixed columns, three percentage columns andliquid, three columns, hybrid widths (吐槽：没有等高，不好看).26、glish- 许多有用的跨浏览器布局技术你可以通过这里查看这些样例: 3 columns, the holy grail, 2 columns, ala style and 3 columns, all fluid27、thenoodleincident- css 从简单的单盒到3盒并增加一个顶部条，所有都是变宽。28、the layout reservoir- 很多有用的css布局技术你可以通过这里查看这些样例: 2 columns left menu, 3 columns flanking menus和auto-width margins .29、the only css layout you need- 在这篇文章中将会为你展现10个基于同一的html的不同的的布局。你可以通过这里查看这些样例: three column css layout left and right menu, two column css layout top and left menu 和 three column css fluid layout: 100% width30、另一个多栏布局-是一个创建当代流行的变宽的浮动布局的xhtml/css框架。这是一个多功能实用的布局。点击这里下载.31、liquid designs- 使用xhtml和css的变宽设计库。最佳实践如果你需要寻找一些布局灵感，你可以从下面的