用前端做一个专属搜索框要求如下: 1.上面一行有百度,必应,谷歌,csdn等网址名称,用来控制切换下面的搜索框 2.下面有漂亮的搜索框链接到上面的网址 界面要漂亮,样式炫酷
时间: 2024-06-09 13:08:02 浏览: 12
好的,实现这个搜索框,你需要以下技术:
- HTML:用来搭建网页骨架
- CSS:用来美化网页样式
- JavaScript:用来实现搜索框的交互功能
首先,我们需要定义一个 HTML 结构,包括一个上方的导航栏和一个下方的搜索框。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style>
/* 导航栏样式 */
#nav {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background-color: #333;
color: #fff;
}
#nav a {
margin: 0 10px;
color: #fff;
text-decoration: none;
}
/* 搜索框样式 */
#search {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
background-color: #f5f5f5;
}
#search input {
width: 50%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 24px;
}
#search button {
margin-left: 10px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 24px;
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<nav id="nav">
<a href="https://www.baidu.com/">百度</a>
<a href="https://cn.bing.com/">必应</a>
<a href="https://www.google.com/">谷歌</a>
<a href="https://www.csdn.net/">CSDN</a>
</nav>
<div id="search">
<input type="text" placeholder="请输入搜索内容">
<button>搜索</button>
</div>
</body>
</html>
```
接下来,我们需要使用 JavaScript 来实现导航栏切换和搜索功能。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style>
/* 导航栏样式 */
#nav {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background-color: #333;
color: #fff;
}
#nav a {
margin: 0 10px;
color: #fff;
text-decoration: none;
}
/* 搜索框样式 */
#search {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
background-color: #f5f5f5;
}
#search input {
width: 50%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 24px;
}
#search button {
margin-left: 10px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 24px;
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<nav id="nav">
<a href="#" id="baidu">百度</a>
<a href="#" id="bing">必应</a>
<a href="#" id="google">谷歌</a>
<a href="#" id="csdn">CSDN</a>
</nav>
<div id="search">
<input type="text" placeholder="请输入搜索内容">
<button id="searchBtn">搜索</button>
</div>
<script>
var baiduLink = document.getElementById('baidu');
var bingLink = document.getElementById('bing');
var googleLink = document.getElementById('google');
var csdnLink = document.getElementById('csdn');
var searchBtn = document.getElementById('searchBtn');
var searchInput = document.querySelector('#search input');
// 导航栏切换
baiduLink.addEventListener('click', function() {
searchInput.setAttribute('placeholder', '在百度中搜索');
searchBtn.setAttribute('onclick', 'window.open("https://www.baidu.com/s?wd=" + searchInput.value)');
});
bingLink.addEventListener('click', function() {
searchInput.setAttribute('placeholder', '在必应中搜索');
searchBtn.setAttribute('onclick', 'window.open("https://cn.bing.com/search?q=" + searchInput.value)');
});
googleLink.addEventListener('click', function() {
searchInput.setAttribute('placeholder', '在谷歌中搜索');
searchBtn.setAttribute('onclick', 'window.open("https://www.google.com/search?q=" + searchInput.value)');
});
csdnLink.addEventListener('click', function() {
searchInput.setAttribute('placeholder', '在CSDN中搜索');
searchBtn.setAttribute('onclick', 'window.open("https://so.csdn.net/so/search/s.do?q=" + searchInput.value)');
});
// 回车搜索
searchInput.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
searchBtn.click();
}
});
</script>
</body>
</html>
```
这样,一个漂亮的搜索框就完成了!你可以根据自己的喜好修改样式和添加其他搜索引擎。