CSS混沌初开IV：页面DIV布局解构
在前三讲的教程中我们已经完成了网页界面设计的工作，从本节开始，我们将关注如何对效果图进行解构，并初步拟定网页文件的DIV结构。
首先我们必须明确几个问题，比如设计好的界面应该划分成几块？每块对应网页中的哪部分内容？只有对这些问题有了概念之后，我们才能开始进行切片和导出的操作。如果对页面构建的整个流程很熟悉，那么以上几个问题并没有太大的难度，可能你在PS中设计素材的时候就已经开始考虑之后的DIV划分了。当然，我们是要有一定的应变能力，合理的组织CSS和XHTML，让最终出炉的网页具有更好的灵活性和可访问性。
[b]本例中页面模块划分的规划[/b]
1.页面顶部（the header）；
2.左侧边栏（the left）；
3.主体内容（the content）；
4.页脚（the footer）；
[img]http://www.ximicc.com/attachments/month_0806/i2008616221223.jpg[/img]
[b]必须进行切片并导出JPF或GIF的几块区域[/b]
1. 顶部图片（header）；
2. 默认导航图片（bg_navbutton）
3. 翻转导航图片（bg_navbutton_over）
4. 友情链接图标（bullet_extlink）
5. 文章标题图标（bullet_title）
[img]http://www.ximicc.com/attachments/month_0806/92008614153248.jpg[/img]
也许你会想：“那背景图片呢?”我没有把它罗列在其中，因为背景图片比较特殊，不论在何种分辨率下我们都要保持主体内容的居中，所以我们需要一种更聪明的方法。这是我们要导出的背景图片，它的尺寸是1600X5px，应该够用了，除非你拥有Apple公司30英寸的超宽屏显示器。
[b]利用CSS定义页面的背景[/b]
下面的CSS代码可以让我们的页面背景保持居中显示：[code]body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
} [/code]背景图片只有5px高度，所以我们将其设置为纵向平铺，然后利用参数50%使其水平居中，参数fixed的用处是让背景不随内容的滚动而滚动，它是“凝固”的。这里的选择符我们使用body，因为背景效果是针对整张页面而言的。
[img]http://www.ximicc.com/attachments/month_0806/n200861622136.jpg[/img]
[url=http://www.duoh.com/csstutorials/csstemplate/]>>> 点击查看效果 <<<[/url]
[b]构建页面的DIV结构[/b]
首先来看一下顶部版块的CSS定义：[code]#header {
text-align: center;
} [/code]顶部版块的样式我们使用id选择符，注意在同一个文档中id选择符必须是唯一的。网页的顶部也需要居中，这也是我们为什么定义text-align的原因。下面这段代码我们要添加在body标签之间：[code]<div id="header">
<img src="images/header.jpg" alt="ximicc" width="692" height="90" />
</div>[/code]你可能也注意到了，当顶部图片应用到网页中的时候，其上边缘和浏览器边界之间有一定的间隙，所以在这里我们要用margin和padding进行完善：
[img]http://www.ximicc.com/attachments/month_0806/42008616221315.jpg[/img][code]body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
} [/code][url=http://www.duoh.com/csstutorials/csstemplate/index2.html]>>> 点击查看效果 <<<[/url]
如果你对以上涉及的CSS还不是很熟悉的话，这个[url=http://www.w3schools.com/css/css_intro.asp]入门教程[/url]（英文的，节哀...）建议你去看一下，相信会有很大的帮助。
原文来自【西米CC】：[url]www.ximicc.com[/url]
