右边栏这里，我们可以先用一组 <aside> 标签 .... 然后在上面定义一个 id ， id="sidebar-right" ...

在这组标签是是右边栏上的不同部分的内容，每一部分内容都可以用一组 <section> 标签 ....

在它的里面是内容块的标题 ... 可以使用 <h3> 标签 ... 如果你愿意，也可以使用 <h1> 标签 ....

<h3>右边栏区块一</h3>

下面是区块里的内容 ... 先复制一小段文字 ...

<p>... </p>

右边栏标题的样式

下面我们来处理右边栏区块标题的样式... 先看一下我们的设计图 ...

标题的右边会居中显示一条灰色的线 ... 这个样式你可以像页面底部用到的技巧 ... 就是先作一个灰色线的背景图像，然后应用在标题标签上 ... 在给标题上的文字的周围添加一组 <span> 标签，为这个 <span> 标签添加白色的背景 ...

这里我们用一个新的技巧去处理这块儿设计 ...

回到网页的代码模式 ...

我们先在右边栏标题标签的周围添加一组 <div> 标签 ...

在上面定义一个类 ... class="title-line"

回到样式表 ...

我们先给 .title-line 添加一个下边的灰色连线 ...

.title-line{border-bottom:1px solid #E8E8E8}

再设置一下标题文字的字号 ... 再设置下行间距 ... line-height:1 ... 用 positon 属性，把位置设置为相对 ...

再输入 bottom:-13px ，这样会把 <h3> 元素向下拉 13 个像素 ...

用 background 属性设置一下背景 ... 背景颜色设置为白色 ...

因为 <h3> 标签是块级元素，所以应用的背景会盖住虚线 ...

我们可以使用 display 属性，把它变成行内元素 ... display:inline;

再添加一个右边的外边距 ...

最后我们在 .title-line 上面添加一个下边的外边距 ...

这样我们就完成了右边栏的设计 ....