布局篇(1)—If you love css …_至此, 《if you love css …》的属性篇全部结束, 下篇将进入《布局篇》.-CSDN博客

从本篇开始讲述如何用css实现网页的布局，即如何用css控制网页内各个元素的显示位置。
如果你是一个初学者，很可能觉得做一个网页的第一步就是布局。其实不然，css网页的设计过程可以参考分为以下几步：

平面设计—>页面切割—>布局—>细节控制

1. 平面设计是一个网页的精髓所在，读者直接面对的界面，在本站以后的文章中会涉及此方面内容。也许你会认为在脑子里形成一个网站的大概印象就可以了，那么这种想法直接就给你贴上业余的标签。推荐工具：Photoshop；
2. 页面切割其实可以划分到布局里，因为你的页面切割方式直接影响了布局方式，也体现了你是属于表格布局阵营还是css布局阵营。它是布局(前)的关键步骤。将在本章重点讲述。推荐工具：Photoshop；
3. 如果把布局说简单点，就先得把你的网页简单化。简单到把你的网站分为header，content，sidebar，footer四个部分。
4. 细节控制，将header，content，sidebar，footer的表现细节化。
本章将针对页面切割讲述一些Jorux的私人观点与技术。

首先，我们要有一个被切割的对象，这里以Jorux.com的原始photoshop平面设计图为例。如下,点击看大图(Fig.01):

如果使用表格布局的话，你可能就想到在photoshop里把页面切割为无数个固定宽高的格子。但用css布局的话，你首先要明确的以下几点是：

1. 你是要横着切，还是要竖着切；
2. 第一次切割，只需要把网页中的背景图片切割出来(因为背景图片是在css里声明的)；
3. 切的的图片要尽量小，然后让css去做更多的事情；
4. 设计比较复杂的部分，可以不分割，从而减少css编码的难度；
5. 读者应该根据自己的能力，找出哪些效果css可以轻松实现，而哪些效果用图片更加简单而且size不大，仔细在3.4之间权衡利弊；

现在我们来看Fig.01, 最靠上的部分是个黑色的尺子，遮住了“Jorux记事本”，更遭的是它居然还有黑色的投影。等到要切割的时候，我才后悔当初怎么能设计得如此复杂。但没关系，一切都会好起来的。现在跟着来重温我的切割思路：
1. 整个网页背景色大家应该很清楚，就是深灰色#444，这无需图片，在css里的body选择器里声明就好；
2. 这一步是最关键的一步，请读者仔细体会。对于css布局的网页，Jorux建议你首先给你的原始平面设计来两个横刀(红色)，接着就来个竖刀(蓝色)。实现如下效果(点击看大图Fig.02)：

一定要先横再竖，即先把你的网页分为top，mid，bottom三个部分，然后再把mid分为content和sidebar两个部分。对于单栏样式，只需要两横刀，而对于三栏样式，可能就需要两横两竖刀。

这样你就得到header，content，sidebar，footer四个部分。现在来分析这四个部分的背景图片需要如何切割。
3. header部分的图片非常复杂，但要把那把尺子单独分离出来几乎是不可能的，而且是没有必要的。因为我们还需用这把尺子实现回首页的超级链接，因此它只能是在html文件中<img/>的图片，而非背景，为了减少css编码难度，我们可以把有投影的圆角也和尺子一起切下来以备用，如图(Fig.03):

那么剩下的稍淡的灰色，就是所需要header的背景，我们只需来两竖刀(宽度在4-6px左右为宜)，得到下图(Fig.04):

相信大家知道如何在css里用repeat-x来实现header的背景效果；
4. 接着就是content的背景，很容易看出就是那个带投影的白色背景。马上来上两横刀，高度同样在4-6px为宜，如下图(Fig.05)，在css里用repeat-y就能实现content背景；

5. 还好，在本设计中sidebar无背景，直接继承body的灰色背景就好；
6. footer背景比较简单，就是两个圆角而已，我为了图方便，把那个logo也切了下来，如下(Fig.06)：

这样我们就完成了第一次切割，并且把一切涉及布局的背景图片切了下来。接着就是如何用css布局了，我们的目标是实现以下效果图(Fig.07)：

那么现在就开始编写html代码。既然我们有了一清晰的布局效果图，编写html代码应该是很简单的一件事情。但是越是简单的事，人们忽略的东西就越多。以下Jorux的观点请一定仔细考量：
***对于DIV的使用，请一定从大到小，把那些能在一起的元素划分到一个DIV，然后再在此DIV中继续划分小DIV。所以为实现(Fig.07)的效果图，需要做以下几步：
1. 我们首先把header，content，sidebar，footer归为一个DIV，ID=“AllWrap”；用其实现向左浮动；
2. 接着把header作为一个DIV，ID=“Header”；
3. 把content和sidebar划分在一个DIV，ID=“MidWrap”；然后在其内继续划分为两个DIV，ID分别为Content和Sidebar；
4. 最后把footer作为一个DIV，ID=“Footer”；

最终得到Html代码为：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>My layout</TITLE>
</HEAD>
<BODY>
<div id=”AllWrap”>
       <div id=”Header”>Header</div>
       <div id=”MidWrap”>
              <div id=”Content”>Content</div>
            <div id=”Sidebar”>Sidebar</div>
       </div>
       <div id=”Footer”>Footer</div>
</div>
</BODY>
</HTML>

给读者留一个问题，请有能力的朋友在留言中给出实现效果图样式的css代码。有如下要求：
1. 向左浮动；
2. AllWrap宽为760px；Content宽为560px，高400px；Sidebar宽为200px，高400px；Footer高为80px，宽760px；
2. 在800×600，1024×768，或是宽屏显示器都能正常显示；
3. 在IE6/7, Opera, Firefox均能显示正常；