weiyong
/
202012G03


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>  
    <meta charset="UTF-8">  
    <title>Login</title>  
    <link rel="stylesheet" type="text/css" href="Login.css"/>  

<style type="text/css">

html{   
    width: 100%;   
    height: 100%;   
    overflow: hidden;   
    font-style: sans-serif;   
} 

body{   
    width: 100%;   
    height: 100%;   
    font-family: 'Open Sans',sans-serif;   
    margin: 0;   
    background-color: #2b2727;   
} 

#login{   
    position: absolute;   
    top: 50%;   
    left:50%;   
    margin: -150px 0 0 -250px;
    width: 500px; 
    height: 380px;
    background-color: #504b4b;  
}   

#login h1{   
    color: #fff;   
    text-shadow:0 0 10px;   
    letter-spacing: 1px;   
    text-align: center;   
} 


h1{   
    font-size: 2em;   
    margin: 0.67em 0;   
}  


input{   
    width: 278px;   
    height: 18px;   
    margin-bottom: 10px;   
    outline: none;   
    padding: 10px;   
    font-size: 13px;   
    color: #fff;   
    text-shadow:1px 1px 1px;   
    border-top: 1px solid #312E3D;   
    border-left: 1px solid #312E3D;   
    border-right: 1px solid #312E3D;   
    border-bottom: 1px solid #56536A;   
    border-radius: 4px;   
    background-color: #2D2D3F;   
}   
.but{
    width: 300px;   
    min-height: 20px;   
    display: block;   
    background-color: #e9982f;   
    border: 1px solid #e9982f;   
    color: rgb(0, 0, 0);   
    padding: 9px 14px;   
    font-size: 20px;   
    line-height: normal;   
    border-radius: 5px;   
    margin: 0;   
    font-weight: bold;
}  

.smile{

margin:320px auto;

width: 80px;

height: 80px;

font-size: 80px;

animation: action 6s linear infinite;

color:white;

}

@keyframes action {

from {

transform: rotate(0deg) translate(300px,80px) rotate(0deg);

}

to {

transform: rotate(360deg) translate(300px,80px) rotate(-360deg);

}

}


</style>
</head> 

<body> 


    <div id="login">  
        <h1>Login</h1>
        <form method="post" action="/login">
            <input style="margin:20px 20px 20px 100px;" type="text" value="" name="username" placeholder="用户名"></input>
            <input style="margin:20px 20px 20px 100px;" type="password" name="password" value="" placeholder="密码"></input>
            <p style="color: rgb(247, 240, 240);text-align: center" th:text="${session.msg}"></p>
            <button style="margin:20px 20px 20px 100px;" class="but" type="submit">登录</button>  
        </form>  
    </div>

    <div class="smile">☺</div>
<script type="text/javascript">
for (var i=0;i<5;i++) {
setTimeout(()=>{
console.log(i)
},1000*i)
}
</script>

</body>  
</html>