设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 99|回复: 9

AmazeUI 评论列表的实现示例

[复制链接]

1

主题

42

回帖

109

积分

等待验证会员

积分
109
发表于 2024-4-20 10:30:31 | 显示全部楼层 |阅读模式
最近在学习AmazeUI框架,今天给大家分享的是AmazeUI 评论列表的实现示例,也给自己留个学习记录
  1. <!doctype html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="description" content="">
  7. <meta name="keywords" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>评论列表</title>
  10. <meta name="renderer" content="webkit">
  11. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  12. <link rel="icon" type="image/png" href="assets/i/favicon.png">
  13. <meta name="mobile-web-app-capable" content="yes">
  14. <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
  15. <meta name="apple-mobile-web-app-capable" content="yes">
  16. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  17. <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  18. <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  19. <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  20. <meta name="msapplication-TileColor" content="#0e90d2">
  21. <link rel="stylesheet" href="assets/css/amazeui.min.css">
  22. </head>
  23. <body style="margin: 10px;">
  24. <!--基本结构-->
  25. <article class="am-comment"> <!-- 评论容器 -->
  26. <a href="">
  27.   <img class="am-comment-avatar" alt="" src="img/100.jpg" /> <!-- 评论者头像 -->
  28. </a>
  29. <div class="am-comment-main"> <!-- 评论内容容器 -->
  30.   <header class="am-comment-hd">
  31.    <!--<h3 class="am-comment-title">评论标题</h3>-->
  32.    <div class="am-comment-meta"> <!-- 评论元数据 -->
  33.     <a href="#link-to-user" class="am-comment-author">chaoyi</a> <!-- 评论者 -->
  34.     评论于 <time datetime="">2016-02-17</time>
  35.    </div>
  36.   </header>
  37.   <div class="am-comment-bd">阅谁问君诵,水落清香浮。</div> <!-- 评论内容 -->
  38. </div>
  39. </article><br>
  40. <!--单条评论-->
  41. <article class="am-comment">
  42. <a href="#link-to-user-home">
  43.   <img src="img/100.jpg" alt="" class="am-comment-avatar" width="48" height="48"/>
  44. </a>
  45. <div class="am-comment-main">
  46.   <header class="am-comment-hd">
  47.    <!--<h3 class="am-comment-title">评论标题</h3>-->
  48.    <div class="am-comment-meta">
  49.     <a href="#link-to-user" class="am-comment-author">chaoyi</a>
  50.     评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
  51.    </div>
  52.   </header>
  53.   <div class="am-comment-bd">
  54.    阅谁问君诵,水落清香浮。
  55.   </div>
  56. </div>
  57. </article>
  58. <!--评论列表-->
  59. <ul class="am-comments-list am-comments-list-flip">
  60. <li class="am-comment">
  61.   <a href="#link-to-user-home">
  62.    <img src="img/100.jpg" alt="" class="am-comment-avatar" width="48" height="48"/>
  63.   </a>
  64.   <div class="am-comment-main">
  65.    <header class="am-comment-hd">
  66.     <!--<h3 class="am-comment-title">评论标题</h3>-->
  67.     <div class="am-comment-meta">
  68.      <a href="#link-to-user" class="am-comment-author">chaoyi</a>
  69.      评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
  70.     </div>
  71.    </header>
  72.    <div class="am-comment-bd">
  73.     阅谁问君诵,水落清香浮。
  74.    </div>
  75.   </div>

  76. </li>
  77. <li class="am-comment am-comment-flip">
  78.   <a href="#link-to-user-home">
  79.    <img src="img/100.jpg" alt="" class="am-comment-avatar" width="48" height="48"/>
  80.   </a>
  81.   <div class="am-comment-main">
  82.    <header class="am-comment-hd">
  83.     <!--<h3 class="am-comment-title">评论标题</h3>-->
  84.     <div class="am-comment-meta">
  85.      <a href="#link-to-user" class="am-comment-author">chaoyi</a>
  86.      评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
  87.     </div>
  88.    </header>
  89.    <div class="am-comment-bd">
  90.     阅谁问君诵,水落清香浮。
  91.    </div>
  92.   </div>

  93. </li>
  94. <li class="am-comment am-comment-highlight">
  95.   <a href="#link-to-user-home">
  96.    <img src="img/100.jpg" alt="" class="am-comment-avatar" width="48" height="48"/>
  97.   </a>
  98.   <div class="am-comment-main">
  99.    <header class="am-comment-hd">
  100.     <!--<h3 class="am-comment-title">评论标题</h3>-->
  101.     <div class="am-comment-meta">
  102.      <a href="#link-to-user" class="am-comment-author">chaoyi</a>
  103.      评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
  104.     </div>
  105.    </header>
  106.    <div class="am-comment-bd">
  107.     阅谁问君诵,水落清香浮。
  108.    </div>
  109.   </div>
  110. </li>
  111. </ul>
  112. <!--评论内容左右对齐-->
  113. <article class="am-comment am-comment-flip">
  114. <a href="#link-to-user-home">
  115.   <img src="img/100.jpg" alt="" class="am-comment-avatar" width="48" height="48"/>
  116. </a>
  117. <div class="am-comment-main">
  118.   <header class="am-comment-hd">
  119.    <!--<h3 class="am-comment-title">评论标题</h3>-->
  120.    <div class="am-comment-meta">
  121.     <a href="#link-to-user" class="am-comment-author">chaoyi</a>
  122.     评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
  123.    </div>
  124.   </header>
  125.   <div class="am-comment-bd">
  126.    阅谁问君诵,水落清香浮。
  127.   </div>
  128. </div>
  129. </article>
  130. <article class="am-comment am-comment-flip am-comment-highlight">
  131. <a href="#link-to-user-home">
  132.   <img src="img/100.jpg" alt="" class="am-comment-avatar" width="48" height="48"/>
  133. </a>
  134. <div class="am-comment-main">
  135.   <header class="am-comment-hd">
  136.    <!--<h3 class="am-comment-title">评论标题</h3>-->
  137.    <div class="am-comment-meta">
  138.     <a href="#link-to-user" class="am-comment-author">chaoyi</a>
  139.     评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
  140.    </div>
  141.   </header>
  142.   <div class="am-comment-bd">
  143.    阅谁问君诵,水落清香浮。
  144.   </div>
  145. </div>
  146. </article>
  147. <!--[if (gte IE 9)|!(IE)]><!-->
  148. <script src="assets/js/jquery.min.js"></script>
  149. <!--<![endif]-->
  150. <!--[if lte IE 8 ]>
  151. <script src="assets/ie8/jquery.min.js"></script>
  152. <script src="assets/ie8/modernizr.js"></script>
  153. <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
  154. <![endif]-->
  155. <script src="assets/js/amazeui.min.js"></script>
  156. </body>
  157. </html>
