css入门教程之学习网页布局(1)

网页布局的艺术：如何用CSS打造完美的页面布局

如果你对CSS布局充满热爱，那么这篇文章将带你深入了解如何用CSS实现网页布局，即如何控制网页内各个元素的显示位置。对于初学者而言，可能觉得学习网页制作的起点是布局，实则不然。在CSS网页设计过程中，我们需要遵循一定的步骤：平面设计→页面切割→布局→细节控制。

平面设计是网页的基石，这是读者直接面对的界面。我们不能仅仅在脑海中形成大概的印象，因为那样可能只停留在业余水平。推荐使用Photoshop进行平面设计。

布局的过程可以简单理解为将网页划分为几个部分，如header（头部）、content（主体内容）、sidebar（侧边栏）、footer（页脚）。而细节控制则是针对这些部分的细节表现进行处理。

以Jorux的原始Photoshop平面设计图为例（Fig.01），我们可以开始我们的页面切割之旅。

在CSS布局中，我们需要明确一些切割的原则：你是要横着切还是竖着切？第一次切割只需要切割出网页的背景图片，因为背景图片是在CSS中声明的。切的图片要尽量小，让CSS去完成更多的工作。对于设计比较复杂的部分，可以不进行分割，以减少CSS编码的难度。

现在，让我们再次查看Fig.01。最上面的部分是一个黑色的尺子，遮住了“Jorux记事本”，并且具有黑色的投影。在切割时，可能会觉得设计得过于复杂。通过正确的切割思路，我们可以轻松应对。整个网页的背景色是深灰色444，这可以在CSS的body选择器里声明。接着，对于CSS布局的网页，建议先进行横向切割（红色刀割），再进行纵向切割（蓝色刀割）（Fig.02）。这样，你就可以得到header、content、sidebar、footer四个部分。

接下来，我们需要分析这四个部分的背景图片如何切割。对于header部分，可能需要一个横向的背景图片，而对于content和sidebar部分，可能需要一个纵向的背景图片。footer部分可能又是一个独立的背景图片。

在切割过程中，我们需要仔细权衡哪些效果可以通过CSS轻松实现，哪些效果使用图片更简单且大小合适。通过这样的步骤，我们可以使用CSS打造出完美的网页布局。

CSS布局是一个需要不断学习和实践的过程。希望你能对CSS布局有更深入的理解，并能够在实践中运用这些知识，打造出精美的网页布局。