编写登录界面样式
时间: 2023-07-05 20:17:25 浏览: 116
好的,以下是一个简单的登录界面样式代码示例:
HTML代码:
```
<div class="login-form">
<h2>Login Form</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</div>
```
CSS代码:
```
.login-form {
width: 300px;
margin: 0 auto;
text-align: center;
}
.login-form h2 {
margin-top: 0;
font-size: 24px;
}
.login-form input[type="text"],
.login-form input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
.login-form button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: #428bca;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.login-form button[type="submit"]:hover {
background-color: #3071a9;
}
```
这段代码会生成一个简单的登录界面,包含用户名和密码输入框以及登录按钮。你可以根据自己的需要进行修改和调整。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)