请用heml与css写一个美观的form,要求form中包含账号、密码的text行
时间: 2024-03-17 10:44:16 浏览: 18
好的,以下是一个简单的HTML与CSS代码,实现了一个美观的表单,其中包含了账号和密码的文本行:
```html
<!DOCTYPE html>
<html>
<head>
<title>美观的表单</title>
<style>
.form-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
background-color: #f7f7f7;
max-width: 500px;
}
.form-input {
display: block;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
font-size: 16px;
color: #333;
background-color: #fff;
}
.form-input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, .5);
}
.form-submit {
display: block;
margin: 20px 0 10px;
padding: 10px;
border: none;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
font-size: 16px;
color: #fff;
background-color: #007bff;
cursor: pointer;
}
.form-submit:hover {
background-color: #0069d9;
}
</style>
</head>
<body>
<div class="form-container">
<form>
<label for="username">账号:</label>
<input type="text" id="username" name="username" class="form-input" placeholder="请输入账号">
<label for="password">密码:</label>
<input type="password" id="password" name="password" class="form-input" placeholder="请输入密码">
<button type="submit" class="form-submit">登录</button>
</form>
</div>
</body>
</html>
```
这个表单使用了 flexbox 布局,将表单容器垂直居中,并设置了一些基本样式。账号和密码的文本行使用了相同的类名 `.form-input`,并设置了一些基本样式,包括边框、圆角、宽度、字体大小和背景色。登录按钮使用了 `.form-submit` 类名,并设置了一些基本样式,包括背景色和鼠标指针样式。当输入框被聚焦时,会显示边框和阴影,提高了用户体验。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)