css美化界面
登录界面jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录界面</title> <link rel="stylesheet" href="css/login.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script> <script src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script> </head> <body> <h3 id="t"><span></span>年<span></span>月<span></span>日<span></span>时<span></span>分<span></span>秒</h3> <div class="container" > <form action="${pageContext.request.contextPath}/AdminServlet?method=post" method="post"> <div class="second"> <div class="third"> <h1>登录</h1> <div > <i class="fa fa-user" aria-hidden="true"></i> <input class="f" name="name" value="" placeholder="输入姓名..."> </div> <div > <i class="fa fa-lock" aria-hidden="true"></i> <input class="s" name="id" value="" placeholder="输入密码..."> </div> <div > <i class="fa fa-id-badge" aria-hidden="true"></i> <select name="sid" style="height: 25px;width: 80px;text-align: center;margin: 7px; "> <option>学生</option> <option>老师</option> </select> </div> </div> <div > <input class="t" type="submit" value="登录"/> </div> </div> </form> <div class="beside"> <i class="fa fa-share" aria-hidden="true"></i> <a href="${pageContext.request.contextPath}/login2.jsp">管理员登入</a> </div> </div> </body> <script type="text/javascript"> var ss=document.getElementById('t').getElementsByTagName('span'); var time=new Date(); function changetime(){ //获取当前时间函数 ss[0].innerHTML=time.getFullYear(); //获取年 ss[1].innerHTML=time.getMonth()+1; //获取月 ss[2].innerHTML=time.getDate(); ss[3].innerHTML=time.getHours(); ss[4].innerHTML=time.getMinutes(); ss[5].innerHTML=time.getSeconds(); } changetime(); setInterval(function(){ //每隔1秒重新调取changetime函数 changetime(); },1000); switch(time.getMonth()+1) { case 3: case 4: case 5:document.write('<h3>'+"Spring is coming"+'</h3>'+'<h3>'+"欢迎来到大魔王汪汪的空间"+'</h3>');break; //如果使3~5月是春天 case 6: case 7: case 8:document.write('<h3>'+"Summer is coming"+'</h3>'+'<h3>'+"欢迎来到大魔王汪汪的空间"+'</h3>');break; case 9: case 10: case 11:document.write('<h3>'+"Aunt is coming"+'</h3>'+'<h3>'+"欢迎来到大魔王汪汪的空间"+'</h3>');break; case 12: case 1: case 2:document.write('<h3>'+"Winter is coming"+'</h3>'+'<h3>'+"欢迎来到大魔王汪汪的空间"+'</h3>');break; }; </script> </html>
css代码
@import url("https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css"); //常用图标地址 body{ height: 100%; width: 100%; background: url(../img/background1.png); //背景图片 background-repeat: no-repeat; background-size:cover; position: absolute; overflow: hidden; font-family: sans-serif; } .container{ width: 300px; position: absolute; //绝对定位 top:50%; left:50%; transform: translate(-50%,-50%); //使登录框位于整个界面的中心 background: #F0F8FF; padding: 80px; border-radius: 10px; text-align: center; //文体内容居中 text-shadow: 0px 0px 10px black; //文字虚化 color:powderblue; } .second{ } .f{ border-color: black; border-radius:10px ; text-align: center; margin: 10px; padding: 10px; } .s{ border-color: black; border-radius:10px ; text-align: center; margin: 10px; padding: 10px; } .t{ height: 30px; width: 100px; border-color: #FAFAD2; border-radius:10px ; background: #87CEFA; } .beside{ margin: 20px; }
效果
