`

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: 10px;">
<!--默认样式-->
<span class="am-badge">1</span>
<span class="am-badge am-badge-primary">2</span>
<span class="am-badge am-badge-secondary">3</span>
<span class="am-badge am-badge-success">4</span>
<span class="am-badge am-badge-warning">5</span>
<span class="am-badge am-badge-danger">6</span>
<span class="am-badge am-badge-success">Allmobilize</span>
<br>
<a class="am-badge am-badge-primary">Free</a>
<a class="am-badge am-badge-secondary">Secondary</a>
<a class="am-badge am-badge-success">Success</a>
<a class="am-badge am-badge-warning">Warning</a>
<a class="am-badge am-badge-danger">Danger</a>
<!--圆角样式-->
<span class="am-badge am-radius">1</span>
<span class="am-badge am-badge-primary am-radius">2</span>
<span class="am-badge am-badge-secondary am-radius">3</span>
<span class="am-badge am-badge-success am-radius">4</span>
<span class="am-badge am-badge-warning am-radius">5</span>
<span class="am-badge am-badge-danger am-radius">6</span>
<span class="am-badge am-badge-success am-radius">Allmobilize</span>
<br>
<a class="am-badge am-badge-primary am-radius">Free</a>
<a class="am-badge am-badge-secondary am-radius">Secondary</a>
<a class="am-badge am-badge-success am-radius">Success</a>
<a class="am-badge am-badge-warning am-radius">Warning</a>
<a class="am-badge am-badge-danger am-radius">Danger</a>
<!--椭圆样式-->
<span class="am-badge am-round">1</span>
<span class="am-badge am-badge-primary am-round">2</span>
<span class="am-badge am-badge-secondary am-round">3</span>
<span class="am-badge am-badge-success am-round">4</span>
<span class="am-badge am-badge-warning am-round">5</span>
<span class="am-badge am-badge-danger am-round">6</span>
<span class="am-badge am-badge-success am-round">Allmobilize</span>
<br>
<a class="am-badge am-badge-primary am-round">Free</a>
<a class="am-badge am-badge-secondary am-round">Secondary</a>
<a class="am-badge am-badge-success am-round">Success</a>
<a class="am-badge am-badge-warning am-round">Warning</a>
<a class="am-badge am-badge-danger am-round">Danger</a>
<!--大小-->
<span class="am-badge am-badge-primary">default</span>
<span class="am-badge am-badge-secondary am-text-sm">small</span>
<span class="am-badge am-badge-success am-text-default">normal</span>
<span class="am-badge am-badge-warning am-text-lg">large</span>
<span class="am-badge am-badge-danger am-text-xl">x large</span>
<!--[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>	

效果图:

 

 

  • 大小: 13.2 KB
分享到:
评论

相关推荐

    AmazeUI 列表的实现示例

    AmazeUI 是一个轻量级、跨屏的前端框架,它提供了丰富的组件和样式,帮助开发者快速构建响应式和用户体验良好的Web应用。在AmazeUI中,列表(List)是一种常见的布局元素,常用于展示信息,如导航链接、数据列表等。...

    Andriod炫酷的徽章

    总之,"Andriod炫酷的徽章"是一个强大的Android UI组件,它简化了徽章效果的实现,提供了丰富的交互方式和应用场景。开发者可以借助这个控件,轻松打造具有动态效果和高度可定制化的徽章,从而提升应用的整体质量和...

    SwiftUI之绘制徽章视图的路径和形状

    本篇教程就是SwiftUI使用路径和形状创建徽章的过程,创建的徽章可以和其它图形组合形成位置标志。如果想要针对不同种类的地标创建不同的徽章,可以尝试改变徽章基本组成符号的重复次数、角度或大小。跟着教程一步步...

    获取PMP徽章的方法

    PMP徽章是项目管理专业人士(Project Management Professional,简称PMP)认证的象征,表明获得者通过了PMP考试,并具备项目管理的专业知识和实践技能。PMP认证是国际上公认的项目管理资格认证,由美国项目管理协会...

    任意Android view添加徽章,消息提示

    View Badger是一个库,它允许开发者轻松地在任何Android View上添加小的徽章元素,通常用于显示未读计数。它省去了手动处理布局和动画的复杂性,提高了开发效率。`jgilfelt-android-viewbadger-e08c3a7`可能是这个库...

    SuperBadge,超级徽章Android库.zip

    这大大简化了UI设计过程,使得徽章的显示更加灵活和多样化。 2. **安装与集成**: 首先,你需要在你的项目级build.gradle文件中添加仓库信息,通常是JitPack。然后,在app模块的build.gradle文件中,添加依赖项,...

    一个开源徽章可以在每个项目上留下标识

    开源徽章在IT行业中,尤其是软件开发领域,已经成为一种重要的标识和品质象征。它们通常出现在项目的GitHub仓库首页、文档或代码库的顶部,为用户提供快速识别项目性质、许可证信息、构建状态、测试覆盖率等关键信息...

    Q版游戏饰品+刀枪剑+玉石饰品+建筑UI+游戏徽章之类+护具之类的

    在Q版游戏中,视觉设计与用户体验扮演着至关重要的角色,而"Q版游戏饰品+刀枪剑+玉石饰品+建筑UI+游戏徽章之类+护具之类的"这个主题,就涵盖了游戏设计的多个关键方面。 首先,我们来探讨"Q版游戏饰品"。Q版游戏...

    开源和Licence徽章图标

    开源和许可证徽章图标在软件开发领域中扮演着重要的角色,尤其在JavaScript开发中,它们是项目质量和合规性的视觉表示。这些图标通常出现在项目的README文件或网站上,为用户提供了一目了然的信息,表明项目是否遵循...

    圣火徽章外传 游戏 game

    《圣火徽章外传》是一款深受玩家喜爱的经典战略角色扮演游戏,由日本知名游戏公司Intelligent Systems开发,并由任天堂发行。游戏以其丰富的剧情、独特的角色设计和深度的战略战斗系统著称,为“圣火徽章”系列的...

    Android-SuperBadgeAndroid库实现以漂亮徽章显示收视率和其他信息

    在Android应用开发中,UI设计是至关重要的,它直接影响到用户体验。`SuperBadge`是一个专为Android设计的库,用于创建吸引人的徽章来展示收视率、通知数量或者其他相关的信息,以提升应用的视觉效果。这个库尤其适用...

    为Android视图添加徽章:Android ViewBadgerjgilfelt-android-viewbadger-f1cf577

    在Android应用开发中,有时我们需要在视图上显示小的标识或者徽章来表示特定的状态或通知,例如未读消息的数量。"Android ViewBadger"是这样一款库,由Jeff Gilfelt开发,它允许开发者轻松地在Android视图上添加这种...

    Shields徽章规范网站和默认API服务器

    **Shields徽章规范:网站和默认API服务器** 在软件开发领域,Shields徽章是一种常用的可视化工具,用于展示项目的状态、版本信息、许可证、构建结果等关键指标。这些小巧的图标通常出现在项目的README文件或者网页...

    Android-Badge一系列的Android徽章Drawables

    在Android开发中,徽章通常表现为一个小圆点或一个包含数字的小标签,用于提示用户有未处理的内容。传统的实现方式可能涉及复杂的自定义视图或者使用图形资源的组合。但是,nekocode-Badge项目提供了一个更加简洁的...

    cordova-plugin-badge, 访问和修改徽章编号.zip

    `cordova-plugin-badge` 是一个专门为 Apache Cordova 应用程序设计的插件,用于访问和修改应用的徽章(通知图标上的数字或符号)编号。Cordova 是一个流行的开源框架,允许开发者使用 HTML、CSS 和 JavaScript 来...

    Badgerly用于在App中显示徽章的一个CSS3库

    Badgerly是一个专门设计用于在应用程序中展示徽章样式的CSS3库,它为开发者提供了一种简单且灵活的方式来创建各种各样的徽章效果。在Web开发中,徽章通常用于表示状态、等级或者数量,比如未读消息的数量、用户等级...

    徽章效果注册表单HTML模板.rar

    该模板利用了“徽章效果”,这通常意味着在表单元素上应用了一种特殊的设计,如圆形边框、渐变色彩或者独特的图标,以增加表单的视觉冲击力和用户体验。 首先,`index.html`是模板的核心文件,它包含了HTML结构,...

    Android--徽章控件

    在Android开发中,"徽章控件"是一种常见的UI元素,通常用于表示通知、未读消息数量或者其他形式的计数信息。"Android--徽章控件"标题所指的,可能是一个专门设计用来方便开发者在Android应用中实现这类功能的库。这...

    徽章图像创建工具_JavaScript_代码_下载

    【标题】:徽章图像创建工具是基于JavaScript的编程实现,用于动态生成各种徽章图形。这个工具允许用户自定义徽章的样式、颜色、文本等元素,为开发者、设计师或者项目管理提供便利,可以快速生成具有专业外观的个性...

Global site tag (gtag.js) - Google Analytics