用HTML,css写一个百度
时间: 2023-08-31 11:33:38 浏览: 72
### 回答1:
好的,以下是用HTML和CSS编写的百度页面的示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>百度</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<a href="#" id="logo">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
</a>
<form action="#" id="search-form">
<input type="text" name="search" placeholder="请输入搜索内容">
<button type="submit">百度一下</button>
</form>
<nav>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">更多</a></li>
</ul>
</nav>
</header>
<main>
<!-- 这里是主要内容区域,可以根据需要添加 -->
</main>
<footer>
<p>©2023 Baidu</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
header {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
#logo {
display: block;
width: 80px;
height: 32px;
}
#search-form {
display: flex;
flex: 1;
margin: 0 20px;
}
#search-form input[type="text"] {
flex: 1;
padding: 10px;
border: none;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#search-form button {
padding: 10px 20px;
background-color: #3385ff;
color: #fff;
border: none;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
nav ul {
display: flex;
list-style: none;
}
nav li {
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
footer {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
font-size: 14px;
color: #999;
}
```
以上代码可以创建一个类似于百度的页面,包含顶部导航栏、搜索框、底部版权信息等。当然,这只是一个基本的示例,实际上百
### 回答2:
要用HTML和CSS来写一个简单的百度网页,需要考虑以下几个方面。
首先,我们需要使用HTML来构建整个页面的结构。可以使用HTML的各种标签来创建网页的标题、导航栏、搜索框、按钮和底部等基本元素。可以使用<div>、<header>、<nav>、<form>、<button>、<footer>等标签。
其次,需要使用CSS来为网页添加样式和布局。可以使用CSS选择器来选择不同的元素,并为它们添加特定的样式。可以使用颜色、字体、边框、背景等属性来设计页面的外观。可以使用布局属性(如flexbox或grid)来控制元素的位置和大小。
然后,在搜索框中添加一个提交按钮,并使用JavaScript编写一个事件处理函数。当用户在搜索框中输入关键词并点击提交按钮时,该函数将获取输入的关键词并将其作为参数传递给百度搜索引擎。百度搜索引擎将返回与关键词相关的搜索结果,然后我们可以通过JavaScript将结果显示在页面上。
最后,可以使用CSS和JavaScript来为页面添加交互效果,例如当鼠标悬停在链接上时改变链接的颜色、当点击按钮时显示加载动画等。
综上所述,在HTML和CSS的基础上,通过添加JavaScript和合适的事件处理函数,可以实现一个简单的百度网页。这个网页将具有搜索框、按钮和搜索结果的展示,用户可以在搜索框中输入关键词并点击按钮来进行搜索。