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

     <p>        <strong>前言：</strong> 布局是 WEB 开发一个重要的课题，进入 XHTML/CSS 后，使用 TABLE 布局的方式逐渐淡出，CSS 布局以众多优点成为主流，本文将介绍 40 个基于 CSS 的 web 布局的资源和教程。文章的出处在 <a href="/misc/goto?guid=4958333457633774831" target="_blank">http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html</a>。文中的不少的例子在一本经典的 CSS 书籍<a href="/misc/goto?guid=4958333458437920115">《CCS: The Missing Manual, 2nd Edition》</a>中都可以找到，据我所知，第二版在中国没有翻译出版。你可以从<a href="http://www.itpub.net/forum.php?mod=viewthread&tid=1210179&highlight=CSS%2Bthe%2Bmissing%2Bmanual">这里</a>下载英文版（不过需要注册个用户名）</p>    <p>        <strong>正文</strong></p>    <p>        <strong>基于 CSS 的布局</strong>能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解 CSS 布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局，<strong>完全灵活的，等高栏</strong>和工作完美的布局。</p>    <p>        因此下面这个列表就是我们整理了网络上关于基于 CSS 布局的一些技巧，教程和最佳实践的列表。</p>    <p>        当然你也可能对下面这些和 CSS 相关的主题有兴趣：</p>    <p>        <a href="/misc/goto?guid=4958333460033836297">The 7 CSS Hacks that we should use</a></p>    <p>        <a href=">The 7 CSS Hacks that we should use</A></P> <P>        <A href=">The 7 CSS Hacks that we should use</a></p>    <p>        <a href="http://www.open-open.com/news/admin/edit/%3EThe%207%20CSS%20Hacks%20that%20we%20should%20use%3C/a%3E%3C/p%3E%20%3Cp%3E        %3Ca%20href=">The 7 CSS Hacks that we should use</a></p>    <p>        <a href=">The 7 CSS Hacks that we should use</A></P> <P>        <A href=">The 7 CSS Hacks that we should use</a></p>    <p>        <a href="/misc/goto?guid=4958333462349347099">Using CSS to Do Anything: 50+ Creative Examples and Tutorials</a></p>    <p>        <a href="/misc/goto?guid=4958333463147855896">Using CSS to Fix Anything: 20+ Common Bugs and Fixes</a></p>    <p>        <strong><strong>CSS 布局教程</strong></strong></p>    <p>        1-<a href="/misc/goto?guid=4958333463932021577">使用 CSS 完成三栏固定布局结构</a>- 这篇文章解释了如何实现一个基于的 HTML/CSS 来设计一个简单的带有基本要素（顶部的 logo 条，导航条，文本区，定义分类的中部栏，右边侧栏插入 google 的 120X600 的广告区）的固定三栏页面布局。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/56fba59f77968b4722ed59ed2d5dbbc1.jpg" width="450" height="297" /></p>    <p>        2-<a href="/misc/goto?guid=4958333464738332161">使用 CSS 设计页面布局</a>- 如何使用 CSS 文件来为你的站点设计页面布局。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/303dd27a96bde73932f1eb56c33e534e.jpg" width="450" height="200" /></p>    <p>        3-<a href="/misc/goto?guid=4958333465531112211">如何创建一个水平布局的站点</a>- 创建不同于常规的水平布局的站点技术（译者注：水平布局，客户体验也就仁者见仁了）</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/3ab8bcbea1310f01cc40f1ef1c06c2a5.jpg" width="450" height="190" /></p>    <p>        例子<a href="/misc/goto?guid=4958333466316586091">查看这里</a> <a href="/misc/goto?guid=4958333467111513610">下载</a></p>    <p>        4-<a href="/misc/goto?guid=4958333467911670759">超级简单的两栏布局</a>- 创建不同于常规的水平布局的站点技术（译者注：这里是原作者笔误吧和上面的内容一样）.</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/891b77398a6ebadd093bd04aa2ba0bdd.jpg" width="450" height="100" /></p>    <p>        例子<a href="/misc/goto?guid=4958333468708265435">查看这里</a> <a href="/misc/goto?guid=4958333469507733082">下载</a></p>    <p>        5-<a href="/misc/goto?guid=4958333470304778969">简单两栏 CSS 布局</a>- 这是一个创建简单两栏布局的教程。这种布局包含了一个标题区，一个水平导航条，主内容区，边侧栏，和页脚区。并且这个布局是水平居中的。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/ed585838ed14bae356133cc3fb4dc70c.gif" width="450" height="150" /></p>    <p>        例子<a href="/misc/goto?guid=4958333471095378637">查看这里</a></p>    <p>        6-<a href="/misc/goto?guid=4958333471890088932">圣杯布局(The holy grail layout)</a> – 3 栏布局会有一些问题 ，这篇文章讨论了一种三栏布局——两栏固定宽度边侧栏加上一栏变宽中栏布局，保证了页面的良好结构和清晰。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/4dec57b33f9929555ad4dbc29876fde2.gif" width="450" height="362" /></p>    <p>        例子<a href="/misc/goto?guid=4958333472679973840">查看这里</a></p>    <p>        7-<a href="/misc/goto?guid=4958333473493120557">CSS 居中 101</a>- 如何使用 CSS 完成居中一个固定宽度的布局</p>    <p>        使用 CSS，通过下面两条规则完成对 id 为 container 的 DIV 所包含的内容居中</p>    <pre class="brush:css; toolbar: true; auto-links: false;">　　<body>    　　 <div id="container"> ...entire layout goes here...    　　</div>    　　</body>    　　<pre>body {    　　    text-align: center;    　　}    　　#container {    　　    margin: 0 auto;    　　    width: xxxpx;    　　    text-align: left;    　　}</pre>    <br />    <p>        8-<a href="/misc/goto?guid=4958333474288066868">从头创建 CSS 布局</a>- 这个指南通过创建一个全功能的 CSS 布局来一步步教你入门 CSS 布局。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/09b12ade3f07b2e9ddb001b7b7b09045.gif" width="450" height="255" /></p>    <p>        9-<a href="/misc/goto?guid=4958333475084189340">非主流！多栏布局</a>- 多栏布局，等高栏（每一列的高度都相等），固定或变宽中央区，简洁标记，CSS 。(译者注：原文作者的图配的和上图一样)</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/09b12ade3f07b2e9ddb001b7b7b09045.gif" width="450" height="255" /></p>    <p>        例子<a href="/misc/goto?guid=4958333475884068675">查看这里</a></p>    <p>        10- <a href="/misc/goto?guid=4958333476669498391">创建天下无双的 CSS 布局</a>- 高灵活性布局，等高栏，跨栏垂直摆放元素。本文告诉你通过何等手段完成这些目标，并使用它们创建天下无双的 CSS 布局（译者注:原文是 One True Layout ，不知道怎么翻译，就天下无双吧。）</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/01eb8f03e3db7dbeadd3c497cf783bc4.gif" width="450" height="180" /></p>    <p>        <a href="/misc/goto?guid=4958333477463709612">查看这里</a></p>    <p>        11-<a href="/misc/goto?guid=4958333478265367655">从 PSD 到 HTML，手把手完成 WEB 设计</a>-从 Photoshop 到完整 HTML，全过程手把手教会你。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/5913588668ce6de963d8dbd86eda59f4.jpg" width="450" height="341" /></p>    <p>        例子<a href="/misc/goto?guid=4958333479057252487">查看这里</a> <a href="/misc/goto?guid=4958333479845822701">下载</a></p>    <p>        12- <a href="/misc/goto?guid=4958333480665544798">5个 XHTML/CSS 技巧</a> – 5 个 CSS 技巧帮助你完成从基于表格的布局到基于 CSS 的布局。</p>    <p>        13-<a href="/misc/goto?guid=4958333481460513991">设计一个基于 CSS 的模板</a> – 这是一个教你创建基于 CSS 的模板页的基础教程。这个教程由下面几个部分构成：第一部分覆盖了在 Photoshop CS*中的创建导航条按钮，第二部分：创建背景接下来的清单是标题和页面布局，最后的部分在 XHTML 和 CSS 中实现。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/11335e6d356e00a432beaab54295b696.jpg" width="450" height="250" /></p>    <p>        <a href="/misc/goto?guid=4958333482255780765">下载</a></p>    <p>        14-<a href="/misc/goto?guid=4958333483050906281">使用 CSS 布局跳出常规布局</a>- 如果你理解了基于表格布局的工作方式，你能通过合并或拆分表格创建你随心所欲的布局。就这个目标（同时支持灵活性和可维护性），CSS 能够提供比基于表格更多地东西。Jina Bolton 的教程解释如何达到这个目标。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/5d018a2ab349eb202f8f2d5417d2a871.gif" width="450" height="250" /></p>    <p>        15-<a href="/misc/goto?guid=4958333483850229892">高级 CSS 教程:手把手</a>- 这个教程的终极目标创建一个 CSS 布局，这个 CSS 布局精确地重组了原有使用 table 的 WebReference.com 的布局。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/6aeebad06a886d4994948e278a2c8da0.gif" width="450" height="263" /></p>    <p>        16-<a href="/misc/goto?guid=4958333484644312672">了解 CSS 布局的 6 个关键要素</a>- 本文讲述了 6 件基于 CSS 布局需要了解的事情：盒模型(Box Model)，浮动栏(Floated Columns) （译者注：float 是 WEB 布局最重要的一个属性了）。使用 Em 来设置尺寸（Sizing Using Ems），图片替换（Image Replacement），浮动导航和 Sprintes。</p>    <p>        17-<a href="/misc/goto?guid=4958333485453911765">你会犯这些常见的博客布局错误吗？</a>-讨论 4 个博客布局中常见而且易修复的错误。</p>    <p>        18-<a href="/misc/goto?guid=4958333486236241806">页面布局</a>-CSS 页面布局中的浮动元素和定位元素实践指导。</p>    <p>        你可以查看这些例子：<a href="/misc/goto?guid=4958333487035248313">Absolute Position within a relative box</a><a href="/misc/goto?guid=4958333487835808161"> two floated boxes</a> 和<a href="/misc/goto?guid=4958333488629624713"> using a border to provide the background for a column</a></p>    <p>        19-<a href="/misc/goto?guid=4958333489422133314">Site in an Hour</a>- 使用复杂 CCS 布局完成简单的工作。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/cbf2be96b699219bcb39900b74168dbf.jpg" width="450" height="250" /></p>    <p>        <strong><strong>关于布局的最佳资源</strong></strong></p>    <p>        下面的大多数这些资源不需要许可就能直接使用，然而，其中的一些需要先发邮件确认一下是否可以使用这些资源。因此，在使用之前最好先检查资源的版权信息。</p>    <p>        20-<a href="/misc/goto?guid=4958333490205876134">简单 CSS 页面布局</a>- 这里有一套 2 栏和 3 栏的 CSS 布局。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/4d3630cf3c0b14c3141db8f6c7114a69.jpg" width="450" height="255" /></p>    <p>        你可以通过这里查看这些样例<a href="/misc/goto?guid=4958333491007930648"> Liquid three column layout</a>,<a href="/misc/goto?guid=4958333491801890382"> Left aligned, set width</a> and <a href="/misc/goto?guid=4958333492599966230">Liquid insanity</a>.</p>    <p>        21-<a href="/misc/goto?guid=4958333493389512742">完美的三栏变宽布局（百分比定宽度）The Perfect 3 Column Liquid Layout (Percentage widths)</a>- 没有 CSS hack（译者注：不知道怎么翻译，点击<a href="/misc/goto?guid=4958333494180678536">这里</a>查看解释）. 良好地收索引擎优化.无图. 无 Javascript. 跨浏览器和 IPHONE 设备兼容</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/4c0a90d68e7711fe0f81e4949770a4a0.gif" width="450" height="370" /></p>    <p>        你可以通过这里查看样例 <a href="/misc/goto?guid=4958333491007930648">Liquid three column layout</a>, <a href="/misc/goto?guid=4958333491801890382">Left aligned, set width</a> 和 <a href="/misc/goto?guid=4958333492599966230">Liquid insanity</a>. (译者注：这里的链接和上面重复了，哎，原文的错误吧)</p>    <p>        22-<a href="/misc/goto?guid=4958333497177338204">CSS 模板和样例</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/0be13f0ed3dba5fbb14f5ed0562e7459.gif" width="450" height="380" /></p>    <p>        你可以通过这里查看这些样例<a href="/misc/goto?guid=4958333497978182054"> 3 columns fixed</a> <a href="/misc/goto?guid=4958333497978182054">centered</a>, <a href="/misc/goto?guid=4958333499492018147">fixed Box totally</a><a href="/misc/goto?guid=4958333499492018147">centered</a> and <a href="/misc/goto?guid=4958333501021713978">3 columns, all</a><a href="/misc/goto?guid=4958333501021713978">dynamic</a></p>    <p>        23-<a href="/misc/goto?guid=4958333502537212685">IM 布局</a>- IM 布局是一种简单地的 CSS 布局系统，IM 布局提供了全A级的浏览器的支持。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/4b548e1036b9c08b9d39371fb9853d14.gif" width="450" height="250" /></p>    <p>        你可以通过这里查看这些样例:<a href="/misc/goto?guid=4958333503337501461"> The Holy Grail 3 Column Layout</a>, <a href="/misc/goto?guid=4958333504136817424">The Classic Blog Layout </a>和<a href="/misc/goto?guid=4958333504929568841"> The Multi Column Layout.</a></p>    <p>        24-<a href="/misc/goto?guid=4958333505716571350">CSSplay </a>- CSS 布局列表</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/9769a8e00d20c737b26f3bbc94c234ee.gif" width="450" height="87" /></p>    <p>        你可以通过这里查看这些样例:<a href="/misc/goto?guid=4958333506524995130">Cross browser FIXED</a>, <a href="/misc/goto?guid=4958333507318185516">Three columns</a> and <a href="/misc/goto?guid=4958333508120888187">CSS Frame – The Holy Grill</a>.</p>    <p>        25-<a href="/misc/goto?guid=4958333508914453771">Layoutgala </a>- 基于同样的的标记l得到最大数量的不同的布局方式。没有 CCS hack，没有 CSS workaround ，良好的浏览器兼容性。40种不同布局。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/71eb733e4e0c5e5a12cf26ba73ed0682.gif" width="450" height="180" /></p>    <p>        你可以通过这里查看这些样例:<a href="/misc/goto?guid=4958333509702832659">Three fixed Columns</a>, <a href="/misc/goto?guid=4958333510481943618">Three percentage columns</a> and <a href="/misc/goto?guid=4958333511283609770">Liquid, three columns, hybrid widths </a>(吐槽：没有等高，不好看).</p>    <p>        26-<a href="/misc/goto?guid=4958333512066749366">Glish</a>- 许多有用的跨浏览器布局技术</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/e1b73bee254baf97063355c3bd359db3.gif" width="450" height="125" /></p>    <p>        你可以通过这里查看这些样例: <a href="/misc/goto?guid=4958333512855688332">3 columns, the holy grail</a>,<a href="/misc/goto?guid=4958333513652110970"> 2 columns, ALA style</a> and <a href="/misc/goto?guid=4958333514440159352">3 columns, all fluid </a></p>    <p>        27-<a href="/misc/goto?guid=4958333515235213477">Thenoodleincident</a>- CSS 从简单的单盒到 3 盒并增加一个顶部条，所有都是变宽。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/9bdb1ef2b776719221c699060ad381ef.gif" width="450" height="140" /></p>    <p>        28-<a href="/misc/goto?guid=4958333516031092638">The Layout Reservoir</a>- 很多有用的 CSS 布局技术</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/e6e461906d716ddba55730eac4c491d2.gif" width="450" height="225" /></p>    <p>        你可以通过这里查看这些样例:<a href="/misc/goto?guid=4958333516827083690"> 2 columns – left menu</a>,<a href="/misc/goto?guid=4958333517624695774"> 3 columns – flanking menus</a> 和<a href="/misc/goto?guid=4958333518406532159"> Auto-width Margins </a>.</p>    <p>        29-<a href="/misc/goto?guid=4958333519211238517">The only CSS layout you need</a>- 在这篇文章中将会为你展现 10 个基于同一的 HTML 的不同的的布局。</p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/806e20daec77d70d1da6413be505139a.gif" width="450" height="225" /></p>    <p>        你可以通过这里查看这些样例: <a href="/misc/goto?guid=4958333519997969539">Three column CSS layout – left and right menu</a>, <a href="/misc/goto?guid=4958333520792407650">Two column CSS layout – top and left menu</a> 和 <a href="/misc/goto?guid=4958333521592341852">Three column CSS fluid layout: 100% width</a></p>    <p>        30-<a href="/misc/goto?guid=4958333522385878850">另一个多栏布局</a>-是一个创建当代流行的变宽的浮动布局的 XHTML/CSS 框架。这是一个多功能实用的布局。</p>    <p>        点击<a href="/misc/goto?guid=4958333523171179025">这里</a>下载.</p>    <p>        31-<a href="/misc/goto?guid=4958333523974423301">Liquid Designs</a>- 使用 XHTML 和 CSS 的变宽设计库。</p>    <p>        <strong><strong>最佳实践</strong></strong></p>    <p>        如果你需要寻找一些布局灵感，你可以从下面的网站链接中找到。这些站点演示了 CSS 布局如何应用于不同类型的网站。查看这些网站是如何分成 2 栏或 3 栏，或混合宽栏和窄栏布局。</p>    <p>        32-<a href="/misc/goto?guid=4958333524757695389">Helldesign</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/812cf56bfdbd446142a856f6a2a85119.jpg" width="450" height="365" /></p>    <p>        33-<a href="/misc/goto?guid=4958333525553279784">Silverbackapp</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/20592cc139fbef9a5a207dc8a4557e25.jpg" width="450" height="325" /></p>    <p>        34-<a href="/misc/goto?guid=4958333526342444977">OS communications informatiques</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/b33a32a8a82b8027602f56364669efe5.jpg" width="450" height="310" /></p>    <p>        35-<a href="/misc/goto?guid=4958333527144881542">Rockatee</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/eae38a0b009a2b8c697d9c600291c3a4.jpg" width="450" height="310" /></p>    <p>        36-<a href="/misc/goto?guid=4958333527938299157">Darrenhoyt</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/c1dda17b29a32bf97fc57771b7098994.jpg" width="450" height="225" /></p>    <p>        37-<a href="/misc/goto?guid=4958333528734720613">Makebetterwebsites</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/3a89d70cdc6ed2afe8757f403ba93916.jpg" width="450" height="250" /></p>    <p>        38-<a href="/misc/goto?guid=4958333529532161232">Elitetheme</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/6de98d2e9dcd653e56ea9ae9813bf498.jpg" width="450" height="250" /></p>    <p>        39-<a href="/misc/goto?guid=4958333530330981661">Studio7designs</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/8752842462994b5bff20e0e1db9aa3aa.jpg" width="450" height="250" /></p>    <p>        40-<a href="/misc/goto?guid=4958333531129285887">Brightcreative</a></p>    <p style="text-align:center;"><img alt="CCS 布局：40个教程、技巧、例子和最佳实践" src="https://simg.open-open.com/show/56f6a54707a787b1e27cb55c9847f686.jpg" width="450" height="300" /></p>