dw搜索栏制作,vps有流量限制吗,cloud hosting vs vps,推荐一个国外的vps,云主机峰值计费

🗣 Wd提问: dw搜索栏制作

🤖 Ai回答:
搜索栏设计与实现

我将为您创建一个美观实用的搜索栏，包含基础样式和交互功能。

设计思路
现代化简洁设计，带有轻微阴影和过渡效果
包含搜索图标和清除按钮
支持响应式设计
添加悬停和聚焦状态反馈

下面是完整实现代码：

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title现代化搜索栏</title
<style
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, f5f7fa 0%, c3cfe2 100%);
padding: 20px;
}

.container {
width: 100%;
max-width: 800px;
text-align: center;
padding: 30px;
}

h1 {
color: 2c3e50;
margin-bottom: 10px;
font-weight: 600;
}

.description {
color: 546e7a;
margin-bottom: 40px;
font-size: 1.1rem;
}

.search-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}

.search-box {
width: 100%;
padding: 18px 50px 18px 20px;
font-size: 18px;
border: none;
border-radius: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
outline: none;
color: 333;
}

.search-box:focus {
box-shadow: 0 4px 25px rgba(0, 123, 255, 0.25);
transform: translateY(-2px);
}

.search-box::placeholder {
color: aaa;
}

.search-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: 777;
cursor: pointer;
background: none;
border: none;
font-size: 20px;
transition: color 0.3s ease;
}

.search-icon:hover {
color: 3498db;
}

.search-options {
display: flex;
justify-content: center;
margin-top: 25px;
flex-wrap: wrap;
gap: 10px;
}

.search-type {
padding: 8px 16px;
background: white;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-type.active {
background: 3498db;
color: white;
}

.search-type:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.examples {
margin-top: 30px;
text-align: left;
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.examples h3 {
color: 2c3e50;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid eee;
}

.example-item {
padding: 10px;
margin: 8px 0;
border-radius: 8px;
transition: background 0.2s;
cursor: pointer;
display: flex;
align-items: center;
}

.example-item:hover {
background: f8f9fa;
}

.example-item::before {
content: 🔍;
margin-right: 10px;
}

@media (max-width: 600px) {
.search-box {
padding: 14px 45px 14px 15px;
font-size: 16px;
}

.search-icon {
right: 15px;
font-size: 18px;
}
}
</style
</head
<body
<div class=container
<h1智能搜索栏</h1
<p class=description输入关键词开始搜索，支持多种搜索类型</p

<div class=search-container
<input type=text class=search-box placeholder=搜索..、id=searchInput
<button class=search-icon id=searchButton🔍</button
</div

<div class=search-options
<div class=search-type active网页</div
<div class=search-type图片</div
<div class=search-type视频</div
<div class=search-type新闻</div
<div class=search-type地图</div
</div

<div class=examples
<h3热门搜索</h3
<div class=example-item人工智能最新进展</div
<div class=example-item前端开发教程</div
<div class=example-item2023设计趋势</div
<div class=example-itemJavaScript框架比较</div
<div class=example-item响应式网页设计</div
</div
</div

<script
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const searchTypes = document.querySelectorAll('.search-type');
const exampleItems = document.querySelectorAll('.example-item');

// 搜索类型切换
searchTypes.forEach(type = {
type.addEventListener('click', function() {
searchTypes.forEach(t = t.classList.remove('active'));
this.classList.add('active');
});
});

// 搜索按钮点击事件
searchButton.addEventListener('click', function() {
performSearch();
});

// 回车键搜索
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
performSearch();
}
});

// 示例点击事件
exampleItems.forEach(item = {
item.addEventListener('click', function() {
searchInput.value = this.textContent;
performSearch();
});
});

// 执行搜索函数
function performSearch() {
const query = searchInput.value.trim();
const activeType = document.querySelector('.search-type.active').textContent;

if (query) {
// 在实际应用中，这里会跳转到搜索结果页或发送API请求
alert(`正在${activeType}中搜索: ${query}`);
// 通常会是: window.location.href = `/search?q=${encodeURIComponent(query)}&type=${activeType}`;
} else {
alert('请输入搜索关键词');
searchInput.focus();
}
}

// 输入框获得焦点时轻微放大
searchInput.addEventListener('focus', function() {
this.parentElement.style.transform = 'scale(1.02)';
});

searchInput.addEventListener('blur', function() {
this.parentElement.style.transform = 'scale(1)';
});
});
</script
</body
</html

功能说明

1、搜索输入：用户可以输入关键词进行搜索
2、搜索类型：提供网页、图片、视频等不同搜索类型选择
3、热门搜索：显示常用搜索建议，点击可直接搜索
4、交互效果：
输入框聚焦时有放大效果和阴影变化
搜索类型选择有激活状态
示例搜索项有点击效果

使用方法

1、在输入框中输入搜索关键词
2、选择搜索类型（可选）
3、点击搜索图标或按回车键执行搜索
4、或者直接点击热门搜索示例进行搜索

这个搜索栏设计简洁现代，具有良好的用户体验和视觉效果，适合大多数网站使用。

Ai作答

📣 商家广告：