XiYun/sosuo.html
2024-08-29 08:50:16 +08:00

122 lines
8.1 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>