1
传统的后台管理系统界面,可以轻松解锁呀
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>登录</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <img class="bgone" src="https://cdn.nlark.com/yuque/0/2024/jpeg/314488/1718354704713-c94708ba-d149-475a-aa70-fb55246f167b.jpeg" /> <img class="pic" src="https://cdn.nlark.com/yuque/0/2024/png/314488/1718354709316-96ca7b43-ca8c-48f1-9ed3-31d5ad41d71d.png" /> <div class="table"> <div class="wel">某某 后台登录</div> <div class="wel1">MOU MOU XI TONG HUO TAI DENG LU</div> <div class="user"> <div id="yonghu" style=""></div> <input type="text" name="" placeholder="用户名" /> </div> <div class="password"> <div id="yonghu"></div> <input type="password" name="密码" placeholder="●●●●●●"/> </div> <input class="btn" type="button" name="登录" value="登录" /> </div> </body> </html>
*{ font-family: "微软雅黑"; font-size: 16px; border: 0; padding: 0; margin: 0; color: #666; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .bgone{ width: 100%; height: 100%; position: absolute; top:0;right: 0;left: 0;bottom: 0;margin: auto; } .pic{ width: 492px; height: auto; position: absolute; top:173px;right: 453px;left: 0;bottom: 0;margin: auto; z-index: 99999; } .table{ background-color: #FFFFFF; width: 960px; height: 465px; position: absolute; top:20%;right: 0;left: 0;bottom: 0;margin: auto; } .password{ position: absolute; top: 12.8rem; right: 4rem; display: flex; } .btn{ position: absolute; top: 18.5rem; right: 3.9rem; border: none; color: #fff; width: 373px; text-align: center; background-color: #1592ef; text-indent: 0rem; border-radius: 10px; text-shadow:2px 2px 1px rgba(0, 0, 0, 0.2); box-shadow:2px 2px 1px rgba(0, 0, 0, 0.2); font-size:20px ; height: 50px; } .wel{ width: 960px; height: 35px; color: #fff; font-size: 30px; position: absolute; top: -7rem; text-align: center; }.wel1{ width: 960px; height: 35px; color: #fff; font-size: 12.38px; position: absolute; top: -4rem; text-align: center; } input{ height: 55px; width: 373px; text-indent: 55px; outline:none; background: #eef6fd; border-bottom:2px #d6e7fa solid ; } .password input{ border: 0; } .user{ position: absolute; top: 7.8rem; right:4rem; display: flex; } #yonghu img{ height: 30px; position: absolute; left: 10px; top: 13px; }
2
<!DOCTYPE html> <html> <!-- Head --> <head> <title>登录表单</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <style> </style> </head> <body> <h1>登录表单</h1> <div class="container w3layouts agileits"> <div class="login w3layouts agileits"> <h2>登 录</h2> <form action="#" method="post"> <input type="text" Name="Userame" placeholder="用户名" required> <input type="password" Name="Password" placeholder="密码" required> </form> <ul class="tick w3layouts agileits"> <li> <input type="checkbox" id="brand1" value> <label for="brand1"><span></span>记住我</label> </li> </ul> <div class="send-button w3layouts agileits"> <form> <input type="submit" value="登 录"> </form> </div> <a href="#">记住密码?</a> <div class="social-icons w3layouts agileits"> <p>- 其他方式登录 -</p> <ul> <li class="qq"><a href="#"> <span class="icons w3layouts agileits"></span> <span class="text w3layouts agileits">QQ</span></a></li> <li class="weixin w3ls"><a href="#"> <span class="icons w3layouts"></span> <span class="text w3layouts agileits">微信</span></a></li> <li class="weibo aits"><a href="#"> <span class="icons agileits"></span> <span class="text w3layouts agileits">微博</span></a></li> <div class="clear"> </div> </ul> </div> <div class="clear"></div> </div> <div class="register w3layouts agileits"> <h2>注 册</h2> <form action="#" method="post"> <input type="text" Name="Name" placeholder="用户名" required> <input type="text" Name="Email" placeholder="邮箱" required> <input type="password" Name="Password" placeholder="密码" required> <input type="text" Name="Phone Number" placeholder="手机号码" required> </form> <div class="send-button w3layouts agileits"> <form> <input type="submit" value="免费注册"> </form> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </body> <!-- //Body --> </html>
*** :这里是部分源码,源码太长了
ul.tick { float: left; list-style: none; display: inline-block; width: 100%; margin-bottom: 20px; } ul.tick li input[type="checkbox"] { display: none; } ul.tick li input[type="checkbox"]+label { position: relative; padding-left: 30px; border: #F0F8FF; display: inline-block; font-size: 13px; color: #EEE; } ul.tick li input[type="checkbox"]+label span:first-child { width: 17px; height: 17px; display: inline-block; border: 1px solid #EEE; position: absolute; top: -3px; left: 0; bottom: 4px; } ul.tick li input[type="checkbox"]:checked+label span:first-child:before { content: ""; background: url(../images/tick.png)no-repeat; position: absolute; left: 3px; top: 3px; font-size: 10px; width: 10px; height: 10px; } .social-icons { margin-top: 20px; text-align: center; } .social-icons p { color: #CCC; margin-bottom: 15px; } .social-icons ul li { float: left; width: 32.9%; } .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} li.twt { margin: 0 2px; } .social-icons ul li a { display:block; } .social-icons ul li a span { vertical-align: middle; color: #fff; font-size: 15px; } .social-icons ul li span.icons { background: url("../images/i1.png") no-repeat center; width: 30px; height: 30px; display: inline-block; } .social-icons ul li.weixin span.icons { background: url("../images/weixin.png") no-repeat; background-size: 100%; } .social-icons ul li.qq span.icons { background: url("../images/QQ.png") no-repeat; background-size: 100%; } .social-icons ul li.weibo span.icons { /*--w3layouts--*/ /*--agileits--*/ background: url("../images/weibo.png") no-repeat; background-size: 100%; } .social-icons ul li a:hover span.icons { transform: rotatey(360deg); -webkit-transform: rotatey(360deg); -o-transform: rotatey(360deg); -moz-transform: rotatey(360deg); -ms-transform: rotatey(360deg); transition: .5s all; } input[type="text"], input[type="password"] { width: 93.4%; margin-bottom: 20px; padding: 10px; float: left; background-color: transparent; border: none; font-size: 15px; border-bottom: 1px solid rgba(238, 238, 238, 0.41); outline: none; color: #FFF; } .send-button { margin-bottom: 20px; } .send-button input[type="submit"] { width: 60%; padding: 10px 0; font-size: 16px; font-weight: 100; background-color: transparent; color: #CCC; border: 1px solid rgba(238, 238, 238, 0.41); border-width: thin; cursor: pointer; outline: none; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; text-decoration: none; }
3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 清除浏览器默认边距, 使边框和内边距的值包含在元素的width和height内 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 使用flex布局,让内容垂直和水平居中 */ section { /* 相对定位 */ position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */ background: linear-gradient(to bottom, #f1f4f9, #dff1ff); } /* 背景颜色 */ section .color { /* 绝对定位 */ position: absolute; /* 使用filter(滤镜) 属性,给图像设置高斯模糊*/ filter: blur(200px); } /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */ section .color:nth-child(1) { top: -350px; width: 600px; height: 600px; background: #ff359b; } section .color:nth-child(2) { bottom: -150px; left: 100px; width: 500px; height: 500px; background: #fffd87; } section .color:nth-child(3) { bottom: 50px; right: 100px; width: 500px; height: 500px; background: #00d2ff; } .box { position: relative; } /* 背景圆样式 */ .box .circle { position: absolute; background: rgba(255, 255, 255, 0.1); /* backdrop-filter属性为一个元素后面区域添加模糊效果 */ backdrop-filter: blur(5px); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; /* 使用filter(滤镜) 属性,改变颜色。 hue-rotate(deg) 给图像应用色相旋转 calc() 函数用于动态计算长度值 var() 函数调用自定义的CSS属性值x*/ filter: hue-rotate(calc(var(--x) * 70deg)); /* 调用动画animate,需要10s完成动画, linear表示动画从头到尾的速度是相同的, infinite指定动画应该循环播放无限次*/ animation: animate 10s linear infinite; /* 动态计算动画延迟几秒播放 */ animation-delay: calc(var(--x) * -1s); } /* 背景圆动画 */ @keyframes animate { 0%, 100%, { transform: translateY(-50px); } 50% { transform: translateY(50px); } } .box .circle:nth-child(1) { top: -50px; right: -60px; width: 100px; height: 100px; } .box .circle:nth-child(2) { top: 150px; left: -100px; width: 120px; height: 120px; z-index: 2; } .box .circle:nth-child(3) { bottom: 50px; right: -60px; width: 80px; height: 80px; z-index: 2; } .box .circle:nth-child(4) { bottom: -80px; left: 100px; width: 60px; height: 60px; } .box .circle:nth-child(5) { top: -80px; left: 140px; width: 60px; height: 60px; } /* 登录框样式 */ .conMain { position: relative; width: 400px; min-height: 400px; background: rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .form { position: relative; width: 100%; height: 100%; padding: 50px; } /* 登录标题样式 */ .form h2 { position: relative; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: 5px; margin-bottom: 30px; cursor: pointer; } /* 登录标题的下划线样式 */ .form h2::before { content: ""; position: absolute; left: 0; bottom: -10px; width: 0px; height: 3px; background: #fff; transition: 0.5s; } .form h2:hover:before { width: 53px; } .form .inputBox { width: 100%; margin-top: 20px; } /* 输入框样式 */ .form .inputBox input { width: 100%; padding: 10px 20px; background: rgba(255, 255, 255, 0.2); outline: none; border: none; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 16px; letter-spacing: 1px; color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .form .inputBox input::placeholder { color: #fff; } /* 登录按钮样式 */ .form .inputBox input[type="submit"] { background: #fff; color: #666; max-width: 100px; margin-bottom: 20px; font-weight: 600; cursor: pointer; } .forget { margin-top: 6px; color: #fff; letter-spacing: 1px; } .forget a { color: #fff; font-weight: 600; text-decoration: none; } </style> <title> </title> </head> <body> <section> <!-- 背景颜色 --> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="box"> <!-- 背景圆 --> <div class="circle" style="--x:0"></div> <div class="circle" style="--x:1"></div> <div class="circle" style="--x:2"></div> <div class="circle" style="--x:3"></div> <div class="circle" style="--x:4"></div> <!-- 登录框 --> <div class="conMain"> <div class="form"> <h2>登录</h2> <form> <div class="inputBox"> <input type="text" placeholder="姓名"> </div> <div class="inputBox"> <input type="password" placeholder="密码"> </div> <div class="inputBox"> <input type="submit" value="登录"> </div> <p class="forget">忘记密码?<a href="#"> 点击这里 </a></p> <p class="forget">没有账户?<a href="#"> 注册 </a></p> </form> </div> </div> </div> </section> </body> </html>
4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>登陆页面</title> <style> body { padding: 0; margin: 0; height: 100vh; display: flex; justify-content: center; background-image: linear-gradient(#a18cd1 0%, #fbc2eb 100%); background-size: cover; flex: 1; align-items: center; } .login { text-align: center; margin: 0 auto; width: 600px; height: 520px; background-color: rgba(87, 86, 86, 0.2); border-radius: 25px; box-shadow: 5px 2px 35px -7px #ff9a9e; } .login h2 { margin-top: 40px; color: aliceblue; font-weight: 100; } .login_form { padding: 20px; } .login_form span { color: rgb(131, 220, 255); font-size: 18px; font-weight: 100; } .login_form input { background-color: transparent; width: 320px; padding: 2px; text-indent: 2px; color: white; font-size: 20px; height: 45px; margin: 30px 30px 30px 5px; outline: none; border: 0; border-bottom: 1px solid rgb(131, 220, 255); } input::placeholder { color: #fbc2eb; font-weight: 100; font-size: 18px; font-style: italic; } .login_btn { background-color: rgba(255, 255, 255, 0.582); border: 1px solid rgb(190, 225, 255); padding: 10px; width: 240px; height: 60px; border-radius: 30px; font-size: 30px; color: rgb(100, 183, 255); font-weight: 100; margin-top: 15px; } .login_btn:hover { box-shadow: 2px 2px 15px 2px rgb(190, 225, 255); background-color: transparent; color: white; /* 选择动画 */ animation: login_mation 0.5s; } /* 定义动画 */ @keyframes login_mation { from { background-color: rgba(255, 255, 255, 0.582); box-shadow: 0px 0px 15px 2px rgb(190, 225, 255); } to { background-color: transparent; color: white; box-shadow: 2px 2px 15px 2px rgb(190, 225, 255); } } </style> </head> <body> <div class="login"> <h2>登陆\注册</h2> <div class="login_form"> <span>账号:</span> <input type="text" placeholder="请输入账号" /> <br /> <span>密码:</span> <input type="password" placeholder="请输入密码" /> </div> <div class="btn"> <button class="login_btn" onclick="login()"> 登 录 </button> </div> </div> </body> <script> function login() { console.log("登录按钮点击了"); } </script> </html>