html5文章页面,文章页面的设计《 HTML5 与 Bootstrap 应用实例 》

文章页面的设计跟主页差不多，页头，底部边栏，还有页脚都是一样的，不同是，页面的主内容区域分成两部分 ... 左边占用 8 个网格宽度，显示文章的内容，比如标题，正文，文章的评论等等 ... 右边的边栏占用 4 个网格的宽度 ...

我们可以直接复制一份之前创建的网页，然后再修改一下 ... 复制一份 ... 命名为 article.html .... 然后打开这个网页 ... 删掉网页里面的内容列表块的内容 ...

这个区域我们要可以分成两部分 ... 先输入一组

... 添加一个 .row 的类 ... 在这组

标签里，再输入两组

标签 ... 这两组

标签会分成两块显示在同一排 ...

第一组

标签上，添加一个 .span8 的类 ... 第二组

标签里，添加一个 .span4 的类 ...

把分页导航和面包屑也放在第一组

标签里 ... 然后在它们的上面，先输入文章的标题 ... 可以使用

标签 ...

内容的大标题

，在这个

标签上再定义一个类 .article-title 一会儿用这个类给文章的标题添加点样式 ...

footer

标题的下面是文章的发布日期，分类，标签，和评论链接这些内容 ... 这部分内容可以放在 标签里 ...

，在上面添加一个 .content-meta 类 ...

在它的里面分别是文章的发布日期 ... 使用 标签 ...

2013-01-10

然后是分类 ... 把它放在一组 标签里 ...

后院婚礼

后面是内容的标签 ... 同样把它放在一组 标签里 ... 如果需要，我们可以在这组 标签上定义 css 类，这样可以专门针对这个 css 类添加一些样式 ...

秋天

最后是文章评论的数量 ....

3

这里每一项内容的前面我们可以添加一个小图标 ... 打开 Bootstrap 项目的网站 ... 打开 Base CSS ... 点击 Icons ...

在这里你可以找几个合适的图标 ，使用对应的图标的类就可以在网页上添加对应的图标 ... 回到网页的代码模式下 ...

用 标签 ... 然后添加对应的图标类 ... 日期的图标是 icon-calendar ....

分类的前面添加一个 icon-book 图标 ... 标签前面添加一个 icon-tags 图标 ...

评论数量的前面添加一个 icon-comment 图标 ...

#content

在这部分内容的下面就是文章的内容... 先输入一组

标签 ... 然后定义一个 #content 的 id ...

这组

标签里包装的就是文章的正文 ...

先插入一张图片 ...

在图片下面，再添加点文字 ... (准备好文字内容 ... )

文章内容样式

下面给文章的内容添加点样式，打开网页的样式表 ... 输入一段注释 ...

然后输入 .article-title{} 给文章的标题添加一个下边的外边距 ...

#content{} 给文章的正文的上边和下面添加一个 20px 的外边距...

#content img{} 给文章正文里面图片，添加一个 5px 的下边的外边距 ...

这样文章的内容基本就处理好了，下面视频我们来看一下文章的评论 ...

/*

* 文章内容样式

*/

.article-title{

margin-bottom: 30px;

}

#content{

margin: 20px 0;

}

#content img{

margin-bottom: 5px;

}