文章展示页设计

四、文章展示页设计

跨媒体平台中存储的一个重要内容就是文章。检索到文章后，读者最终会点击阅读该文章。

1.导航栏的设计

由于导航栏左上方要放返回按钮，所以把Logo放在了右边，如图6-25所示。

图6-25　文章导航栏设计

返回图标在移动端与左边的距离需要调整一下。与PC端的视觉感受不一样，所以要分别给定样式。

返回按钮通过JavaScript的一个语句，实现返回的效果。

2. 正文部分

(https://www.daowen.com)

文章一般有标题（title）、作者名（author）、关键字（keyword）等要素，我们为它们分别设计了各自的样式。

分别给定的样式如下：

正文内容放在了一个well容器内，我们为文章内容稍做设计，补充了一些样式。

text-indent是首行缩进2个字，line-height是行高1.8个字高。

网页排版结果如图6-26所示。

图6-26　文章正文排版结果

如果文章内有图片，为了让图片排版美观，我们还是用row、col的组合来让图片具有响应式功能。