<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>学生信息管理平台</title> <style> * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; } .container { height: 100%; background-image: linear-gradient(to right, #2F4F4F, #696969); } .login-wrapper { background-color: #fff; width: 358px; height: 588px; border-radius: 15px; padding: 0 50px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } .header { font-size: 38px; font-weight: bold; text-align: center; line-height: 200px; } .input-item { display: block; width: 100%; margin-bottom: 20px; border: 0; padding: 10px; border-bottom: 1px solid rgb(128, 125, 125); font-size: 15px; outline: none; } .input-item::placeholder { text-transform: uppercase; } .btn { cursor:pointer; text-align: center; padding: 10px; width: 100%; margin-top: 40px; background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); color: #fff; } .msg { text-align: center; line-height: 88px; } a { text-decoration-line: none; color: #abc1ee; } </style> </head> <body> <div class="container"> <div class="login-wrapper"> <form action="control.jsp" method="post"> <div class="header">登 陆</div> <div class="form-wrapper"> <input type="text" name="id" placeholder="学号或是工号" class="input-item"> <input type="password" name="password" placeholder="密码" class="input-item"> <input type="submit" class="btn" value="登陆" style="border:none"/> </div> <div class="msg"> 忘记密码? <a id="find_root" style="cursor:pointer">请点击</a> </div> </form> </div> </div> </body> <script type="text/javascript"> var find=document.getElementById("find_root"); find.onclick=function(name){ alert('你再想想啊,拜托!不要什么都交给我们程序员好不好,老哥?'); } </script> </html>
标签:总结,14,text,100%,50%,height,padding,23.4,font From: https://www.cnblogs.com/laobing6214/p/17320050.html