写一个酷炫星空登录页html
时间: 2023-10-11 07:04:30 浏览: 49
很高兴能够帮助您,以下是一个简单的酷炫星空登录页的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>酷炫星空登录页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 设置全屏背景图 */
html, body {
height: 100%;
background-image: url("https://picsum.photos/1920/1080/?random");
background-size: cover;
}
/* 设置登录框样式 */
#login-box {
width: 300px;
height: 300px;
margin: auto;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
padding: 20px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
text-align: center;
}
/* 设置登录框标题样式 */
#login-box h1 {
margin-top: 0;
font-size: 40px;
color: #222;
text-shadow: 1px 1px 1px #eee;
}
/* 设置输入框样式 */
#login-box input {
display: block;
width: 240px;
height: 40px;
margin: 20px auto;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 18px;
box-shadow: 1px 1px 1px #eee;
}
/* 设置登录按钮样式 */
#login-box button {
display: block;
width: 120px;
height: 40px;
margin: 20px auto 0;
border: none;
border-radius: 20px;
background: #1e90ff;
color: #fff;
font-size: 18px;
transition: background 0.5s;
cursor: pointer;
}
/* 鼠标悬浮时改变登录按钮颜色 */
#login-box button:hover {
background: #00bfff;
}
</style>
</head>
<body>
<div id="login-box">
<h1>酷炫星空登录页</h1>
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<button type="submit">登录</button>
</div>
</body>
</html>
```
希望能够对您有所帮助!