html+css+layui实现简约登录界面

最新推荐文章于 2026-05-19 07:34:14 发布

原创最新推荐文章于 2026-05-19 07:34:14 发布 · 1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #layui

这篇博客展示了如何利用HTML、CSS以及layui框架创建一个简约的登录界面。包括效果截图、项目目录结构和具体代码展示，重点在于介绍layui在实际项目中的应用。

文章目录

一、效果截图
二、目录结构![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d73ade955eb093d016377de1d9d03763.png#pic_center)
三、代码

一、效果截图

在这里插入图片描述

二、目录结构

layui下载地址：layui

三、代码

html代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layui实现简约登录界面</title>
	<link rel="stylesheet" href="./layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="./css/index.css"/>
</head>
<body>
	<div id="wrapper">
		<div id="six"></div>
		<div id="four">	</div>
		<div id="center">
			<div class="img_wrapper">
				<img src="./img/bg.jpeg" alt="">
				<p class="title">图书借阅管理后台系统</p>
			</div>
			<div class="inpwrapper">
				<input type="text" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> 
				<input type="password" name="title" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> 
				<button type="button" class="layui-btn layui-btn-fluid">登录</button>
			</div>
		</div>
	</div>
	<script src="./layui/layui.js"></script>
	<script src="./src/js/index.js">	
	</script>
</body>
</html>

css代码如下：

* {
	margin: 0px;
	padding: 0px;
}

#wrapper {
	position: relative;
}

#six {
	width: 100%;
	height: 60vh;
	background-color: #00aaff;
}

#four {
	width: 100%;
	height: 40vh;
	background: #d5d5d5;
}
.img_wrapper img{
	margin-bottom: 30px;
	width: 400px;
	height: 160px;
}
#center {
	width: 400px;
	height: 500px;
	background-color: #ffffff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-200px, -250px);
	text-align: center;
	border-radius: 10px;
}

.inpwrapper input {
	margin-top: 15px;
	margin-bottom: 15px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.inpwrapper button {
	width: 80%;
	margin: 0 auto;
	margin-left: 0;
	margin-right: 0;
}

.title {
	font-size: 20px;
	font-weight: bold;
	color: #686868;
}