amazeui学习笔记--css(常用组件5)--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment
一、总结
1、am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article也是div来的
2、comment基本结构如下:
1 <article class="am-comment"> <!-- 评论容器 --> 2 <a href=""> 3 <img class="am-comment-avatar" alt=""/> <!-- 评论者头像 --> 4 </a> 5 6 <div class="am-comment-main"> <!-- 评论内容容器 --> 7 <header class="am-comment-hd"> 8 <!--<h3 class="am-comment-title">评论标题</h3>--> 9 <div class="am-comment-meta"> <!-- 评论元数据 --> 10 <a href="#link-to-user" class="am-comment-author">..</a> <!-- 评论者 --> 11 评论于 <time datetime="">...</time> 12 </div> 13 </header> 14 15 <div class="am-comment-bd">...</div> <!-- 评论内容 --> 16 </div> 17 </article>
3、评论列表:还是ul包着li的形式,<ul class="am-comments-list am-comments-list-flip">各种包含am-comment的li标签</ul>
使用 .am-comments-list
包裹多个 .am-comment
即成评论列表。
给<ul>
元素添加.am-comment-list
类来创建一个评论列表。
4、 评论内容左右对齐:在评论列表 .am-comments-list
上增加 .am-comments-list-flip
class,可以使左右交错的评论列表内容左右对齐(在 medium-up
区间有效)。
5、 评论状态(颜色):
.am-comment-flip
在右边显示头像(原来头像在左边).am-comment-primary
高亮评论(边框为主色).am-comment-highlight
/.am-comment-highlight
高亮评论(边框为次色).am-comment-success
高亮评论(边框为绿色).am-comment-warning
高亮评论(边框为橙色).am-comment-danger
高亮评论(边框为红色)
二、评论列表Comment
Comment 评论组件
目录
- 使用演示
- 单条评论
- 评论列表
- 评论内容左右对齐
- 评论状态
评论组件由用户头像、评论元信息、评论内容组成(有点似曾相识?没错,很像 Github 的评论列表)。
基本结构如下:
<article class="am-comment"> <!-- 评论容器 --> <a href=""> <img class="am-comment-avatar" alt=""/> <!-- 评论者头像 --> </a> <div class="am-comment-main"> <!-- 评论内容容器 --> <header class="am-comment-hd"> <!--<h3 class="am-comment-title">评论标题</h3>--> <div class="am-comment-meta"> <!-- 评论元数据 --> <a href="#link-to-user" class="am-comment-author">..</a> <!-- 评论者 --> 评论于 <time datetime="">...</time> </div> </header> <div class="am-comment-bd">...</div> <!-- 评论内容 --> </div> </article>
其中 .am-comment-title
在使用中并不常见。
使用演示
单条评论
那,那是一封写给南部母亲的信。我茫然站在骑楼下,我又看到永远的樱子走到街心。其实雨下得并不大,却是一生一世中最大的一场雨。而那封信是这样写的,年轻的樱子知不知道呢?
妈:我打算在下个月和樱子结婚。
<article class="am-comment"><a href="#link-to-user-home"> <img src="" alt="" class="am-comment-avatar" width="48" height="48"/> </a> <div class="am-comment-main"> <header class="am-comment-hd"> <!--<h3 class="am-comment-title">评论标题</h3>--> <div class="am-comment-meta"> <a href="#link-to-user" class="am-comment-author">某人</a> 评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time> </div> </header> <div class="am-comment-bd"> ... </div> </div> </article>
评论列表
使用 .am-comments-list
包裹多个 .am-comment
即成评论列表。
给<ul>
元素添加.am-comment-list
类来创建一个评论列表。
-
某人 评论于 2014-7-12 15:30
那,那是一封写给南部母亲的信。我茫然站在骑楼下,我又看到永远的樱子走到街心。其实雨下得并不大,却是一生一世中最大的一场雨。而那封信是这样写的,年轻的樱子知不知道呢?
妈:我打算在下个月和樱子结婚。
-
路人甲 评论于 2014-7-13 0:03
She's gone 我早知道
她将要 从我的生命中走掉
不再停留多一秒 -
路人乙 评论于 2014-7-14 23:30
@某人 撸主保重!
-
某人 评论于 2014-7-14 23:301
@路人乙 朕知道了!
-
路人乙 评论于 2014-7-14 23:32
@某人 艹民告退!
-
某人 评论于 2014-7-14 23:301
@路人乙 滚!
-
路人乙 评论于 2014-7-14 23:32
@某人 你妹!
-
某人 评论于 2014-7-14 23:301
@路人乙 你妹你妹!
<ul class="am-comments-list am-comments-list-flip"><li class="am-comment"> ... </li> <li class="am-comment"> ... </li> ... <li class="am-comment am-comment-flip"></li> <li class="am-comment am-comment-highlight"></li> </ul>
评论内容左右对齐
在评论列表 .am-comments-list
上增加 .am-comments-list-flip
class,可以使左右交错的评论列表内容左右对齐(在 medium-up
区间有效)。
谢谢大家的建议。并非所有使用场景都使用左右交错的列表,所以加了单独的 class,供用户选择。
评论状态
在容器上添加评论状态 class(演示见上面列表里的最后几条)。
.am-comment-flip
在右边显示头像.am-comment-primary
高亮评论(边框为主色).am-comment-highlight
/.am-comment-highlight
高亮评论(边框为次色).am-comment-success
高亮评论(边框为绿色).am-comment-warning
高亮评论(边框为橙色).am-comment-danger
高亮评论(边框为红色)
<article class="am-comment am-comment-flip">...
</article> <article class="am-comment am-comment-flip"> ... </article> <article class="am-comment am-comment-flip am-comment-highlight"> ... </article>
amazeui学习笔记--css(常用组件5)--评论列表Comment相关推荐
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css(常用组件4)--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- amazeui学习笔记--css(常用组件1)--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
最新文章
- 【树莓派 Raspberry-Pi 】系统安装及一些必要的配置
- Python第五课(字典)
- centos 7 防火墙和端口配置
- 简述用UCenter整合第三方应用程序
- 店铺咨询系统c语言,课内资源
- 如何判断模糊图像_深圳企业宣传片拍摄制作教你如何使用手动聚焦
- linux docker状态,Linux之Docker
- python快速示例_python实现快速排序的示例(二分法思想)
- ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览
- 1534 棋子游戏(博弈论)
- java SE复习笔记54
- 找规律万能公式_求各种数学万能公式求一些万能公式,帮助各个喜欢数学的同学,求解方程、列方程、求根、列规律式等等,最好有较详细的用法和解释....
- iOS生成推送push证书,push.p12文件
- cs224w(图机器学习)2021冬季课程学习笔记8 Colab 2
- python一切皆对象 对象都有类_Python小世界:彻底搞懂Python一切皆对象!!!
- OpenGL | 放置摄像机gluLookAt函数
- autocad2014点击保存闪退_AutoCAD2014闪退的原因和解决方法 一打开就闪退怎么办
- Android开发--文件系统中的内部存储和外部存储最全解析 附文件数据保存操作封装
- springcloud五大神兽之Eureka介绍
- Ubuntu新旧版本下载地址
热门文章
- 成绩转换(百分制到五级制的转换)-(只作新手参考)
- html width设置没用,html style的width不起作用
- 计算机表演赛vr创意大赛,计算机表演赛新增VR创意大赛
- 无线文件服务器,文件共享新方法 无线网络文件共享设置
- w ndows2000,华塑CAE软件简介
- ubuntu 13.04 mysql_Ubuntu 13.04 MySQL Proxy安装与配置
- java会被rust替代吗_Rust 未来会成为主流的编程语言吗?
- python坐标定位_Python_元素定位浏览器坐标定位
- layui引用html显示404错误,如何解决layui报错问题
- 《天天数学》连载42:二月十一日