124 lines
8.1 KiB
HTML
124 lines
8.1 KiB
HTML
|
<EFBFBD><EFBFBD><!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>Pl<50>N d"}</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'); /* <00><><EFBFBD>fbc:N<>`<60>v<EFBFBD>VGrURL */
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
}
|
|||
|
|
.search-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 20px; /* <00>m<EFBFBD>RN<>N<EFBFBD><4E>ݍ */
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* <00>T<EFBFBD>^_<><5F><EFBFBD><EFBFBD> */
|
|||
|
|
@media (max-width: 600px) {
|
|||
|
|
.search-container {
|
|||
|
|
margin: 10px; /* (W\O\U^
|
|||
|
|
N<EFBFBD>Q\<5C><>ݍ */
|
|||
|
|
}
|
|||
|
|
.search-box {
|
|||
|
|
width: 80%; /* (W\O\U^
|
|||
|
|
N<03>te d"}Fh<46>[<5B>^ */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="search-container">
|
|||
|
|
<input type="text" id="search-box" class="search-box" placeholder="<00><><EFBFBD><EFBFBD>eQ d"}<7D>Q<EFBFBD>[">
|
|||
|
|
<button id="search-btn" class="search-btn"> d"}</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"> d<>r
|
|||
|
|
</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"> ~v<>^
|
|||
|
|
</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 d"}
|
|||
|
|
</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">MQ#<23><>Xf</a>
|
|||
|
|
</footer>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|