帮我编写一个网页要求具有输入关键词的文本框、选择页数的选择框、选择内容量的选择框同时美观
时间: 2024-05-08 20:21:27 浏览: 8
好的,我可以为您提供一个简单的 HTML 网页,具有您所需的输入关键词的文本框、选择页数的选择框、选择内容量的选择框,同时还非常美观。以下是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索结果</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
margin-top: 50px;
}
.container {
margin: 50px auto;
width: 600px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #999;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"], select {
width: 100%;
padding: 10px 15px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
font-size: 16px;
}
input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h1>搜索结果</h1>
<div class="container">
<form>
<label for="keyword">关键词:</label>
<input type="text" id="keyword" name="keyword" placeholder="请输入关键词">
<label for="pages">选择页数:</label>
<select id="pages" name="pages">
<option value="1">1页</option>
<option value="2">2页</option>
<option value="3">3页</option>
<option value="4">4页</option>
<option value="5">5页</option>
</select>
<label for="content">选择内容量:</label>
<select id="content" name="content">
<option value="10">10条</option>
<option value="20">20条</option>
<option value="30">30条</option>
<option value="40">40条</option>
<option value="50">50条</option>
</select>
<input type="submit" value="搜索">
</form>
</div>
</body>
</html>
```
您可以将此代码复制到您的文本编辑器中,保存为 .html 文件,并在浏览器中打开该文件,即可查看效果。
该网页具有简洁明了的样式,使用了基本的 HTML 标签、CSS 样式和表单元素,非常易于使用。