王和平的layui入门2

最新推荐文章于 2023-03-25 21:41:21 发布
VIP文章 最新推荐文章于 2023-03-25 21:41:21 发布
阅读量345 收藏
点赞数
分类专栏： 语法与技术 文章标签： layui 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peacezhi/article/details/122406512
版权

首页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>开始使用layui</title>
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>

		<!-- 你的HTML代码 -->

		<script src="layui/layui.js"></script>
		<script>
			// 模块和回调函数
			// 一般直接写在一个js文件中
			layui.use(['layer', 'form'], function() {
     
				var layer = layui.layer,
					form = layui.form;

				layer.msg('Hello World');
			});
		</script>
	</body>
</html>

在这里插入图片描述

1布局容器和栅格系统

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		<div class="layui-container" >
			<div class="layui-row">
				<div class="layui-col-md3 layui-col-xs10 layui-col-sm6" style="background-color: #009F95;">3</div>
			</div>
			
			<h3>列间距</h3>
			<div class="layui-row layui-col-space10">
			    <div class="layui-col-md4" >
			        <!-- 需要在layui-col-md4里面再加一层div -->
			        <div style="background-color: #009688;">
			            1/3
			        </div>
			    </div>
			    <div class="layui-col-md4">
			        <div style="background-color: burlywood;">
			            1/3
			        </div>
			    </div>
			    <div class="layui-col-md4">
			        <div style="background-color: silver;">
			            1/3
			        </div>
			    </div>
			</div>
			
			<h3>列偏移</h3>
			<div class="layui-row">
			    <div class="layui-col-md4" style="background-color: rosybrown;">
			        4/12
			    </div>
			    <div class="layui-col-md4 layui-col-md-offset4" 
			         style="background-color: cornflowerblue;">
			        偏移4列，从而在最右
			    </div>
			</div>
			
			<h3>列嵌套</h3>
			<div class="layui-row layui-col-space5">
			    <div class="layui-col-md5" style="background-color: thistle;">
			        <div class="layui-row">
			            <div class="layui-col-md3" style="background-color: burlywood;" >
			                内部列
			            </div>
			            <div class="layui-col-md5" style="background-color: indianred;">
			                内部列
			            </div>
			            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
			                内部列
			            </div>
			        </div>
			    </div>
			</div>
		</div>
		
		<!-- <div class="layui-fluid" style="height: 50px; background-color: #009E94;">
			
		</div> -->
	</body>
</html>

在这里插入图片描述

2基本元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		<!-- 基础按钮 -->
		<button type="button" class="layui-btn">一个标准的按钮</button>
		<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
		<div class="layui-btn">一个按钮</div>
		<br>
		<!-- 不同主题的按钮 -->
		<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>
		
		<!-- 不同尺寸的按钮 -->
		<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> 
		<button class="layui-btn">默认</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
		<button class="layui-btn layui-btn-xs">迷你</button>
		
		<br>
		<button class="layui-btn layui-btn-radius">默认按钮</button>
		<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button> 
		<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
		<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
		<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
		<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
		<br>
		
		<button type="button" class="layui-btn">
		    <i class="layui-icon">&#xe608;</i> 添加 <i class="layui-icon layui-icon-ios"></i>
		</button>
		
		<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
		    <i class="layui-icon">&#x1002;</i> 刷新
		</button>
		
		
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type
最低0.47元/天 解锁文章
peacezhi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Linux网络操作系统应用教程高职-作者-王和平-第-章-第章2完整版资料.ppt
11-16
Linux网络操作系统应用教程高职-作者-王和平-第-章-第章2完整版资料.ppt
王和平的layui入门
王和平的第三个果园
01-10 118
2.3. 下载与使⽤ 在 官⽹⾸⻚ 下载到 layui 的最新版。⽬录结构如下： ├─css // css⽬录 │ │─modules // 模块css⽬录（⼀般如果模块相对较⼤，我们会单独提取，⽐如下⾯三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css // 核⼼样式⽂件 ├─font // 字体图标⽬录 ├─images // 图⽚资源⽬录（⽬前只有layim和编辑器⽤到的GIF表情） │─lay // 模块核⼼⽬录 │ └─modul
王和平的spring自定义异常处理
王和平的第三个果园
06-13 139
import com.itheima.health.common.MessageConst; import com.itheima.health.entity.Result; import lombok.extern.slf4j.Slf4j; import org.springframework.http.HttpStatus; import org.springframework.http.converter.HttpMessageConversionException; import org.sprin
王和平的《大话程序员》学习笔记
王和平的第三个果园
07-31 206
程序员要学会承担压力。程序员不要单打独斗、要学会结交共同探讨问题的同行、要提升搜索技巧。 学会看源代码非常重要！学会看开源项目源代码更重要！项目经验最最重要！ 在职场中要积极主动，及时沟通。说话结果先行，目标导向。不要害怕问问题，担心别人觉得你水，因为拖延项目的后果更严重。当然学会沟通、学会提问， 学会肢解任务。 工作一定要忙于工作、不要偷懒，上班的时候的偷懒，就会无法适应高强度的工作。上班闲暇的时候，可以想想如何改进当前的工作。 如果你长时间的作出超出领导期望的事情，自己就会得到提升，哪怕短时间内没有升职
王和平的《网络是怎样连接的》学习笔记
王和平的第三个果园
11-05 2302
第1章 浏览器生成消息——探索浏览器内部 问题（判断题） 1http://www.baidu.com中的www代表world wide web协议（对通信操作规则所做的定义） 2个人也可以申请注册互联网中的域名 3浏览器等网络应用程序实际上并不具备网络控制功能 答案 1错误。www只是web服务器上的一种命名。而且world wide web也不是一个协议的名字，而是web提出者最早开发的浏览器兼...
今天国际：构建工业互联网平台 助推制造业转型升级——访深圳市今天国际软件技术有限公司副总经理王和平.pdf
07-16
今天国际：构建工业互联网平台 助推制造业转型升级——访深圳市今天国际软件技术有限公司副总经理王和平.pdf
Linux网络操作系统应用教程高职-王和平-第-章-第章新完整版资料.ppt
11-17
Linux网络操作系统应用教程高职-王和平-第-章-第章新完整版资料.ppt
Linux网络操作系统应用教程高职-作者-王和平-第-章-第章完整版资料.ppt
11-14
Linux网络操作系统应用教程高职-作者-王和平-第-章-第章完整版资料.ppt
Linux网络操作系统应用教程高职-教学课件-王和平-第-章-第章完整版资料.ppt
11-14
Linux网络操作系统应用教程高职-教学课件-王和平-第-章-第章完整版资料.ppt
虚拟机vmware如何截图
王和平的第三个果园
11-11 9279
在vmware中选择“虚拟机”–》“捕捉屏幕” 图片的保存位置可以设定，选择“编辑”–》“首选项”–》“工作区”–》“虚拟机”–》“将屏幕截图保存到”
tongweb7（linux企业版）快速使用手册——安装与应用部署
王和平的第三个果园
11-19 8079
第1章 TongWeb7 产品介绍 1.1 概述 TongWeb7是遵循JavaEE7 Web Profile规范的企业级应用服务器，它为企业应用提供了 可靠、可伸缩、可管理和高安全的基础平台。同时具有功能完善、支持开放标准和基于组件 开发、多层架构、轻量等特点，为开发和部署企业应用提供了必需的底层核心功能。用户通 过TongWeb7的管理控制台可方便的对应用进行管理，同时能够监控系统组件和应用运行时的 状态及调优。因此TongWeb7适用于高度可用、可靠、可伸缩，稳定的业务领域 第2章 TongWeb
tongweb7启动参数配置配置个人理解
王和平的第三个果园
11-24 5928
jvm参数 -Xmx2048m 最大堆内存，单位为G，g，K，k，M，m，中间不含空格 -Xms2048m 最小堆内存，单位为G，g，K，k，M，m，中间不含空格 -XX:+UseConcMarkSweepGC: 设置并发收集器 -XX:+UseParallelGC: 设置并行收集器 -XX:+UseParalledlOldGC: 设置并行年老代收集器 -XX:+UseSerialGC: 设置串行收集器 -Xrunjdwp:transport=dt_socket,server=y,suspend=n,a
python线性回归算法
王和平的第三个果园
12-24 5388
1. 线性回归算法 2. 在Python中实现线性回归 那我们如何在Python中实现呢？ 利⽤Python强⼤的数据分析⼯具来处理数据。 Numpy提供了数组功能，以及对数据进⾏快速处理的函数。Numpy还是很多⾼级扩展库的依赖，⽐如Pandas，Scikit_Learn等都依赖于它。 Scikit_Learn扩展库，这是⼀个机器学习相关的库。它提供了完善的机器学习⼯具箱，包括数据预处理、分类、回归、预测等。 2.1 安装sklearn⼯具 本⾸先进⼊到虚拟环境 cd ~/Desktop/env_s
pycharm2021专业版安装过程和初次使用
王和平的第三个果园
11-11 4575
在vmware上安装ubuntu pycharm linux版下载地址： https://www.jetbrains.com/pycharm/download/#section=linux 打开终端，cd到pycharm-professional-2021.2.3.tar.gz所在文件夹，解压tar包 tar -zxvf pycharm-professional-2021.2.3.tar.gz 把pycharm文件夹转移到/opt内 sudo mv pycharm-2021.2.3/ /opt/ 切换文件夹
IDEA环境配置
最新发布
王和平的第三个果园
03-25 2739
IDEA环境配置
Tomcat 服务器server.xml配置
王和平的第三个果园
11-26 2322
Tomcat 服务器的配置主要集中于 tomcat/conf 下的 catalina.policy、catalina.properties、context.xml、server.xml、tomcat-users.xml、web.xml 文件 server.xml server.xml 是tomcat 服务器的核心配置文件，包含了Tomcat的 Servlet 容器（Catalina）的所有配置。由于配置的属性特别多，我们在这里主要讲解其中的一部分重要配置。 Server Server是server.xml的
Tomcat 集群搭建入门
王和平的第三个果园
11-27 2279
简介 由于单台Tomcat的承载能力是有限的，当我们的业务系统用户量比较大，请求压力比较大时，单台Tomcat是扛不住的，这个时候，就需要搭建Tomcat的集群，而目前比较流程的做法就是通过Nginx来实现Tomcat集群的负载均衡。 环境准备 准备Tomcat server.xml上的 服务器端口 <Server port="8005" shutdown="SHUTDOWN"> HTTP端口 <Connector port="8080" protocol="HTTP/1.1"
21天Java开发速成篇-Java从入门到大师01快速入门
王和平的第三个果园
12-30 2214
21天Java开发速成篇-Java从入门到大师01快速入门
python os包的常用方法
王和平的第三个果园
02-25 1929
#是否存在该路径 os.path.exists(path: StrOrBytesPath) -> bool #创建文件夹 os.mkdir(path: StrOrBytesPath, mode: int = ..., *, dir_fd: int | None = ...) -> None #返回该文件夹下子文件夹的路径和文件名称列表 os.listdir(path: PathLike[str]) -> list[str] #该路径是不是文件夹 os.path.isdir(s: St

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值