122 lines
8.1 KiB
HTML
122 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>汐云搜索</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
background-image: url('picture/10071.jpg'); /* 请替换为您的图片URL */
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.search-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 20px; /* 添加一些边距 */
|
||
}
|
||
.search-engine {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 10px;
|
||
}
|
||
.search-engine label {
|
||
margin: 0 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.search-engine img {
|
||
height: 20px;
|
||
margin-right: 5px;
|
||
}
|
||
.search-box {
|
||
width: 300px;
|
||
padding: 10px;
|
||
border: 1px solid rgba(204, 204, 204, 0.5);
|
||
border-radius: 5px;
|
||
font-size: 16px;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
.search-btn {
|
||
padding: 10px 20px;
|
||
background-color: rgba(0, 123, 255, 0.5);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
margin-top: 10px;
|
||
}
|
||
footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 10px;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
color: white;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 600px) {
|
||
.search-container {
|
||
margin: 10px; /* 在小屏幕上减小边距 */
|
||
}
|
||
.search-box {
|
||
width: 80%; /* 在小屏幕上调整搜索框宽度 */
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="search-container">
|
||
<input type="text" id="search-box" class="search-box" placeholder="请输入搜索内容">
|
||
<button id="search-btn" class="search-btn">搜索</button>
|
||
<div class="search-engine">
|
||
<input type="radio" id="sogou" name="search-engine" value="https://www.sogou.com/web?query=">
|
||
<label for="sogou">
|
||
<img src="https://www.sogou.com/favicon.ico" alt="Sogou"> 搜狗
|
||
</label>
|
||
<input type="radio" id="bing" name="search-engine" value="https://www.bing.com/search?q=">
|
||
<label for="bing">
|
||
<img src="https://www.bing.com/favicon.ico" alt="Bing"> Bing
|
||
</label>
|
||
<input type="radio" id="baidu" name="search-engine" value="https://www.baidu.com/s?wd=" checked>
|
||
<label for="baidu">
|
||
<img src="https://www.baidu.com/favicon.ico" alt="Baidu"> 百度
|
||
</label>
|
||
<input type="radio" id="so" name="search-engine" value="https://www.so.com/s?q=">
|
||
<label for="so">
|
||
<img src="https://www.so.com/favicon.ico" alt="360 Search"> 360搜索
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var searchBox = document.getElementById('search-box');
|
||
var searchBtn = document.getElementById('search-btn');
|
||
var searchEngineRadios = document.getElementsByName('search-engine');
|
||
|
||
searchBtn.addEventListener('click', function() {
|
||
var query = searchBox.value;
|
||
var selectedEngine = Array.from(searchEngineRadios).find(radio => radio.checked).value;
|
||
var searchUrl = selectedEngine + encodeURIComponent(query);
|
||
window.open(searchUrl, '_blank');
|
||
});
|
||
</script>
|
||
<footer>
|
||
<a href="mz.html">免责声明</a>
|
||
</footer>
|
||
</body>
|
||
</html>
|