纯静态登录页面

最新推荐文章于 2024-08-23 10:33:08 发布

涂月十八

最新推荐文章于 2024-08-23 10:33:08 发布

阅读量625

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/tuyueshiba/article/details/113806016

版权

纯静态登录页面

代码如下

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好，小周</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="box1">
        <h1>LOGIN</h1>
        <div id="box2">
            <input type="text"placeholder="Username">
        </div>
        <div id="box2">
            <input type="password"placeholder="Password">
        </div>
        <input type="submit" value="login">
    </div>
</body>
</html>

css
/*登陆界面*/
body{
    margin: 0;
    padding: 0;
    background-color: #656596;
}
#box1{
    
    margin-top: 200px;
    position: absolute;
    padding: 20px 50px;
    background-color: #000000e3;
    top:25%;
    left: 50%;
    width: 400px;
    height: 300px;
    border-radius: 25px;
    opacity: 0.5;
    box-shadow: 10px 10px 5px #000000e3;
    transform: translate(-50%,-50%);
    text-align: center;
}
#box1 h1{
    color: ghostwhite;
}
#box2 input[type="text"],#box2 input[type="password"]{
    border: 0;
    margin-top: 10px;
    display: block;
    margin: 20px auto;
    padding: 10px 14px;
    border-radius: 24px;
    background: none;
    border:1px blue solid;
    display: block;
    text-align: center;
    width: 200px;
    height: 30px;
    outline: none;
    transition: 0.15s;
    color: aquamarine;
}
#box1 input[type="submit"]{
    margin-top: 10px;
    width: 100px;
    height: 40px;
    border-radius: 24px;
    border:1px #656596 solid;
    background: none;
    color: aliceblue;
    cursor: pointer;
    
}
#box2 input[type="text"]:focus,#box2 input[type="password"]:focus{
    width:280px ;
    border-color: beige;
}
#box1 input[type="submit"]:hover{
    background: rgb(0, 255, 179);
}