layui徽章

最新推荐文章于 2024-06-22 14:50:47 发布
最新推荐文章于 2024-06-22 14:50:47 发布
阅读量1.7k 收藏
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhou_98/article/details/101916430
版权

  1. 徽章

相关样式

layui-badge-dot 小圆点

layui-badge 弧形徽章

layui-badge-rim 边框徽章

组合使用

详细代码

<%--

  Created by IntelliJ IDEA.

  User: Lenovo

  Date: 2019/10/2

  Time: 14:15

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

    <title>徽章</title>

    <link rel="stylesheet" href="./libs/layui/css/layui.css">

    <link rel="stylesheet" href="./libs/css/global.css">

    <script type="text/javascript" src="./libs/layui/layui.js"></script>

</head>

<body>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

        <legend>小徽章、大家族</legend>

    </fieldset>

 

 

    <blockquote class="layui-elem-quote layui-quote-nm">

        小圆点：

        <span class="layui-badge-dot"></span>

        <span class="layui-badge-dot layui-bg-orange"></span>

        <span class="layui-badge-dot layui-bg-green"></span>

        <span class="layui-badge-dot layui-bg-cyan"></span>

        <span class="layui-badge-dot layui-bg-blue"></span>

        <span class="layui-badge-dot layui-bg-black"></span>

        <span class="layui-badge-dot layui-bg-gray"></span>

 

 

        

 

常规弧形徽章：

        <span class="layui-badge">6</span>

        <span class="layui-badge">99</span>

        <span class="layui-badge">61728</span>

        <span class="layui-badge">赤</span>

        <span class="layui-badge layui-bg-orange">橙</span>

        <span class="layui-badge layui-bg-green">绿</span>

        <span class="layui-badge layui-bg-cyan">青</span>

        <span class="layui-badge layui-bg-blue">蓝</span>

        <span class="layui-badge layui-bg-black">黑</span>

        <span class="layui-badge layui-bg-gray">灰</span>

 

 

        

 

边框徽章：

        <span class="layui-badge-rim">6</span>

        <span class="layui-badge-rim">Hot</span>

    </blockquote>

 

 

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

        <legend>与其它元素的搭配</legend>

    </fieldset>

 

 

    <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>

    <button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

 

 

    

 

 

 

    <ul class="layui-nav style=" text-align:="" right;"=""> &lt;-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 --&gt;

    <li class="layui-nav-item">

        <a href="">控制台<span class="layui-badge">9</span></a>

    </li>

    <li class="layui-nav-item">

        <a href="">个人中心<span class="layui-badge-dot"></span></a>

    </li>

    </ul>

    

 

 

 

    <div class="layui-tab layui-tab-brief">

        <ul class="layui-tab-title">

            <li class="layui-this">网站设置</li>

            <li>用户管理<span class="layui-badge-dot"></span></li>

            <li>最新邮件<span class="layui-badge">99+</span></li>

        </ul>

        <div class="layui-tab-content"></div>

    </div>

 

 

<script>

        layui.use(['element', 'layer'], function(){

            var element = layui.element;

            var layer = layui.layer;

 

 

 

 

        });

    </script>

</body>

</html>

 

效果

 

