我们给底部边栏添加一个主要的背景，先打开网页的设计图，选择一种背景颜色，这里我们事先准备了几种颜色，点击前景色 ... 然后用鼠标点击设计图上的色块 ... 复制一下颜色的值 ...
回到网页的样式表 ...
先输入一段注释 /* 底部边栏的样式 */ ，然后，使用 #bottom 作为样式的选择器， bottom 这个 id 定义在了包装底部边栏所有内容的元素上面 ...
输入 background，# 号，后面加上刚才我们复制的颜色的值，再输入 url() ，括号里面是背景图像的位置 ...
#bottom{background:#009571 url(images/emerald.png);}
下面我们再给底部边栏添加半圆装饰的背景 ... 使用 .semicircle 做为样式的选择器。
.semicircle{background:url(images/semicircle.png) repeat-x} ， repeat-x 表示背景图像水平重复显示 ...
在这里我们可以为底部边栏添加一个整体的内边距，上下内边距设置为 20px，左右的内边距设置为 0 。
padding:20px 0;
底部标题的样式
我们再处理一下底部内容的样式，先回到网页的设计图看一下 ...
首先要设置一下标题的字号和颜色 ... 另外还要给标题文字添加一下阴影的效果 ... 这样它看起来有点立体感 ...
我们先做这些样式，选择 文字工具 ，点击标题文字 ... 然后复制一下标题文字的颜色 ...
回到样式表，输入 #bottom h3{} ... 这个选择器的意思是 #bottom 这个 id 所在的元素下面的所有的 <h3> 标签 ...
#bottom h3{
font-size:18px;
color:#075442;
}
字号设置为 18px，文字的颜色设置为 #075442 ... 下面再给它添加个阴影效果 ...
text-shadow: 1px 1px 1px # ... text-shadow 是阴影效果 ，后面第一个值是阴影水平偏移的值，1px 表示向右偏移 1px，第二个值是阴影垂直偏移的值，1px 表示向下偏移 1px，第三个值是阴影的模糊值 ...
最后是阴影的颜色值 ... 回到网页设计图 ....
可以先放大标题这部分设计 ... 然后点击前景色 ... 再点击选择文字阴影的颜色 ... 复制一下这个颜色值 ....
回到样式表 .... 粘贴过来 ... 03AA82
再回到设计图看一下 ... 在底部标题的右边有一条带中显示的虚线 ... 完成这部分设计，我们用这个虚线作为标题标签的背景，并且让它居中显示。
不过这样文字的后面也会显示这个虚拟的背景 ... 解决这个问题，我们可以使用一组 <span> 标签包装一下标题里的文字 ...
然后给这组 <span> 标签添加跟底部边栏一样的背景图像，这个背景会盖住标题标签的虚线背景 ... 最后再给它添加一个右边的内边距 ... 这样可以给标题文字和虚线之间留出点空间。
先回到网页的代码模式 ... 找到底部边栏的标题 ...
给标题文字的周围添加一组 <span> 标签 ....
再打开网页的样式表 ... 先给标题标签添加虚线背景
background:url(images/dashed-h.png) repeat-x 0 50% ...
再给标题文字周围的 <span> 标签添加点样式 ... #bottom h1 span{} 这个选择器的意思是找到 #bottom 下面的 <h1> 标签里面的 <span> 标签 ...
background:url(images/emerald.png); 添加跟底部一样的背景图像 ...
padding-right:10px，添加一下 10px 的右边的内边距 ...
底部内容样式
再处理一下标题以外的内容 ... 先设置一下文字的颜色 ... 在 #bottom 这个选择器里 ... 输入 font-size:13px 设置字号为 13px， color: #fff ，设置文字的颜色为白色，另外文字还有个阴影的效果 ...
text-shadow: 1px 1px 1px # ... 回到设计图 ... 放大这块设计 ... 选择一下这个文字阴影的颜色 .... 复制一下颜色的值 ...
再回到样式表 ... 粘贴过来 ....
底部内容区块
在我们的设计里，底部内容区块之间会有一个垂直的虚线分隔 .... 先回到网页代码 ...
在内容的周围用一组 <div> 包装一下 ... 在上面定义一个类 ... class="dashed-v" ...
回到样式表 ... 输入 .dashed-v {background:url(images/dashed-v.png) repeat-y 100% 0; padding: 0 20px 20px 0}
整体效果
下面我们再复制两块底部的内容 ... 简单修改一下 ...
另外最后这个内容块的右边没有其它的内容了，所以，如果你愿意，可以去掉垂直虚线的背景 ...
现在页面底部边栏的设计就做好了。
