文章目录
一、效果截图二、目录结构三、代码一、效果截图
二、目录结构
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;}
总结：页面和样式比较简单，主要是引出普通项目里面layui框架的使用。
