AmazeUI 评论列表的实现示例


Posted in HTML / CSS onAugust 13, 2020

最近在学习AmazeUI框架,今天给大家分享的是AmazeUI 评论列表的实现示例,也给自己留个学习记录

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>评论列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 10px;">
<!--基本结构-->
<article class="am-comment"> <!-- 评论容器 -->
 <a href="">
  <img class="am-comment-avatar" alt="" src="img/100.jpg" /> <!-- 评论者头像 -->
 </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">chaoyi</a> <!-- 评论者 -->
    评论于 <time datetime="">2016-02-17</time>
   </div>
  </header>
  <div class="am-comment-bd">阅谁问君诵,水落清香浮。</div> <!-- 评论内容 -->
 </div>
</article><br>
<!--单条评论-->
<article class="am-comment">
 <a href="#link-to-user-home">
  <img src="img/100.jpg" 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">chaoyi</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>
<!--评论列表-->
<ul class="am-comments-list am-comments-list-flip">
 <li class="am-comment">
  <a href="#link-to-user-home">
   <img src="img/100.jpg" 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">chaoyi</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>

 </li>
 <li class="am-comment am-comment-flip">
  <a href="#link-to-user-home">
   <img src="img/100.jpg" 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">chaoyi</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>

 </li>
 <li class="am-comment am-comment-highlight">
  <a href="#link-to-user-home">
   <img src="img/100.jpg" 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">chaoyi</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>
 </li>
</ul>
<!--评论内容左右对齐-->
<article class="am-comment am-comment-flip">
 <a href="#link-to-user-home">
  <img src="img/100.jpg" 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">chaoyi</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>
<article class="am-comment am-comment-flip am-comment-highlight">
 <a href="#link-to-user-home">
  <img src="img/100.jpg" 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">chaoyi</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>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

效果图:

AmazeUI 评论列表的实现示例
 

到此这篇关于AmazeUI 评论列表的实现示例的文章就介绍到这了,更多相关AmazeUI 评论列表内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 #HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 #HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 #HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 #HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 #HTML / CSS
在html页面中取得session中的值的方法
Aug 11 #HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 #HTML / CSS
You might like
eAccelerator的安装与使用详解
2013/06/13 PHP
解析PHP的session过期设置
2013/06/29 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
js密码强度校验
2015/11/10 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
优秀毕业自我鉴定
2014/02/15 职场文书
物流管理专业求职信
2014/05/29 职场文书
老龄工作先进事迹
2014/08/15 职场文书
材料员岗位职责范本
2015/04/11 职场文书
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS