用html写模仿百度的网页
时间: 2023-06-16 21:04:58 浏览: 55
以下为一个简单的模仿百度的网页示例,使用 HTML 和 CSS 编写:
```html
<!DOCTYPE html>
<html>
<head>
<title>模仿百度</title>
<style type="text/css">
body{
background-color: #f5f5f5;
}
#header{
background-color: #3385ff;
color: white;
padding: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#search{
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#search input[type=text]{
padding: 10px;
border: none;
border-radius: 5px;
width: 500px;
font-size: 16px;
}
#search input[type=submit]{
background-color: #3385ff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-left: 10px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
#footer{
background-color: #f2f2f2;
padding: 10px;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div id="header">
模仿百度
</div>
<div id="search">
<form action="https://www.baidu.com/s">
<input type="text" name="wd" placeholder="请输入搜索内容">
<input type="submit" value="搜索">
</form>
</div>
<div id="footer">
©2021 模仿百度
</div>
</body>
</html>
```
该示例包括一个简单的页面布局,包括页眉、搜索框和页脚。CSS 用于设置页面背景颜色、字体、颜色和对齐方式等样式。搜索框是一个表单元素,使用百度搜索的 URL 作为表单的 action 属性。