使用html制作一个登录框
时间: 2024-03-02 20:52:52 浏览: 24
可以按照如下 HTML 代码来制作一个登录框:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录框</title>
<style>
/* 样式表 */
.login {
width: 300px;
margin: 50px auto;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0 0 10px #ccc;
text-align: center;
font-size: 16px;
}
.login input {
width: 100%;
height: 32px;
line-height: 32px;
margin-bottom: 10px;
padding-left: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 3px;
outline: none;
}
.login button {
width: 100%;
height: 40px;
line-height: 40px;
margin-top: 10px;
font-size: 18px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.login button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="login">
<h2>登录</h2>
<form>
<input type="text" placeholder="用户名" name="username" required>
<input type="password" placeholder="密码" name="password" required>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
```
以上代码中,我们用了一个 div 元素来包裹整个登录框,并为其设置了一些基本样式,比如宽度、边框、内边距、阴影等。接下来,在登录框内部,我们使用了一个 h2 元素来显示标题,一个 form 元素来包裹输入框和登录按钮。在输入框和按钮上,我们分别应用了一些样式来美化它们的外观,比如边框、圆角、背景色等。最后,我们还为按钮设置了 hover 样式,使其在鼠标悬停时变色,增加了一些交互效果。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)