2021-01-10

最新推荐文章于 2024-09-11 20:31:47 发布

好困鸭

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量165

点赞数

分类专栏：基础文章标签： css html

本文链接：https://blog.csdn.net/Misaki0728/article/details/112436915

版权

基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

周报

- layui按钮

layui按钮

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按钮</title>
        <link rel="stylesheet" href="../layui/css/layui.css">
        <style>

        </style>
    </head>
    <body>
        <div class="layui-bg-blue">主题色-蓝</div>
        <div class="layui-bg-green">主题色-绿</div>
        <div class="layui-bg-red">高亮色-红</div>
        <div class="layui-bg-orange">高亮色-橘</div>
        <div class="layui-bg-cyan">藏青色</div>
        <div class="layui-bg-gray">灰色</div>
        <span class="layui-bg-green">标签</span>

        <!--layui的图标-->
        <i class="layui-icon layui-icon-face-smile">笑脸</i>
        <i class="layui-icon layui-icon-face-cry">哭脸</i>
        <br>
        <span>常用标签</span><br>
        用户:<i class="layui-icon layui-icon-user"></i><br>
        注销/退出:<i class="layui-icon layui-icon-logout"></i><br>

        <h2>按钮样式</h2>
        <button class="layui-btn">默认按钮</button>
        <button class="layui-btn layui-btn-primary">原始按钮</button>
        <button class="layui-btn layui-btn-normal">百搭按钮</button>
        <button class="layui-btn layui-btn-warm">暖色按钮</button>
        <button class="layui-btn layui-btn-danger">警告按钮</button>
        <button class="layui-btn layui-btn-disabled">禁用按钮</button>
        <br>
        <button class="layui-btn layui-btn-fluid">块级/流体按钮</button>
        <h2>按钮尺寸</h2>
        <button class="layui-btn">默认按钮</button>
        <button class="layui-btn layui-btn-lg">大按钮</button>
        <button class="layui-btn layui-btn-sm">小按钮</button>
        <button class="layui-btn layui-btn-xs">迷你按钮</button>
        <h2>圆角按钮</h2>
        <button class="layui-btn layui-btn-radius">默认圆角按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-primary">原始圆角按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-normal">百搭圆角按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-warm">暖色圆角按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-danger">警告圆角按钮</button>
        <button class="layui-btn layui-btn-radius layui-btn-disabled">禁用圆角按钮</button>
        <h2>图标按钮</h2>
        <button type="button" class="layui-btn">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
        <button type="button" class="layui-btn layui-btn-normal">
            <i class="layui-icon">&#x1002;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal">
            <i class="layui-icon">&#xe688</i>
        </button>
        <script src="../layui/layui.js"></script>
    </body>
</html>

好困鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-01-10

周报layui按钮layui按钮<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>按钮</title> <link rel="stylesheet" href="../layui/css/layui.css"> <style> &l
复制链接

扫一扫