html制作百度搜索页面
时间: 2023-09-16 17:11:50 浏览: 142
百度搜素页的HTML实现
制作百度搜索页面需要一定的HTML和CSS知识。以下是一个简单的示例,供参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>百度搜索</title>
<style type="text/css">
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.form-group {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 20px;
}
.form-group input[type="text"] {
flex: 1;
padding: 10px;
border: none;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
font-size: 18px;
line-height: 24px;
color: #333;
}
.form-group button[type="submit"] {
padding: 10px 20px;
background-color: #3385ff;
border: none;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
font-size: 18px;
line-height: 24px;
color: #fff;
cursor: pointer;
}
.form-group button[type="submit"]:hover {
background-color: #2977e8;
}
</style>
</head>
<body>
<div class="container">
<form action="https://www.baidu.com/s" method="get">
<div class="form-group">
<input type="text" name="wd" placeholder="请输入搜索关键词">
<button type="submit">百度一下</button>
</div>
</form>
</div>
</body>
</html>
```
解释:
- `<!DOCTYPE html>`:声明HTML文档类型。
- `<html>`:HTML文档的根元素。
- `<head>`:文档头部,包括了页面的元数据和引用的外部资源。
- `<title>`:文档标题,显示在浏览器的标签页上。
- `<style>`:定义文档的样式。
- `<body>`:HTML文档的主体部分。
- `.container`:定义一个容器,包含搜索表单。
- `.form-group`:定义一个表单组,包含搜索输入框和提交按钮。
- `action`:定义提交表单时要请求的URL地址。
- `method`:定义表单提交的HTTP方法,这里使用GET方法。
- `name`:定义表单字段的名称。
- `placeholder`:定义输入框的默认提示文本。
- `type="submit"`:定义一个提交按钮。
这段HTML代码生成的页面如下所示:
![百度搜索页面](https://i.imgur.com/5Zi6qkH.png)
阅读全文