WebApp开发----数字角标

article/2025/10/2 11:19:51

数字角标--有底色和无底色

数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。 角标的核心类是.mui-badge,默认为实心灰色背景;同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标。

若无需底色,则增加.mui-badge-inverted类即可

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet"/><script type="text/javascript" charset="utf-8">mui.init();</script>
</head>
<body><h4>有底色:</h4><ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板1<span class="mui-badge">1</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板2<span class="mui-badge mui-badge-primary">12</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板3<span class="mui-badge mui-badge-success">123</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板4<span class="mui-badge mui-badge-warning">1234</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板5<span class="mui-badge mui-badge-danger">12345</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板6<span class="mui-badge mui-badge-purple">123456</span></a></li></ul><!-- 若无需底色,则增加.mui-badge-inverted类即可 --><h4>无底色:</h4><ul class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板7<span class="mui-badge mui-badge-inverted">1</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板8<span class="mui-badge mui-badge-primary mui-badge-inverted">12</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板9<span class="mui-badge mui-badge-success mui-badge-inverted">123</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板10<span class="mui-badge mui-badge-warning mui-badge-inverted">1234</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板11<span class="mui-badge mui-badge-danger mui-badge-inverted">12345</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板12<span class="mui-badge mui-badge-purple mui-badge-inverted">123456</span></a></li></ul><h5>有底色:</h5><span class="mui-badge">1</span><span class="mui-badge mui-badge-red">11</span><span class="mui-badge mui-badge-danger">11</span><span class="mui-badge mui-badge-purple">21</span><span class="mui-badge mui-badge-success">31</span><span class="mui-badge mui-badge-warning">41</span><span class="mui-badge mui-badge-blue">51</span><h5>无底色:</h5><span class="mui-badge mui-badge-inverted">1</span><span class="mui-badge mui-badge-red mui-badge-inverted">11</span><span class="mui-badge mui-badge-danger mui-badge-inverted">11</span><span class="mui-badge mui-badge-purple mui-badge-inverted">21</span><span class="mui-badge mui-badge-success mui-badge-inverted">31</span><span class="mui-badge mui-badge-warning mui-badge-inverted">41</span><span class="mui-badge mui-badge-blue mui-badge-inverted">51</span></body>
</html>

代码效果:

 


http://chatgpt.dhexx.cn/article/PdGMp4B2.shtml

相关文章

WebApp开发学习

1.折叠面板 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno" /><title></title…

webApp开发心得

从事单页相关的开发一年有余&#xff0c;期间无比的推崇webapp的网站模式&#xff0c;也整理了很多移动开发的知识点&#xff0c;但是现在回过头来看&#xff0c;webapp究竟是好还是不好真是一言难尽哟&#xff01; webapp使用JavaScript修改页面&#xff1b;紧接着再从服务器…

Qt+QtWebApp开发笔记(一):QtWebApp介绍、下载和搭建基础封装http轻量级服务器Demo

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/130631547 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

安卓WebApp开发-项目MiliSetu

文章目录 目录 文章目录 前言 WebAPP开发 一、WebAPP是什么&#xff1f; 二、安装HBuilder X 1.HBuilder X 官网 2.创建一个app项目 3.项目文件 ​编辑 index 总结 前言 WebAPP开发 WebApp开发&#xff0c;是移动端程序的实现方式之一&#xff0c;是一种简单&#…

关于webapp开发

最近想搞一个自用的手机app&#xff0c;但是Android开发给我的感觉是麻烦&#xff0c;想着web也可以制作手机app&#xff0c;于是去网上搜索了一番&#xff0c;最后下载了HBuilderX&#xff0c;然后开始搞&#xff0c;对于原生web&#xff0c;选择5App&#xff0c;默认模板就行…

Web App 开发

0. jQuery Mobile 介绍 jQM是为触控优化的移动web框架&#xff0c;用来设计响应式网站和跨平台移动开发的&#xff1b; &#xff08;这里的跨平台指的是可以运行在iOS、Android、BlackBerry、WindowsPhone各种平台上&#xff09; jQM的资料多而且详细、容易上手&#xff0c;对…

【WebApp】webApp开发总结(集合转贴)

为什么80%的码农都做不了架构师&#xff1f;>>> 【来源地址】 http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.htmlhttp://classjs.com/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/http://java-mans.iteye.com/blog/1639503http://www.z…

iOS开发入门——项目创建

iOS开发入门——项目创建 1、新建项目 2、项目模版 3、项目配置 配置好之后点下一步就好。。。。 4、确定存储位置 5、启动模拟器 这就是第一个空白项目的创建过程&#xff0c;后面将持续更新iOS开发学习经历。

ios开发基础教程

