内容列表块的设计

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们开始实施页面主体内容的设计,这部分内容可以分成三块,一块是内容块的列表,然后是一个分页导航,最后是一个导航路径。

我们先做这个内容块的列表,内容块上面由几部分组成,最上面灰色部分代表是一张图片 ... 下面是一个带灰色线的盒子,里面放着内容的标题,绿色的圆圈是作者的头像,然后是发布的日期,内容的分类,最后还有一组按钮,一个按钮可以显示内容的摘要,另一个是内容的评论的链接。

我们可以把图像单独放在一组 <div> 标签里,它下面这些内容单独放一组 <div> 标签里。

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

在网页导航部分的下面,我们可以做网页的主体内容部分 ...

先输入一组 <div> 标签 ... 然后在上面定义一个 id ,输入 id="main-content" ,这样我们可以使用 main-content 这个 id 为这部分内容应用一些样式 ...

在这组 <div> 标签里,再添加一组 <div> 标签 ... 在上面添加一个 .container 的类 ...

下面我们先实施内容块的设计,我们可以在 Bootstrap 里找到一个合适这部分内容的组件 ... 打开 Bootstrap 项目的网站, http://twitter.github.com/bootstrap/ ,在 Components ,组件里 ... 点击 Thumbnails 缩略图 ...

这个组件比较适合我们的内容块的设计,浏览到这个小组件的代码的演示 ...

你会看到,在大容器的上面要应用一个 .thumbnails 类,然后每个项目上面使用一个布局的网格类,内容上面可以添加一个 .thumbnail ,这个类可以在内容的周围添加一个边框,在我们的设计里并不需要这个边框... 所以可以不添加这个类 ...

回到代码模式 ...

先输入一组 <div> 标签 ... 然后在上面添加一个 .thumbnails 类 ...

每个内容块我们可以添加一组 <article> 标签包装 ... 每个内容块占页面宽度的一半,所以在上面我们添加一个 .span6 的类。

每个内容块的里面分成两大块,上面是图片,下面是一些文字, 下面我们创建两组 <div> 标签分别包装这两块内容 ...

<div></div>
<div></div>

在第一组 <div> 标签上,我们定义一个类, class="media-box" ... 在第二组 <div> 标签上也定义一个类 ... class="content-box"

一会儿我们要用这两个类做为样式的选择器,为这两块内容添加一些自定义的样式。

内容列表块的设计《 HTML5 与 Bootstrap 应用实例 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点