zhouzhou_98
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LayUI中的基本元素之徽章
daimeijin的博客
08-13 1142
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 徽章 徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。 快速使用 不妨先来看看 徽章 这个小小的大家族吧： 你可能已经敏锐地
徽章
weixin_44543307的博客
05-14 397
徽章 开发工具与关键技术：VS MVC 作者：木林森 撰写时间：2019年 5月13日 一个好的页面，总离不开小小细节的点缀，比如徽章。徽章是一个修饰性的元素，它几乎能够和所以的元素搭配，比如按钮、导航、选项卡…… 徽章本身细小不显眼，但是如果它们和其他的元素搭配就会有一种突出的效果，但是这种效果在页面中十分和谐，可以说在页面中它起到了锦上添花的作用。下面来认识一下这个小小的大家族吧。 徽章它不...
layui框架学习（11：徽章）
gc_2299的博客
02-26 838
学习并记录layui框架中页面元素的徽章相关样式设置方式。
（自用）layui右上角用户功能
最新发布
qq_35753520的博客
06-22 309
阿里云的sdk告诉我们，想要使用的话必须要有凭证，所以我们要新建ram用户创建凭证，凭证有三种方式，我们要选长期的那个，长期的那个验证需要2个key，我们要在环境变量中把长期的那2个key给配置好，之后sdk的cv过来的代码才会有效。由于上传的东西不是死的，所以阿里云那边cv过来的代码我们要传递的参数也要修改一下，改成圈的东西，因为我们头像是下载下来的，如果要下载的话就得提供bucket name之类的，所以我们要把对应的东西设置成要传递的参数。遇到api文档记得要去看对应的sdk。
Layui之徽章和面板的使用
记录和分享属于我的“IT”时光
08-27 398
样品图展示： 部分源码展示： <div class="layui-col-md6" > <!--数据处理--> <div class="layui-row layui-col-space15" > <div class="layui-bg-white"> <div class="layui-row
layui----页面元素之徽章，时间线，辅助
weixin_43846020的博客
07-16 365
徽章 https://www.layui.com/doc/element/badge.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/layui.js"&g
layui框架（徽章和选项卡）
q_2540638774的博客
12-12 1749
一、徽章 徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。 先来看效果图： 1、小圆点徽章介绍： 小圆点，通过 layui-badge-dot 来定义，里面不能加文字； 小圆点实现代码： <blockquote class="layui-elem-quote layui-quote-nm"> 小圆点： ...
Layui选项卡、进度条、面板、徽章、时间线、辅助元素
weixin_30362801的博客
10-16 317
Layui选项卡、进度条、面板、徽章、时间线、辅助元素 Tab选项卡 - 页面元素 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。 学习网址 Tab简介分格、Tab卡片风格、Tab响应式、带删除的Tab ID焦点定位 进度条 - 页面元素 进度条可应用于许多业务场景，如任务完成进度、lo...
layui 迷你按钮 layui-badge layui-badge-blue
hzm博客
12-02 1121
layui 迷你按钮 layui-badge layui-badge-blue
基于Layui自定义内容轮播插件
04-25
基于Layui自定义内容轮播插件是一款表格数据为ajax加载的本地json数据，本地查看会有跨域问题导致数据不能显示。
LayUI笔记
七夜LaNotte
09-07 275
LayUI 简介 LayUI与EasyUI类似，都封装了JQuery和一套完整的组件样式。它是国产的一个前端框架，使用起来门槛更低，上手更快 布局 类似BootStrap的栅格布局，支持响应式 使用步骤 第一步：引入LayUI相关的JS、CSS <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> &lt...
《前端》前端数字提醒---2020年8月20日
BelleDiao的博客
08-20 734
记录两种更好的解决方案： 1.使用sup标签 <sup></sup> 2.使用css属性vertical-align .dot{ width: 8px; height: 8px; border-radius: 50%; background-color: @danger; display: inline-block; vertical-align: super; } 作者：彬彬_cf76 链接：ht...
LayUI-导航界面以及基础样式设置练习
arvicky的博客
08-06 3828
练习功能 一、布局容器+栅格 1.布局 2.栅格基本使用 3.按键 二、导航界面 1.水平导航+子导航 2.垂直导航 3.边侧导航 使用layUI之前首先要下载LayUI库，因为使用的是LayUI中提供的样式 所以使用前要在head中加载环境，主要加载css和js。加载前先将包导入项目中然后加载 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--加载LayUI中的css--> &lt
layui 页面内流加载更多内容；
onlylele的博客
01-02 2111
实现效果如下：页面内打开弹框，实现加载更多效果； 1. HTML部分设置： <!-- 消息提醒 --> <a id="top-message" class="layui-icon layui-icon-notice"><span class="layui-badge mes-num">9</span></a> <!...
layui 生成动态左侧菜单 递归实现
热门推荐
人的生命周期还还没有代码的生命周期精彩
02-18 1万+
我知道两种方式实现： 一、先加载所有的主菜单，之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过，那么动态添加了菜单，这里显示不出来,不判断的话，每次点击都会请求一次，这样请求的次数就太多了，服务器不太好的话可能会成为高并发的一个原因) 二、就是以下的了，使用递归一次性全部加载出来（缺点,耗费服务器内存） 如果动态添加一个菜单，你当前页面不手动刷新菜单不会显示，这个问题可以...
为span标签赋值
LuckFairyLuckBaby的博客
04-10 3999
1.html <div class="row"> <div class="col-sm-1"> <button class="layui-btn layui-btn-warm">商圈概况<span class="layui-badge-dot layui-bg-orange"></span> </...
layui - 页面元素
weixin_42361858的博客
12-09 4682
参考：https://www.layui.com/doc/base/element.html 概括： css规范： css内置公共类(已定义内置样式的类名class)：(部分常用) 类名（class） 说明 布局 / 容器 layui-main 用于设置一个宽度为 1140px 的水平居中块（无响应式） layui-inline 用于将标签设为内联块状元素 layui-box 用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-si...
《layui宇宙版教程》：徽章
来吧，学习！
08-19 365
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.14 徽章 徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐和精致。 1.14.1 快速使用 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"&...
layui2.9 角标
02-23
Layui 2.9版本中的角标可以通过徽章Badge）组件来实现[^1]。下面是一个示例代码，演示了如何在按钮上添加角标： html <button type="button" class="layui-btn"> 设置 <span class="layui-badge">9 ``` 在上述...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值