HTML网页设计科幻风格登录界面

暗托涅瓦2023-12-29 8:18

成品如下

HTML代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Science科幻登陆页面</title>
	<link href="css/login.css" type="text/css" rel="stylesheet" />
	<style>
		body{
					        
							background-image:url("image/kehuan3.avif");
							background-size:cover;
					    }
	</style>
</head>
<body>
	<marquee scrollamount="30" direction="right" behavior="alternate ><span class="ddd2">🔥🚀🔥🚀🔥🚀🔥🚀</span></marquee>
    <div class="login">
        <h2>登陆</h2>
        <div class="login_form">
            <span>账号：</span>
            <input type="text" placeholder="请输入账号">
            <br>
            <span>密码：</span>
            <input type="password" placeholder="请输入密码">
        </div>
        <div class="btn">
            <button class="login_btn"><a href="index.html" class="ddd">登录</a></button>
        </div>
    </div>
</body>
</html>

CSS代码

html 复制代码

.login{
	    text-align: center;
	    margin: 0 auto;
	    width: 600px;
	    height: 520px;
	    background-color: rgba(67, 76, 99, 0.2);
	    border-radius: 25px;
	    box-shadow: 5px 2px 35px -7px #B6BBC4	;
	}
	.login h2{
	    margin-top: 40px;
	    color: skyblue;
		font-size: 40px;
		font:黑体;
	    font-weight: 100;
	}
	.login_form{
	    padding: 20px;
	}
	.login_form span{
	    color: rgb(131, 220, 255);
	    font-size: 18px;
	    font-weight: 100;
	}
	.login_form input{
	    background-color: transparent;
	    width: 320px;
	    padding: 2px;
	    text-indent: 2px;
	    color: white;
	    font-size: 20px;
	    height: 45px;
	    margin: 30px 30px 30px 5px;
	    outline: none;
	    border: 0;
	    border-bottom: 1px solid rgb(131, 220, 255);
	}
	input::placeholder{
	    color: black;
	    font-weight: 100;
	    font-size: 18px;
	    font-style: italic;
	}
	.login_btn{
	    background-color: rgba(255, 255, 255, 0.582);
	    border: 1px solid rgb(190, 225, 255);
	    padding: 10px;
	    width: 240px;
	    height: 60px;
	    border-radius: 30px;
	    font-size: 30px;
	    color: rgb(100, 183, 255);
	    font-weight: 100;       
	    margin-top: 15px;
	}
	.ddd:hover, .ddd:active {
	    color: red;
		text-decoration: none;
	}
	.ddd2{
		font:1.875rem,large;
		color: green
	}
	.ddd:link, .ddd:visited {
	    text-decoration: none;
		color: rgb(100, 183, 255);
	}

背景avif

上传到资源里了

HTML网页设计 科幻风格登录界面

HTML网页设计科幻风格登录界面