下面根据我们的设计为内容块添加一些样式。

在我们设计里面作者头像是圆形的，Bootstrap 架构为图片准备了几个样式，打开 Bootstrap 项目网站，打开 Base CSS .... 然后点击 Images ...

这里有三种样式，圆角，圆形，还有带边框的样式，要使用圆形的样式，需要在 <img> 标签上添加一个 .img-circle 类 ...

回到网页的代码模式... 找到作者头像 ... 输入 class="img-circle" ...

再处理一下这个按钮组，我们可以让它靠右显示，Bootstrap 架构提供了一个 .pull-right 类 ，可以让元素靠右显示 ...

在按钮组的元素上，输入 pull-right ，在同一个元素上添加多个类，可以使用空格分隔不同的类名 ...

我们可以再修改一下按钮的大小，在每个按钮上面添加一个 .btn-mini ，这个类可以让按钮变小 ...

下面我们再给这块内容添加一个灰色的边框 ... .content-box 所在的元素包装了所有的内容，所以我们可以把这个灰色的边框的样式添加到这个类的上面。

打开网页的样式表 ... 先输入一段注释
/*
* 主内容的样式
*/

在它的下面输入 .content-box {} ，表示我们要为 .content-box 这个类添加样式，为这个类添加的样式会应用到所有使用这个类的元素上面 ...

border:1px solid #d7d7d7，这行样式会在元素的四周添加一条1像素的灰色实线 ...

在我们的设计里，最上边没有使用边线，所以在这行样式的下面，我们再添加一行样式去掉上边的边线 ...

border-top:none

然后在它的内部添加点内边距，这样 .content-box 的边线和里面的内容之间会有一个空间 ...

padding:10px

下面我们再修改一下内容块里的标题的样式。

.content-box h1{} ，这个样式选择器的意思是，找到 .content-box 这个类所在的元素包装的所有 <h1> 元素 ...

输入 font-size:15px ，把字号设置为 15px，line-height:30px，设置一下文字的行间距为 30px，再输入 margin-top:0，去掉上边的外边距 ...

最后我们再处理一下作者头像，发布日期和分类的样式。

在我们的设计里，作者头像的宽度是 32px ，发布日期和分类这些文字的颜色是一种灰色 ，并且他们之间都会有一个间隔...

回到网页的代码模式，在头像周围，添加一组 <span> 标签，同样用 <span> 标签，包装一下分类的文字 ...

在包装所有这些内容的 <footer> 标签上，我们再添加一个 .content-meta 的类 ...

再回到网页的样式表 ... 输入 .content-meta img{} ，表示找到 .content-meta 类所在元素包装的所有的 <img> 标签 ...

width:32px ，设置宽度为 32px ... 再定义一段样式，输入

.content-meta span,
.content-meta time{}

找到 .content-meta 类所在元素包装的所有的 <span> 标签和 <time> 标签 ...

margin-right:10px，添加一个10像素的外边距 ... 再设置下文字的颜色 ... color:# ，回到我们的设计，看一下这个地方的文字的颜色的值 ...

选择文字工具 .... 点击 文字 .... 然后点击文字颜色选择面板 ... 复制一下这个颜色的值 ...

回到网页样式表 ... 粘贴到 color 属性的后面 ...

最后我们再给主内容的上面和下面添加点外边距 ...

包装主内容的元素上，我们定义了一个叫 #main-content 的 id ，这里我们可以使用这个 id 作为样式的选择器 ...

#main-content{margin:20px 0;}

现在我们的内容块的设计就做好了