前言
CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以博雅互动的官网首页举例。
版心
首页的版心如下：
这里我们要普及一个概念，叫“版心”。版心是页面中主要内容所在的区域。
比如说，网站左上角的logo，设计图给出的左边距是143像素，此时，我们千万不要以为，logo的左边距真的是143像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。
我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。
网页的结构
从结构上来看，网页分为头部（导航栏）、banner区、内容区、底部。
导航栏的制作
在此我们只讲基础知识的使用，不涉及浏览器的优化。
class==header这个div是顶部的通栏，我们在里面放一个1000px宽的div，作为通栏的版心，我一般把这个版心称为class=inner_c，c指的是center。
class=inner_c不需要给高，因为它可以被内容撑高。
现在我们需要在class=inner_c里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。
接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用CSS3实现（IE 7、IE 8不兼容）。我们暂时使用切图来实现。
我们最好把「加入我们」这个超链接<a>放到div里，然后设置div的margin和padding，而不是直接设置<a>的边距。
我们起个名字叫class=jrwm是没有问题的，这在工作当中很常见，如果写成class=join_us反倒很别扭。
暂时我们的做法是：
- （1）给
class=jrwm_box这个div里放一个class=jrwm的div。class=jrwm用来放绿色的背景图片。 - （2）在
class=jrwm里放一个超链接，并将超链接转为块级元素。
最终，导航栏的代码如下：
1 |