<!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>
效果图：
相关推荐
1. **博客模板**：Amaze UI 提供了一套适用于博客的设计模板，这通常包括文章列表、文章详情页、评论区等元素。这种模板通常具有良好的可读性和易用性，同时保持简洁的布局，以便用户能快速获取信息。 2. **个人...
8. **blog.html**: 这是博客模板，AmazeUI提供了文章列表、文章详情等布局模版，以及评论、分享等社交功能，适合构建内容丰富的博客系统。 9. **non-responsive.html**: 非响应式设计的示例，虽然AmazeUI主打移动...
最近在学习AmazeUI框架，今天给大家分享的是AmazeUI 评论列表的实现示例，也给自己留个学习记录 <!doctype html> <html class=no-js> <head> <meta charset=utf-8> <meta ...
7. **blog.html**: 这个文件可能是博客模板的示例，展示了如何利用AmazeUI构建一个具有评论、分类、文章列表等功能的博客页面。 8. **admin-user.html**: 用户管理页面，可能包含了用户资料展示、编辑、权限分配等...
AmazeUI的媒体列表适用于展示带有图片的用户评论、博客文章摘要等。通过`<div class="am-media">`包裹内容，可以轻松创建具有左对齐或右对齐媒体对象的媒体列表。 3. **栅格列表（Grid List）**：栅格列表利用Amaze...
`blog.html`是一个标准的博客页面示例，展示如何使用AmazeUI创建一个有吸引力的博客布局，包括文章列表、评论区等。`non-responsive.html`文件名表明这可能是一个未启用响应式设计的页面，用于对比和理解AmazeUI响应...
这个"AMAZEUI Demo"提供了实例化的应用展示，适合初学者进行学习和探索。请注意，这个Demo并不是整个AMAZEUI项目的完整源码，而是部分功能的示例。 AMAZEUI的主要特点包括响应式布局、移动优化、丰富的组件库和简洁...
1. **博客页面**：Amaze UI 可用于构建简洁、高效的博客系统，展示文章列表、单篇文章详情等，同时支持评论、分类和标签等功能。 2. **个人主页**：个人主页可能包含了用户简介、作品展示、联系方式等模块，Amaze ...
（总19个页面）amazeui商城后台模板，销售订单管理后台模板html — 会员列表.html — 信息通知.html — 商品分类.html — 商品列表.html — 库存管理.html — 添加新商品.html — 用户评论.html — 系统设置.html —...
5. `admin-log.html`：这可能是日志查看或管理的页面，AmazeUI的表格和列表组件在此类场景下尤为适用，可以清晰地呈现日志信息。 6. `admin-gallery.html`：画廊组件常用于图片展示，AmazeUI提供了响应式的图片网格...
前端部分，AmazeUI的组件被用于构建用户界面，例如文章列表、文章详情、评论区等。 总的来说，这个项目提供了一个学习和实践Golang Web开发、MongoDB数据库使用以及前端响应式设计的实例。通过深入研究和理解这个...
该资源是一个科技自媒体数码评测的响应式网站模板，采用了Amaze UI框架，设计风格以橙色为主色调，并且包含幻灯展示功能。这个模板适用于创建科技新闻、自媒体、数码产品评测等类型的网站，同时它是一个整站解决方案...
AmazeUI框架包含了丰富的CSS、JavaScript组件，如按钮、表单、网格、布局、图标等，这些组件在模板中被广泛使用，旨在帮助开发者快速搭建后台管理系统。OA系统（Office Automation System）通常指的是企业内部用于...
3. `blog.html`: 代表了一个博客页面的模板，可能包含文章列表、分页和评论等功能，展示如何在Amaze UI中实现博客系统的设计。 4. `sidebar.html`: 侧边栏在许多网站中都很常见，用于放置导航、广告或者相关文章列表...
3. **Amaze UI框架**: 使用Amaze UI提供的CSS样式和JavaScript组件，快速构建界面，减少开发时间。 4. **移动优先**: 遵循移动优先的设计原则，先考虑小屏幕用户体验，再扩展到大屏幕。 5. **新闻展示**: 设计有专门...