layUI基本使用1（CSS）

最新推荐文章于 2024-05-15 11:25:51 发布
最新推荐文章于 2024-05-15 11:25:51 发布
阅读量1.3k 收藏 12
点赞数 19
文章标签： 前端 layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47124508/article/details/115803963
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
    <style type="text/css">
        body{
            padding-top:45px ;
            padding-bottom: 200px;
        }
        .a{
            background-color: #00F7DE;
        }
        .b{
            background-color: silver;
        }
        .c{
            background-color: #737383;
        }
        .d{
            background-color: darkmagenta;
        }
        .e{
            background-color: #FF5722;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-anim layui-anim-scale">
            <!--动画效果-->
            <img src="/static/images/1.jpg" style="width: 100px;height: 70px">
        </div>

        <form action="" class="layui-form">
            <!--form input表单-->
            <div class="layui-form-item">
                <label class="layui-form-label">姓名：</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="name" placeholder="请输入姓名">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="pwd" placeholder="请输入密码">
                </div>
            </div>

            <div class="layui-form-item">
                <!--select选择框-->
                <label class="layui-form-label">下拉选择框</label>
                <div class="layui-input-block">
                    <select name="city">
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">济南</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <!--checkbox复选框-->
                <label class="layui-form-label">爱好：</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[0]" title="编程" value="0">
                    <input type="checkbox" name="like[1]" title="体育" value="1">
                    <input type="checkbox" name="like[2]" title="游戏" value="2">
                    <input type="checkbox" name="like[3]" title="新闻" value="3">
                </div>
            </div>

            <div class="layui-form-item">
                <!--checkbox开关-->
                <label class="layui-form-label">开关：</label>
                <div class="layui-input-block">
                    <input type="checkbox" checked lay-skin="switch" lay-text="ON|OFF">
                </div>
            </div>

            <div class="layui-form-item">
                <!--textarea文本域-->
                <label class="layui-form-label">个人简介：</label>
                <div class="layui-input-block">
                    <textarea type="text" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <!--button-->
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn layui-btn-warm">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>

        <div class="layui-tab layui-tab-card" lay-allowClose="true">
            <!--tab选项卡，卡片风格，带关闭提示的-->
            <div class="layui-tab-title">
                <ul>
                    <li class="layui-this">部门</li>
                    <li>员工</li>
                    <li>工资</li>
                </ul>
            </div>
            <div class="layui-tab-content" style="height: 100px">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
            </div>
        </div>

        <div class="layui-progress layui-progress-big" lay-showPercent="true">
            <!--进度条-->
            <div class="layui-progress-bar layui-bg-red" lay-percent="50%"></div>
        </div>

        <div class="layui-container">
            <!--container容器固定宽度，非100%显示-->
            <div class="layui-row">
                ---------------------------------------------------------
            </div>
        </div>

        <div class="layui-fluid">
            <!--fluid容器，不固定宽度，100%显示-->
            <div class="layui-row">
                ---------------------------------------------------------
            </div>
        </div>

        <div class="layui-container">
            <!--栅格应用及自适应及列偏移-->
            <div class="layui-row">
                <div class="layui-col-md3 layui-col-sm6 layui-col-xs10 layui-col-md-offset4 a">
                    3/12
                </div>
                <div class="layui-col-md3">
                    <!--列的嵌套-->
                    <div class="layui-col-row">
                        <div class="layui-col-md6 e">x6/12</div>
                        <div class="layui-col-md6 a">x6/12</div>
                    </div>
                    3/12
                </div>
                <!--
                <div class="layui-col-md3 c">
                    3/12
                </div>
                <div class="layui-col-md3 d">
                    3/12
                </div>
                -->
            </div>
        </div>

        <table class="layui-table" lay-even lay-skin="line" lay-size="sm">
 <!--lay-even:斑马线；lay-skin属性有line（不显竖线）row（不显横线）nob（都不显示）；lay-size属性有（lg大）（sm小）-->
            <thead>
                <tr>
                    <th>标题1</th>
                    <th>标题2</th>
                    <th>标题3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>内容11</td>
                    <td>内容12</td>
                    <td>内容13</td>
                </tr>
                <tr>
                    <td>内容21</td>
                    <td>内容22</td>
                    <td>内容23</td>
                </tr>
                <tr>
                    <td>内容31</td>
                    <td>内容32</td>
                    <td>内容33</td>
                </tr>
            </tbody>
        </table>

        <div class="layui-card">
            <!--普通卡片-->
            <div class="layui-card-header">
                卡片标题
            </div>
            <div class="layui-card-body">
                卡片内容
            </div>
        </div>

        <div class="layui-collapse" lay-accordion>
            <!--折叠样式的卡片,带手风琴效果-->
            <div class="layui-colla-item">
                <div class="layui-colla-title">标题</div>
                <div class="layui-colla-content layui-show">内容</div>
            </div>
        </div>

		<ul class="layui-nav layui-bg-green layui-nav-tree">
            <!--导航栏，水平导航、背景色、垂直导航、layui-nav-side侧边导航，布满屏幕-->
            <li class="layui-nav-item"><a href="javascript:;">首页</a></li>
            <li class="layui-nav-item"><a href="javascript:;">个人介绍</a></li>
            <li class="layui-nav-item"><a href="javascript:;">最新课程</a>
                <dl class="layui-nav-child">
                    <!--下拉子菜单-->
                    <dd><a href="#">Linux</a></dd>
                    <dd><a href="#">Python</a></dd>
                    <dd><a href="#">Nginx</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">关于</a></li>
        </ul>

        <span class="layui-breadcrumb" lay-separator="-">
            <!--面包屑,separator用-替换/-->
            <a href="">首页</a>
            <a href="">国内</a>
            <a><cite>新闻</cite></a>
        </span>
        <br>
        <span class="layui-badge-dot"></span>
        <!--微章，提示信息用，不加文字-->
        <span class="layui-badge layui-bg-green">Python</span>
        <!--微章，可以加文字-->
        <button type="button" class="layui-btn">提交<span class="layui-badge-dot layui-bg-red"></span></button>
        <br><br><br>

        <ul class="layui-timeline">
            <!--时间线-->
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">9月10日</h3>
                    <p>教师节</p>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">10月1日</h3>
                    <p>国庆节</p>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">12月25日</h3>
                    <p>圣诞节</p>
                </div>
            </li>
        </ul>

        <blockquote class="layui-elem-quote layui-quote-nm">
            <!--文本块，及改颜色-->
            文本内容
        </blockquote>

        <fieldset class="layui-elem-field layui-field-title">
            <!--字段集区块，盒子/标题-->
            <legend>标题</legend>
            <div class="layui-field-box">
                内容
            </div>
        </fieldset>

        <hr class="layui-border-red">
        <!--彩色横线-->
    </div>
    <script>
        layui.use('element',function () {
            var element = layui.element
        })
    </script>
    <script src="/static/layui/layui.js"></script>
</body>
</html>

所有效果
栅格系统
在这里插入图片描述

sdtvpengl
关注
  • 19
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui新手教程----帮助小白少走弯路
didui8950的博客
08-30 2003
Layui的学习 Layui官方文档：https://www.layui.com/ 　　先说说为啥我接触到了layui，因为需要去参与做一个项目，被学长推荐去学习layui，用来处理一些前端的问题。 　　Layui作为一个前端框架，用起来是十分的方便，并且官方文档中还有很多的模板可以参考。作为一个小白，...
如何使用layui根据前端返回结果修改CSS样式
奇妙的Bug之旅
01-09 1232
在Web开发中，我们经常需要根据前端的返回结果来动态地修改页面元素的样式。layui是一个流行的前端UI框架，它提供了丰富的组件和工具，可以帮助我们轻松实现这一需求。通过以上步骤，我们已经实现了使用layui根据前端返回结果修改CSS样式的功能。的元素，并为其设置了默认的样式。接下来，我们可以编写前端代码来获取后端返回的结果，并根据结果修改页面元素的样式。最后，我们需要编写后端处理逻辑来返回前端所需的结果。在这个示例中，我们创建了一个简单的Flask应用，并定义了一个名为。，获取后端返回的结果。
2024年最新前端LayUI框架快速上手详解(二)，斗鱼c++面试
2401_84434331的博客
05-15 366
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总首先去layer独立版本官网下载组件包。下载完成后解压，将。
layui.css如何使用,layui框架如何使用使用
weixin_33840959的博客
08-03 1479
摘要：layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML CSS JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。 layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。...
Layui自定义css样式
qq_29542245的博客
09-25 5818
Layui自定义css样式 一般原始的样式并不满足开发需求，那么如何自定义layui 样式呢？ <style> body { background-color: #009688; color: #fff; } body .demo-class .layui-tab-title, .layui-tab-title { background-color: #00968
LayUI项目学习
努力的nana
11-11 4875
layui项目初尝试
代码_layui的使用_
10-02
以上就是layui基础使用和与数据库连接的基本步骤。在实际项目中，你可能还需要处理分页、过滤、编辑等功能，layui都提供了相应的API支持。通过不断实践和学习，你可以熟练掌握layui，为你的Web应用增添更多可能性。...
layui文档直接引用使用
02-25
在“layui文档直接引用使用”这个主题下，我们将深入探讨如何在项目中直接引入layui，以及相关的JavaScript和ECMAScript基础知识。 首先，layui的直接引用通常是指在HTML文件中通过`<link>`和`<script>`标签来加载...
JS CSS layui.rar
07-18
例如，layui的表格组件不仅支持基本的数据展示，还可以实现分页、排序、过滤等功能，极大地提高了开发效率。 CSS方面，layui的样式设计遵循了Material Design和扁平化设计的原则，提供了统一的样式规范，使得页面看...
LayUI的使用，资源包
07-10
1. **基本结构**：LayUI的HTML结构通常包含`layui-container`作为容器，内部使用`layui-row`和`layui-col`进行栅格布局。通过调整`layui-col`的类名，可以实现响应式设计，适应不同设备屏幕。 2. **样式表与...
layui的使用示例.zip
12-06
在"layui的使用示例.zip"这个压缩包中，包含了一些基本的使用案例，帮助我们更好地理解和应用layui框架。下面我们将逐一探讨这些示例文件所展示的知识点。 1. **baselayout.html**：基础布局示例 这个文件展示了...
前端基础5——UI框架Layui
百慕卿君博客
09-06 6547
Layui的常用设置
layui按钮css代码（css自定义按钮封装）
zheyijieyou的博客
08-25 1176
fieldset{border: 1px solid #ccc;color: #666;padding: 10px;margin: 10px;} /*默认*/ .oy-btn{ display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; background-color: #17bd88; color: #fff; white-space: nowrap; .
layui的基本使用(布局，栅格，按钮)
serendipity_xr的博客
08-24 6490
layui 一.layui概述 官网：https://www.layui.com/ 官方文档：https://www.layui.com/doc/ 1.layui下载 在浏览器中输入https://www.layui.com/会出现以下界面 点击立即下载进行下载 下载后并进行解压 2.layui目录结构 二.layui基本使用 1.引入核心文件 <head> <meta charset="UTF-8"> <title>layui的使用</t
前端框架LayUI
qq_39756007的博客
02-15 8940
Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适 用。从项目维护的角度上，传统的开发模式，前端代码和后端代码耦合在一起，导致代码混乱不堪，极大的降低了项目的可维护性，增加了维护成本。从开发角度来看，研发人员在开发过程中，不仅要设计后端架构还要兼顾前端展示，导致开发效率低下，延长开发周期。传统开发模式的问题在前后端分离的开发模式中，后端仅返回前端所需的数据，前端负责渲染HTML页面，后端不再控制前端的效果，从后端请求的数据如何加载到前端中，都由前端自己决定，后
layui在线引用地址
热门推荐
heerey525
08-29 3万+
2.4.3版本layui在线引用地址（永久有效） layui.js：https://heerey525.github.io/layui-v2.4.3/layui/layui.js layui.css：https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css 2.4.4版本layui在线引用地址（永久有效） layui.js:...
layui使用table组件实现排序的CSS样式调整解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
01-17 1612
外部文件引入 <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js" charset="utf-8"></script> <link rel="stylesheet" href="common.css"> table引入 layui.use('table', function () { var table = .
Layui --- > [Mar]给渲染后的表格加CSS样式
栗子好好吃的博客
12-05 937
为什么要控制样式 使用layui生成后的表格的样式有时候,并不能满足我们的需求.因此在渲染完成后,需要自定义类对其操作 Layui表格渲染后一般会出现以下结构 分结构如下 我把使用layui的table渲染后的表格分为如下的几个dom 1.$rawTable: 初始table,即 2.$renderTable: 渲染之后的table,这个dom元素是Layui异步获取数据后生成的. $re...
LayUI
weixin_44720982的博客
04-01 1913
LayUI 一、lauui的使用 1.引入css <script type="text/javascript" src="layui-v2.6.8/layui/layui.js"></script> 2.布局容器 1.固定宽度 <div class="layui-container" style="background-color: #009688; height: 300px;"></div> 2.完整宽度 <div class="layui-
layui contextmenu使用
最新发布
07-02
layui是一个轻量级的前端UI框架，它的contextmenu模块提供了方便快捷的右键菜单功能。以下是layui contextmenu的基本使用方法： 1. 引入layui和contextmenu插件： 在HTML文件中，先引入layui.css和layui.js文件，然后在需要使用contextmenu的地方，引入contextmenu.js。 ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> <script src="layui/layui.contextmenu.js"></script> ``` 2. 创建contextmenu实例： 在JavaScript中，创建contextmenu实例，并设置菜单项和事件处理函数。 ```javascript layui.use(['contextmenu'], function() { var contextmenu = layui.contextmenu; // 初始化右键菜单 var menu = contextmenu.render({ elem: '#myContextMenu', // 需要绑定右键的元素ID trigger: 'right', // 右键触发 items: [ {name: '复制', event: function() { /* 处理函数 */ }}, {name: '剪切', event: function() { /* 处理函数 */ }}, {name: '粘贴', event: function() { /* 处理函数 */ }} ] }); }); ``` 3. 事件处理函数： 每个菜单项都有对应的event属性，当用户点击该菜单项时，对应的事件处理函数会被执行。在这里你可以根据实际需求编写相应的操作，如修改DOM或发送Ajax请求等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值