博客专栏 斯坦福iOS公开课笔记 文章&#xff1a;8篇 阅读&#xff1a;11187 IOS开发进阶 文章&#xff1a;9篇 阅读&#xff1a;34499 深入浅出Objective-C 文章&#xff1a;17篇 阅读&#xff1a;56719 IOS开发入门实例 文章&#xff1a;30篇 阅读&#xff1a;134894

iOS开发学习指南

1. 提升你的英语水平 虽然知乎er的平均水平比较高&#xff0c;但是现实情况是很大一部分程序员的英文水平是不太过关的。那大概需要提升到什么水平呢&#xff1f;我觉得达到比较流畅的阅读技术文档及书籍&#xff0c;配合英文字幕可以比较轻松的观看wwdc的session的水平就可以…

iOS开发入门——简单上手体验

iOS开发入门——简单上手体验 下面我们正式进入对iOS即swift的探索了解&#xff0c;我们在上一篇iOS开发入门——项目创建中已经创建了一个项目&#xff0c;我们将基于它继续探索&#xff0c;如下图所示&#xff1a; 我们双击即可进入这个项目。 1、进入项目 进入项目后如下图…

IOS开发之——入门

前言 目前主要的移动开发平台有&#xff1a;Android、iOS、WindowsPhone&#xff0c;前两者占据着绝大多数的终端应用&#xff0c;我们常说的移动开发就是指&#xff1a;Android和iOS开发。本位主要讲述IOS的开发。 Android、iOS系统架构对比 android是基于Linux内核设计的&…

ios开发学习

记录一下ios开发遇到好网站 http://www.cnblogs.com/kenshincui/p/3985090.html Kenshin Cuis Blog CODING 完美世界... iOS开发系列文章&#xff08;持续更新……&#xff09; 2014-09-21 22:17 by KenshinCui, 43498 阅读, 50 评论, 收藏, 编辑 iOS开发系列的文章&#xf…

iphone开发教程(1) iOS大纲

iOS 大纲 iOS 由操作系统和应用技术构成。虽然和 Mac OS X 共用了很多技术&#xff0c;但是 iOS 是专门为了移动设备而设计的。当然如果你以前做过 Mac OS X 的应用程序&#xff0c;你会发现很多相似之处&#xff0c;但是很多技术只能在 iOS 里面使用&#xff0c;比如支持多…

ios app开发学习流程(入门到精通)

一、xcode编译并运行app后&#xff0c;iphone模拟器已安装的app所在目录&#xff1a; &#xff03; 1. /Users/alpha/Library/Application Support/iPhone Simulator/5.1/Applications &#xff03; 2. 删除此目录下的app目录&#xff0c;即可清空模拟器里安装过的app &#xf…

iOS开发系列课程(01) --- iOS编程入门

iOS概述 什么是iOS iOS是苹果公司为它的移动设备&#xff08;iPhone、iPad、iWatch等&#xff09;开发的移动操作系统。 iOS发展史 2007年苹果发布iPhone Runs OS X2008年更名iPhone OS2010年更名iOS2012年WWCD 2012上发布iOS 62013年WWCD 2013上发布iOS 72014年WWCD 2014上…

iOS苹果开发者账号申请教程

只有苹果开发者账号才能上架App Store&#xff0c;苹果开发者需要年费&#xff0c;是苹果公司收的&#xff01; 开发者账号类型功能介绍 下面是个人苹果开发者申请步骤流程&#xff1a; 分五个步骤进行 1、注册苹果账号apple id 2、开启双重认证 3、下载Apple Developer应…

零基础如何学习 iOS 开发?

作为一名混迹iOS开发圈近4年的码农&#xff0c;资历不深不浅&#xff0c;看到这个问题还是忍不住想回答一下。 如果你打算学习iOS开发&#xff0c;那么在开始学之前&#xff0c;你要做好以下4个方面的准备。 ————————————————————— 1 、信念。 很大程…

【原创】iOS开发入门教程

2019独角兽企业重金招聘Python工程师标准>>> 程序发轻狂&#xff0c;代码阑珊&#xff0c;苹果开发安卓狂&#xff01;——写给狂热的编程爱好者们 ###写在前面的话 学习iOS应用程序开发已有一段时间&#xff0c;最近稍微闲下来了&#xff0c;正好也想记录一下前阶段…

iPhone 开发基础教程

Phone 开发基础教程之 在开始编写iPhone 软件之前&#xff0c;需要做一些准备工作。对于初学者&#xff0c;需要一台运行 Leopard(OS X 10.5.3或更高版本)的基于Intel的Macintosh计算机。2006年之后上市的任何Macintosh计算机(不管是笔记本还是台式机)应该都符合要求。 无需使用…