仿照bing主页,包含搜索框,背景图片,搜索按钮,国内版国际版按钮,只包含html和css部分,同时在搜索框内设置一个话筒图标和搜索图标
时间: 2024-03-11 20:45:13 浏览: 21
好的,以下是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Bing Homepage</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url("https://www.bing.com/th?id=OHR.SanctuarySunset_ZH-CN1874546564_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.search-box {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 30px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
width: 500px;
max-width: 90%;
}
.search-box input[type="text"] {
flex: 1;
border: none;
font-size: 18px;
padding: 10px;
margin-left: 10px;
outline: none;
}
.search-box button {
background-color: #f44336;
color: #fff;
border: none;
border-radius: 0 30px 30px 0;
font-size: 18px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.search-box button:hover {
background-color: #d32f2f;
}
.search-box .mic-icon {
font-size: 24px;
margin-right: 10px;
color: #aaa;
}
.search-box .search-icon {
font-size: 24px;
color: #fff;
}
.buttons {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.buttons button {
background-color: transparent;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
transition: color 0.3s ease;
}
.buttons button:hover {
color: #f44336;
}
</style>
</head>
<body>
<div class="container">
<div class="search-box">
<div class="mic-icon">
<i class="fa fa-microphone"></i>
</div>
<input type="text" placeholder="Search...">
<button>
<i class="fa fa-search search-icon"></i>
</button>
</div>
<div class="buttons">
<button>国内版</button>
<button>国际版</button>
</div>
</div>
</body>
</html>
```
其中,使用了Flex布局实现居中对齐,使用了Font Awesome库的图标,需要在head标签中添加以下代码引入:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
```
效果如下:
![bing homepage](https://i.imgur.com/aO3Q5Y8.png)
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)