用CSS建设网站的实例

本教程由Jorux精心翻译并修订，主要参考了Creating a CSS Layout from scratch，以简洁流畅的意译为主，同时融入了许多Jorux的个人见解和创新观点。我们在此感谢原作者Steve Dennis的授权。

目录概览：

第一步：规划网站蓝图。本教程将以直观的图示为例，引领你逐步构建网站。

第二步：创建html模板及文件目录结构。这一步是构建网站的基础，我们将详细讲解如何设置网站的骨架。

第三步：将网站划分为五个主要部分。这五个div构成了网页的基本布局，它们是构建任何网站的核心。

第四步：深入网页布局，div的浮动及其他高级技术。

第五步：关注网页主要框架之外的附加结构的布局与表现，为网站增添更多细节。

第六步：页面内的基本的样式(css)设置。在这一步，我们将学习如何为网页文本添加魅力与个性化。

第七步：专注于网站头部的设计，包括图标和logo的精心布局。让你的网站在第一眼就给人留下深刻印象。

第八步：设置页脚信息，如版权等。完成网站的收尾工作，让网站更加完善。

第九步：制作导航条。这一步相对较难，我们将详细讲解如何创建一个实用又美观的导航条。

第十步：解决IE浏览器的显示问题。让你的网站在所有浏览器中都展现出完美的效果。

第一步详解：规划网站蓝图

在开始构建网站之前，我们需要先规划出网站的蓝图。本教程将以图示的方式，直观地展示网站的构建过程。网站的布局主要由以下五个部分组成：

1. Main Navigation（导航条）：具有动态按钮特效，宽度为760px，高度为50px。

2. Header（网站头部）：包含网站的图标和站名，宽度为760px，高度为150px。

3. Content（网站主要内容）：宽度为480px，高度根据内容而变化。

4. Sidebar（边框）：一些附加信息，宽度为280px，高度根据内容而变化。

5. Footer（网站底栏）：包含版权信息等，宽度为760px，高度为66px。

在规划阶段，我们需要明确每个部分的功能和布局，这样才能更好地进行后续的开发工作。期待你在接下来的教程中，跟随Jorux的步伐，一起CSS布局的奥秘！