Java Web Day07-08_Layui

news2024/9/24 19:17:37

1. Layui概念介绍

layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

2. 兼容性和面向场景

layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 Web 界面速成开发方案。

3. 官网首页下载、目录结构

在这里插入图片描述

3.1 官网首页下载

3.2 目录结构

├─css //css目录
│ │─modules //模块 css 目录(一般如果模块相对较大,我们会单独提取,如下:)
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心样式文件
├─font //字体图标目录
└─layui.js //核心库

4. 快速上手

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入本地layui的css样式-->
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
   <!--这是自己的html代码-->
<!--引入本地layui的js库-->
<script type="text/javascript" src="layui/layui.js"></script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1334972.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

平衡二叉树的构建(递归

目录 1.概念&#xff1a;2.特点&#xff1a;3.构建方法&#xff1a;4.代码&#xff1a;小结&#xff1a; 1.概念&#xff1a; 平衡二叉树&#xff08;Balanced Binary Tree&#xff09;&#xff0c;也称为AVL树&#xff0c;是一种二叉树&#xff0c;它满足每个节点的左子树和右…

vivado 时序多条路径

移动设置 以下示例显示了移动设置的结果&#xff1a; •示例一&#xff1a;设置5/保持相应移动 •示例二&#xff1a;设置5/保持4 示例一&#xff1a;设置5/保持相应移动 让我们假设设置路径乘数设置为五&#xff08;5&#xff09;。因为保持路径乘数是未指定&#xff0c;…

vue3 全局配置Axios实例

目录 前言 配置Axios实例 页面使用 总结 前言 Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;用于浏览器和 Node.js 环境。它提供了一种简单、一致的 API 来处理HTTP请求&#xff0c;支持请求和响应的拦截、转换、取消请求等功能。关于它的作用&#xff1a; 发起 HTTP …

消费革命:钱币新生的秘密,解锁无尽财富!

你是否曾经觉得&#xff0c;每次掏腰包后的那笔钱就此消失&#xff0c;再无踪迹&#xff1f;现在&#xff0c;我们将引领你进入一个全新的消费时代——消费革命&#xff01;它不仅满足你的物质需求&#xff0c;更将你的消费转化为财富的源泉&#xff0c;让你的每一分钱都活起来…

【网络安全/CTF】catcat-new

该题考察文件包含漏洞 正文 看到file参数&#xff0c;考虑文件读取 读取当前进程的命令行参数 ?file../../../../proc/self/cmdline读取app.py&#xff1a; bimport os\nimport uuid\nfrom flask import Flask, request, session, render_template, Markup\nfrom cat import …

Flutter详解及案例代码

概念 Flutter是由Google开发的开源UI框架&#xff0c;旨在快速构建高质量的移动应用程序。与传统的移动应用开发方式不同&#xff0c;Flutter使用单一代码库构建应用程序&#xff0c;可以同时在iOS和Android上运行。 Flutter的核心是使用Dart语言编写的&#xff0c;并且具有自…

亚马逊、虾皮、shein、Lazada等平台卖家如何冲刺圣诞大促,提升产品销量?

随着年底的临近&#xff0c;2023年的最后一个重要促销活动——圣诞大促已经冲刺阶段。 那现阶段对我们卖家来说&#xff0c;有哪些值得我们关注的点呢&#xff1f; 1.明确各级别产品的推广目的 根据产品表现&#xff0c;将产品分为主推款、平推款和清货款&#xff0c;然后针…

【adb】--- win10 配置 adb环境 超详细 (持续更新中)

在编程的艺术世界里&#xff0c;代码和灵感需要寻找到最佳的交融点&#xff0c;才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里&#xff0c;我们将共同追寻这种完美结合&#xff0c;为未来的世界留下属于我们的独特印记。 【adb】--- win10 配置 adb环境 超详细 &…

【技术分享】单网口远程透传网关快速实现昆仑通态触摸屏程序远程上下载及监控

准备工作 一台可联网操作的电脑一台单网口的远程透传网关及博达远程透传配置工具网线一条&#xff0c;用于实现网络连接和连接触摸屏一台昆仑通态触摸屏及其编程软件一张4G卡或WIFI天线实现通讯(使用4G联网则插入4G SIM卡&#xff0c;WIFI联网则将WIFI天线插入USB口&#xff0…

notepad++打开大文件失败问题

问题 :::warning 打开300多兆的日志文件提示文件太大打不开,但是其他版本的能打开 ::: 解决 换版本,没有好办法,换个版本就可以了

嵌入式科普(7)你知道JTAGSWD接口最少接几根线?

一、目的/概述 二、实际问题 2.1 原接线方式 2.2 解决方案 2.3 思考GND原因 三、资料来源 四、JTAG&SWD相关概念的逻辑 五、总结和提问 嵌入式科普(7)你知道JTAG&SWD接口最少接几根线&#xff1f; 一、目的/概述 1、那位同学直接抢答说2根线&#xff0c;数…

excel统计分析——K-S正态性检验

参考资料&#xff1a; 马兴华,张晋昕.数值变量正态性检验常用方法的对比[J].循证医学,2014,14(02):123-128 统计推断——正态性检验&#xff08;图形方法、偏度和峰度、统计&#xff08;拟合优度&#xff09;检验&#xff09;_sm.distributions.ecdf-CSDN博客 K-S检验法判断…

汽车之家获2023金网奖、艾奇奖:新商业时代如何打好内容营销牌

商业世界&#xff0c;营销是主线&#xff0c;是当之无愧的主角。从最原始的王婆卖瓜式的叫卖&#xff0c;到广告式的轰炸传播、跨界营销&#xff0c;再到润物细无声的内容营销。营销在悄然迭代&#xff0c;而当下&#xff0c;正值内容营销的最好时代。 因为内容无处不在。读者…

windows安全配置实验手册

访问控制策略&#xff08;L1940520022J&#xff09; 预备知识 Windows 7中&#xff0c;不仅有面向软件的限制方法&#xff0c;还增加了一种名为AppLocker的访问控制策略&#xff08;仅适用于企业版和旗舰版&#xff09;。 实验环境 操作系统类型&#xff1a;windows 7。 实…

优雅地使用python读取excel

python读取excel可以用pandas模块&#xff0c;功能比较强大 在对应的虚拟环境里面用anaconda安装&#xff08;如果你的python运行环境是用anaconda配置的&#xff09;&#xff0c;如果没有添加虚拟环境&#xff0c;直接在终端里面pip3 install pandas安装就可以。 import pan…

测试C#使用AForge从摄像头获取图片

百度“C# 摄像头”关键词&#xff0c;从搜索结果来看&#xff0c;使用OpenCV、AForge、window动态链接库获取摄像头数据的居多&#xff0c;本文学习基于Aforge.net连接摄像头并从摄像头获取图片的基本方法。   AForge相关包&#xff08;尤其是相关的控件&#xff09;主要针对…

个人或企业为啥要搭建及自己的知识付费平台才有前景?

在知识经济的时代&#xff0c;知识的传播和变现显得愈发重要。许多个人或企业选择将自己的知识、技能和经验通过课程的形式进行传播&#xff0c;以实现知识的价值。然而&#xff0c;在使用其他平台进行课程销售的过程中&#xff0c;他们常常面临着一些问题和挑战。 首先&#…

《C++避坑神器·二十五》简单搞懂json文件的读写之遍历json文件读写

json.hpp库放在文章末尾 1、遍历json文件读写 &#xff08;1&#xff09;插入新键值对到json之情形1 原来json文件如下所示&#xff1a; {"Connection": {"IpAddress": "192.168.20.1","Rock": 0,"Solt": 1}, "Data…

Spring之国际化:i18n

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

业务模式画布(Business Model Canvas)

本来应该进步了解业务架构和业务分析的知识&#xff0c;可是突然发现一个问题&#xff0c;就是在这透彻这两个概念之前&#xff0c;需要一个更为清晰的概念基础&#xff0c;那就是Business Model&#xff0c;很多时候翻译未商业模式&#xff0c;我更喜欢称之为业务模式&#xf…