设为首页收藏本站
天天打卡
切换到窄版

 找回密码
 立即注册
搜索
爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享»首页 › 其他交流 | 闲聊交流 › HTML/Xhtml › AmazeUI 评论列表的实现示例
返回列表 发新帖
查看: 97|回复: 9

AmazeUI 评论列表的实现示例

[复制链接]
9852672

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>

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

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


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


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

本帖子中包含更多资源

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

×
回复

使用道具 举报

游戏大妹子呀

4

主题

50

回帖

190

积分

注册会员

积分
190
发表于 2024-5-13 21:39:36 | 显示全部楼层
这个话题很有趣，我想多了解一些
回复 支持 反对

使用道具 举报

金达莱的盛放

2

主题

56

回帖

155

积分

注册会员

积分
155
发表于 2024-5-19 11:24:26 | 显示全部楼层
感谢分享，受益匪浅！
回复 支持 反对

使用道具 举报

孤獨爱戀

1

主题

40

回帖

102

积分

注册会员

积分
102
发表于 2024-7-11 17:03:56 | 显示全部楼层
同意！
回复 支持 反对

使用道具 举报

你是我的影子

1

主题

34

回帖

89

积分

注册会员

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

使用道具 举报

小玲珑ii

1

主题

36

回帖

96

积分

注册会员

积分
96
发表于 2024-8-6 13:36:12 | 显示全部楼层
这个话题很有趣，我想多了解一些
回复 支持 反对

使用道具 举报

努力坚持到底

0

主题

45

回帖

89

积分

注册会员

积分
89
发表于 2024-8-9 01:56:29 | 显示全部楼层
同意！
回复 支持 反对

使用道具 举报

励志曹克成
  • 打卡等级：无名新人
  • 打卡总天数：1
  • 打卡月天数：0
  • 打卡总奖励：29
  • 最近打卡：2024-04-26 21:43:10

2

主题

43

回帖

160

积分

注册会员

积分
160
发表于 2024-8-12 08:35:28 | 显示全部楼层
我完全同意你的观点
回复 支持 反对

使用道具 举报

小萌萌428

1

主题

58

回帖

137

积分

注册会员

积分
137
发表于 2024-9-22 21:57:49 | 显示全部楼层
已测试，非常不错
回复 支持 反对

使用道具 举报

青春不老999

4

主题

36

回帖

142

积分

注册会员

积分
142
发表于 2024-10-13 00:24:43 | 显示全部楼层
你的信息来源是？我想了解更多。
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-15 09:05 , Processed in 0.107004 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

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