复制代码
效果图:


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


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

4

主题

54

回帖

198

积分

注册会员

积分
198
发表于 2024-5-13 21:39:36 | 显示全部楼层
这个话题很有趣,我想多了解一些

2

主题

62

回帖

167

积分

注册会员

积分
167
发表于 2024-5-19 11:24:26 | 显示全部楼层
感谢分享,受益匪浅!

1

主题

42

回帖

106

积分

注册会员

积分
106
发表于 2024-7-11 17:03:56 | 显示全部楼层
同意!

1

主题

40

回帖

101

积分

注册会员

积分
101
发表于 2024-7-14 11:30:00 | 显示全部楼层
保持尊重和礼貌对待其他成员是必要的。

1

主题

40

回帖

104

积分

注册会员

积分
104
发表于 2024-8-6 13:36:12 | 显示全部楼层
这个话题很有趣,我想多了解一些

0

主题

49

回帖

97

积分

注册会员

积分
97
发表于 2024-8-9 01:56:29 | 显示全部楼层
同意!
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:29
  • 最近打卡:2024-04-26 21:43:10

2

主题

47

回帖

168

积分

注册会员

积分
168
发表于 2024-8-12 08:35:28 | 显示全部楼层
我完全同意你的观点

1

主题

64

回帖

149

积分

注册会员

积分
149
发表于 2024-9-22 21:57:49 | 显示全部楼层
已测试,非常不错

4

主题

38

回帖

146

积分

注册会员

积分
146
发表于 2024-10-13 00:24:43 | 显示全部楼层
你的信息来源是?我想了解更多。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-24 10:30 , Processed in 0.160555 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表