时间轴式的效果在众多网页前端上都有呈现,运用得当会给人眼前一亮的感觉。
如果把它使用在我们网站的评论列表上更是恰到好处,老外称之为 Timeline-Style Comments
,使用一种洁净并且简单的技巧来展示时间轴类型的评论留言方式,左侧显示头像,右侧显示评论,不需要使用任何的JavaScript脚本
或者是插件库工具
,纯CSS样式展示,评论内容带有一个小箭头,并且评论内容显示区域做圆角处理,使用最先进的HTML5技术编写网页代码标签。
先来看看效果 - 演示地址
HTML结构
<section class="comments"> <article class="comment"> <a class="comment-img" href="#non"> <img src="//lorempixum.com/50/50/people/1" alt="" width="50" height="50"> </a> <div class="comment-body"> <div class="text"> <p>Hello, this is an example comment</p> </div> <p class="attribution">by <a href="#non">Joe Bloggs</a> at 14:23pm, 4th Dec 2010</p> </div> </article> <article class="comment"> <a class="comment-img" href="#non"> <img src="//lorempixum.com/50/50/people/7" alt="" width="50" height="50"> </a> <div class="comment-body"> <div class="text"> <p>This is a much longer one that will go on for a few lines.</p> <p>It has multiple paragraphs and is full of waffle to pad out the comment. Usually, you just wish these sorts of comments would come to an end.</p> </div> <p class="attribution">by <a href="#non">Joe Bloggs</a> at 14:23pm, 4th Dec 2010</p> </div> </article> </section>
CSS代码
首先为了兼容某些浏览器不支持HTML5标签的情况,需要将HTML5中新添加的标签设置 display: block;属性
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
设置网页BODY默认的字体和样式
body { width: 500px; margin: 20px auto; font: 16px/1.4 Arial, sans-serif; background: #f3eee9; }
设置评论区的主题样式
.comment { overflow: hidden; padding: 0 0 1em; border-bottom: 1px solid #ddd; margin: 0 0 1em; *zoom: 1; }
之后设置缩略图的样式
.comment-img { float: left; margin-right: 33px; border-radius: 5px; overflow: hidden; } .comment-img img { display: block; }
再设置文字样式
.comment .text { padding: 10px; border: 1px solid #e5e5e5; border-radius: 5px; background: #fff; } .comment .text p:last-child { margin: 0; }
最后给评论内容添加一个三角形的箭头
.comment .text:before { top: 18px; left: 78px; width: 9px; height: 9px; border-width: 0 0 1px 1px; border-style: solid; border-color: #e5e5e5; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
基本样式就是如此,赶快给自己的网站整上吧。
本文出处:http://www.uedsc.com/timeline-style-comments.html
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4624.html