css美化界面

impress

2020-02-02

登录界面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;
}

效果

css美化界面