帮我写一个5个输入框的网页,样式好看些
时间: 2024-03-24 22:41:17 浏览: 23
好的,以下是一个简单的5个输入框的网页,使用了Bootstrap框架,样式较为简洁美观:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5个输入框</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="input1">输入框1</label>
<input type="text" class="form-control" id="input1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="input2">输入框2</label>
<input type="text" class="form-control" id="input2">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="input3">输入框3</label>
<input type="text" class="form-control" id="input3">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="input4">输入框4</label>
<input type="text" class="form-control" id="input4">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="input5">输入框5</label>
<input type="text" class="form-control" id="input5">
</div>
</div>
</div>
</div>
</body>
</html>
```
代码解释:
1. 使用Bootstrap框架的`form-group`类和`form-control`类来定义输入框和标签的样式;
2. 使用`row`类和`col-md-*`类来实现响应式布局,使得在不同屏幕尺寸下输入框可以显示得更美观。
希望这个样式对你有帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)