AmazeUI 面板的实现示例


Posted in HTML / CSS onAugust 17, 2020

本文主要介绍了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: 50px;">
<!--基本样式-->
<div class="am-panel am-panel-default">
 <div class="am-panel-bd">这是一个基本的面板组件。</div>
</div>
<!--带标题的面板-->
<div class="am-panel am-panel-default">
 <div class="am-panel-hd">面板标题</div>
 <div class="am-panel-bd">
  面板内容
 </div>
</div>
<section class="am-panel am-panel-default">
 <header class="am-panel-hd">
  <h3 class="am-panel-title">面板标题</h3>
 </header>
 <div class="am-panel-bd">
  面板内容
 </div>
</section>
<!--面板颜色-->
<div class="am-panel am-panel-primary">
 ...
</div>
<div class="am-panel am-panel-secondary">
 ...
</div>
<div class="am-panel am-panel-success">
 ...
</div>
<div class="am-panel am-panel-warning">
 ...
</div>
<div class="am-panel am-panel-danger">
 ...
</div>
<!--面板页脚-->
<section class="am-panel am-panel-default">
 <main class="am-panel-bd">
  面板内容
 </main>
 <footer class="am-panel-footer">面板页脚</footer>
</section>
<!--面板嵌套表格-->
<div class="am-panel am-panel-default">
 <div class="am-panel-hd">
  <h3 class="am-panel-title">面板标题</h3>
 </div>
 <div class="am-panel-bd">
  <p>这里是面板其他内容。</p>
 </div>
 <table class="am-table">
  ...
 </table>
 <div class="am-panel-footer">...</div>
</div>
<!--面板嵌套列表-->
<div class="am-panel am-panel-default">
 <div class="am-panel-hd">
  <h3 class="am-panel-title">面板标题</h3>
 </div>
 <div class="am-panel-bd">
  这里是面板其他内容。
 </div>
 <ul class="am-list am-list-static">
  <li>...</li>
 </ul>
 <div class="am-panel-footer">...</div>
</div>
<!--[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中一些@规则的用法小结
Mar 09 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 #HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 #HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 #HTML / CSS
AmazeUI导航的示例代码
Aug 14 #HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 #HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 #HTML / CSS
AmazeUI 图标的示例代码
Aug 13 #HTML / CSS
You might like
PHP新手上路(十一)
2006/10/09 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
页面使用密码保护代码
2013/04/10 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python中map的基本用法示例
2018/09/10 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
2015年采购员工作总结
2015/04/27 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers