layui学习——动画、按钮、表单

尽力漂亮

于 2020-04-29 16:47:13 发布

阅读量580

点赞数 1

分类专栏：前端文章标签： layui动画、按钮、表单 layui

本文链接：https://blog.csdn.net/weixin_44106334/article/details/105843514

版权

目标

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui导航学习</title>

		<!-- 新 layui 核心 CSS 文件 -->
		<link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
		<script src="layuiadmin/layui/layui.js"></script>
		<!-- jQuery文件。务必在layui.min.js 之前引入 -->

		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<style>
			div {
				border: solid 1px lightblue;
				text-align: center;
			}

			.netHeader {
				padding: 0px;
			}

			.netContent {
				height: 300px;
			}

			.netLeft {
				height: 100%;
			}

			.netRight {
				height: 100%;
			}
		</style>
	</head>
	<body style="padding: 20px;">
		<h3 class="layui-bg-blue" style="text-align: center;">layui按钮</h3>
		<h4 class="layui-bg-orange">主题</h4>
		<div>
			<button class="layui-btn layui-btn-lg">大型按钮</button>
			<button class="layui-btn">默认按钮</button>
			<button class="layui-btn layui-btn-sm">小型按钮</button>
			<button class="layui-btn layui-btn-xs">迷你按钮</button>
			<br>
			<div style="width:216px;margin: 0;">
				<!-- layui 2.2.5 新增 -->
				<button class="layui-btn layui-btn-fluid">流体按钮</button>
			</div>
		</div>
		<h4 class="layui-bg-orange">图标</h4>
		<!-- <div>
			<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
			<button class="layui-btn 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>
		</div>

		<h4 class="layui-bg-orange">圆角</h4>
		<div>
			<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
			<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
			<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
			<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
			<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
			<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
		</div>

		<h4 class="layui-bg-orange">按钮组</h4>
		<div class="layui-btn-group">
			<button class="layui-btn">增加</button>
			<button class="layui-btn">删除</button>
			<button class="layui-btn">编辑</button>
		</div>
		<div class="layui-btn-group">
			<button class="layui-btn layui-btn-sm">
				<i class="layui-icon">&#xe654;</i>
			</button>
			<button class="layui

最低0.47元/天解锁文章

尽力漂亮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
layui学习——动画、按钮、表单

目标代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>layui导航学习</title>  <link rel="stylesheet" href="layu...
复制链接

扫一扫