下面根据我们的设计为内容块添加一些样式。
在我们设计里面作者头像是圆形的,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;}
现在我们的内容块的设计就做好了