这篇文章主要介绍了阿马泽伊面板的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文主要介绍了阿马泽伊面板的实现示例,分享给大家,具体如下:

!声明文档类型

html class=’no-js ‘

meta charset=’utf-8 ‘

meta http-equiv=’ X-UA-Compatible ‘ content=’ IE=edge ‘

元名称=’描述’内容=’ ‘

meta name=’keywords’ content=’ ‘

meta name=’ viewport ‘ content=’ width=device-width,initial-scale=1 ‘

标题面板/标题

meta name=’ renderer ‘ content=’ WebKit ‘

meta http-equiv=’ Cache-Control ‘ content=’ no-site app ‘/

link rel=’ icon ‘ type=’ image/png ‘ href=’ assets/I/favicon。巴布亚新几内亚

元名称=’支持移动网络应用内容=’是’

link rel=’ icon ‘ size=’ 192 x192 ‘ href=’ assets/I/app-icon 72 x72 @ 2x。巴布亚新几内亚

meta name=’ apple-mobile-we b-app-capable ‘ content=’ yes ‘

meta name=’ apple-mobile-we B- app-状态栏-style ‘ content=’ black ‘

meta name=’ apple-mobile-we B- app-title ‘ content=’ Amaze UI ‘/

link rel=’ apple-touch-icon-pre composed ‘ href=’ assets/I/app-icon 72 x 72 @ 2x。巴布亚新几内亚

meta name=’ ms application-tile image ‘ content=’ assets/I/app-icon 72 x72 @ 2x。巴布亚新几内亚

meta name=’ ms应用程序-磁贴颜色’ content=’ # 0e 90d 2 ‘

link rel=’样式表’ href=’ assets/CSS/amaze ui。量滴’ CSS ‘

/头

body style=’ margin:50px;’

!-基本样式-

‘ am-panel am-panel-默认’

div class=’am-panel-bd ‘这是一个基本的面板组件100/格

/div

!-带标题的面板-

‘ am-panel am-panel-默认’

div class=’am-panel-hd ‘面板标题/div

div class=’am-panel-bd ‘

面板内容

/div

/div

‘ am-panel am-panel-默认’

header class=’am-panel-hd ‘

h3 class=’am-panel-title ‘面板标题/h3

/页眉

div class=’am-panel-bd ‘

面板内容

/div

/部分

!-面板颜色-

div class=’ am-panel am-panel-primary ‘

.

/div

div class=’ am-panel am-panel-secondary ‘

.

/div

am-panel am-panel-success ‘

.

/div

am-panel am-panel-warning ‘

.

/div

div class=” am-panel am-panel-danger ”

.

/div

!-面板页脚-

‘ am-panel am-panel-默认’

主屏幕=’am-panel-bd ‘

面板内容

/main

页脚’ am-panel-footer ‘面板页脚/页脚

/部分

!-面板嵌套表格-

‘ am-panel am-panel-默认’

div class=’am-panel-hd ‘

h3 class=’am-panel-title ‘面板标题/h3

/div

div class=’am-panel-bd ‘

p这里是面板其他内容100元/人

/div

table class=’am-table ‘

.

/表格

‘ am-面板-页脚’./div

/div

!-面板嵌套列表-

‘ am-panel am-panel-默认’

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 ‘

里./李

/ul

‘ am-面板-页脚’./div

/div

!- [if (gte IE 9)|!(IE)]!-

脚本src=’ assets/js/jquery。量滴js ‘/脚本

!- ![endif] –

!-[如果lte IE 8 ]

脚本src=’ assets/ie8/jquery。量滴js ‘/脚本

script src=’ assets/ie8/modernizr。js ‘/脚本

脚本src=’ assets/js/amaze ui。ie 8聚填充。量滴js ‘/脚本

![endif] –

脚本src=’ assets/js/amaze ui。量滴js ‘/脚本

/body

/html

效果图:

https://codes90.oss-cn-hangzhou.aliyuncs.com/2022/10/1664591624-cf7edc0c528bf53.png

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

来源:脚本之家

链接:https://www。jb51。net/html 5/740940。超文本标记语言

发表回复

后才能评论