请写一个搜索栏左边可以选择使用搜狗百度binggoogle其中一种搜索引擎进行搜索中间就是搜索内容区域右边就是搜索按钮要求都要在同一个框内并且是同一排颜色是白色的请写出代码另外边框为圆角20px
你可以使用HTML和CSS来创建一个带有搜索栏、搜索引擎选择和搜索按钮的布局。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
.search-container {
display: flex;
align-items: center;
border-radius: 20px;
overflow: hidden;
background-color: white;
width: 400px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.search-engine {
padding: 10px;
font-size: 16px;
border: none;
background-color: white;
cursor: pointer;
}
.search-input {
flex: 1;
padding: 10px;
border: none;
background-color: white;
}
.search-button {
padding: 10px;
font-size: 16px;
border: none;
background-color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="search-container">
<select class="search-engine">
<option value="sogou">搜狗</option>
<option value="baidu">百度</option>
<option value="bing">Bing</option>
<option value="google">Google</option>
</select>
<input type="text" class="search-input" placeholder="搜索内容">
<button class="search-button">搜索</button>
</div>
</body>
</html>
你可以将上述代码复制到一个HTML文件中(例如search.html),然后在浏览器中打开该文件,即可查看布局效果。
原文地址: https://www.cveoy.top/t/topic/i8QS 著作权归作者所有。请勿转载和采集!