<!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/[email protected]"> <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/[email protected]"> <meta name="msapplication-TileImage" content="assets/i/[email protected]"> <meta name="msapplication-TileColor" content="#0e90d2"> <link rel="stylesheet" href="assets/css/amazeui.min.css"> </head> <body> <!--.am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。--> <div class="am-scrollable-horizontal"> <table class="am-table am-table-bordered am-table-striped am-text-nowrap"> <thead> <tr> <th>-= 表格标题 =-</th> <th>-= 表格标题 =-</th> <th>-= 表格标题 =-</th> <th>-= 表格标题 =-</th> </tr> </thead> <tbody> <tr> <td>表格数据</td> <td>表格数据</td> <td>表格数据</td> <td>表格数据</td> </tr> <tr> <td>表格数据</td> <td>表格数据</td> <td>表格数据</td> <td>表格数据</td> </tr> <tr> <td>表格数据</td> <td>表格数据</td> <td>表格数据</td> <td>表格数据</td> </tr> </tbody> </table> </div> <!--.am-scrollable-vertical 内容超过设置的高度以后显示滚动条，默认设置的高度为 240px。--> <!-- 浮动相关 .am-cf - 清除浮动 .am-nbfc - 使用 overflow: hidden; 创建新的 BFC 清除浮动 .am-fl - 左浮动 .am-fr - 右浮动 .am-center - 水平居中 --> <div class="am-cf"> <button class="am-btn am-btn-success am-fl">向左浮动</button> <button class="am-btn am-btn-success am-fr">向右浮动</button> </div> <!--元素显示与隐藏 .am-block - display 设置为 block .am-inline - display 设置为 inline .am-inline-block - display 设置为 inline-block .am-hide 设置为隐藏 --> <button class="am-btn am-btn-danger am-hide">I'm hidden.....</button> <!--字体--> <p>阅谁问君诵，水落清香浮</p> <p class="am-serif">阅谁问君诵，水落清香浮</p> <p class="am-kai">阅谁问君诵，水落清香浮</p> <p class="am-monospace">阅谁问君诵，水落清香浮</p> <!--文本颜色--> <p>阅谁问君诵，水落清香浮</p> <p class="am-text-primary">阅谁问君诵，水落清香浮</p> <p class="am-text-secondary">阅谁问君诵，水落清香浮</p> <p class="am-text-success">阅谁问君诵，水落清香浮</p> <p class="am-text-warning">阅谁问君诵，水落清香浮</p> <p class="am-text-danger">阅谁问君诵，水落清香浮</p> <!--链接颜色减淡--> <a href="" class="am-link-muted">阅谁问君诵，水落清香浮</a> <h3 class="am-link-muted"><a href="">阅谁问君诵，水落清香浮</a></h3> <ul class="am-link-muted"> <li><a href="">阅谁问君诵，水落清香浮</a></li> </ul> <!-- 文字大小 am-text-xs - 12px am-text-sm - 14px am-text-default - 16px am-text-lg - 18px am-text-xl - 24px am-text-xxl - 32px am-text-xxxl - 42px --> <p class="am-text-xs">阅谁问君诵，水落清香浮</p> <p class="am-text-sm">阅谁问君诵，水落清香浮</p> <p class="am-text-default">阅谁问君诵，水落清香浮</p> <p class="am-text-lg">阅谁问君诵，水落清香浮</p> <p class="am-text-xl">阅谁问君诵，水落清香浮</p> <p class="am-text-xxl">阅谁问君诵，水落清香浮</p> <p class="am-text-xxxl">阅谁问君诵，水落清香浮</p> <!-- 单行文字截断 .am-text-truncate { word-wrap: normal; /* for IE */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } --> <!-- 超出 200px 的文字将会被截断 --> <div class="am-text-truncate" style="width: 250px; padding: 10px;">阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮</div> <!-- 多行文字截断 .line-clamp { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; // 这里修改为要显示的行数 -webkit-box-orient: vertical; } --> <!--视口大小--> <ul> <li class="am-show-sm-only">仅 small 可见</li> <li class="am-show-md-up">medium + 可见</li> <li class="am-show-md-only">仅 medium 可见</li> <li class="am-show-lg-up">large 可见</li> <li class="am-show-lg-only">仅 large 可见</li> </ul> <!--屏幕方向--> <ul> <li class="am-show-landscape">横屏可见...</li> <li class="am-show-portrait">竖屏可见...</li> </ul> <p></p><p></p><p></p> <!--[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>
效果图：