<!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: 'Microsoft YaHei', sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%); min-height: 100vh; padding: 20px; display: flex; flex-direction: column; align-items: center; } .header { text-align: center; margin: 40px 0 10px; /* 减小搜索框上方间距 */ width: 100%; } .logo { font-size: 2.8rem; font-weight: bold; background: linear-gradient(90deg, #4a6ee0, #8e54e9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; letter-spacing: -2px; } .tagline { color: #6c757d; font-size: 1.1rem; margin-bottom: 20px; } .search-container { display: flex; max-width: 650px; width: 100%; margin: 0 auto 16px; /* 搜索框与下方组件距离设为16px */ position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 50px; overflow: hidden; transition: all 0.3s ease; } .search-container:focus-within { box-shadow: 0 8px 25px rgba(74, 110, 224, 0.3); } #searchInput { flex: 1; padding: 17px 25px; font-size: 1.1rem; border: none; outline: none; background: white; caret-color: #4a6ee0; } #searchButton { padding: 0 35px; background: linear-gradient(90deg, #4a6ee0, #8e54e9); color: white; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.3s; } #searchButton:hover { opacity: 0.9; } #voiceButton { padding: 0 20px; background: #f8f9fa; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } #voiceButton:hover { background: #e9ecef; } .voice-icon { width: 24px; height: 24px; fill: #4a6ee0; } #voiceStatus { text-align: center; height: 22px; color: #8e54e9; margin-top: 6px; font-size: 0.9rem; transition: all 0.3s; } /* 图标链接容器:紧凑布局,6个一行 */ .icon-links-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; /* 设置组件之间间隔为1像素 */ max-width: 720px; width: 100%; margin: 0 auto; padding: 10px; background: #e9ecef; border-radius: 12px; } .icon-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: all 0.3s ease; padding: 10px 0; } .icon-link:hover { transform: translateY(-5px); } .icon-link:hover .icon-title { color: #4a6ee0; opacity: 1; } .icon-wrapper { width: 60px; height: 60px; border-radius: 18px; background: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; margin-bottom: 8px; } .icon-link:hover .icon-wrapper { transform: scale(1.1); box-shadow: 0 8px 20px rgba(74, 110, 224, 0.25); } .icon-wrapper img { width: 32px; height: 32px; object-fit: contain; transition: all 0.3s ease; } .icon-link:hover .icon-wrapper img { transform: scale(1.15); } .icon-title { color: #495057; font-size: 0.85rem; font-weight: 500; text-align: center; opacity: 0.9; transition: all 0.3s ease; } .footer { margin-top: 30px; text-align: center; color: #6c757d; font-size: 0.9rem; padding: 20px; } /* 响应式适配 */ @media (max-width: 768px) { .icon-links-container { grid-template-columns: repeat(4, 1fr); gap: 2px; } .icon-wrapper { width: 54px; height: 54px; } .icon-wrapper img { width: 28px; height: 28px; } } @media (max-width: 480px) { .icon-links-container { grid-template-columns: repeat(3, 1fr); gap: 3px; } .icon-wrapper { width: 48px; height: 48px; border-radius: 14px; } .icon-wrapper img { width: 24px; height: 24px; } .icon-title { font-size: 0.8rem; } } </style> </head> <body> <div class="header"> <div class="logo">SearchHub</div> <div class="tagline">简洁 · 快速 · 智能搜索体验</div> <div class="search-container"> <input type="text" id="searchInput" placeholder="输入搜索内容..." autocomplete="off"> <button id="voiceButton"> <svg class="voice-icon" viewBox="0 0 24 24"> <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/> <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/> </svg> </button> <button id="searchButton">搜索</button> </div> <div id="voiceStatus"></div> </div> <div class="icon-links-container" id="iconLinksContainer"> <!-- 图标链接将通过JS动态加载 --> </div> <div class="footer"> <p>© 2023 简洁搜索引擎 | 隐私政策 | 使用条款</p> </div> <script> const searchInput = document.getElementById('searchInput'); const voiceButton = document.getElementById('voiceButton'); const voiceStatus = document.getElementById('voiceStatus'); const searchButton = document.getElementById('searchButton'); const iconLinksContainer = document.getElementById('iconLinksContainer'); // 扩展至24个常用网站 const iconLinks = [ { id: "baidu", title: "百度", url: "https://www.baidu.com ", icon: "https://hao123-static.cdn.bcebos.com/cms/2025-10/1760598940310/a176456d5589.png " }, { id: "qq-mail", title: "邮箱", url: "https://mail.qq.com ", icon: "https://mail.qq.com/favicon.ico " }, { id: "netdisk", title: "网盘", url: "https://pan.baidu.com ", icon: "https://pan.baidu.com/favicon.ico " }, { id: "bilibili", title: "B站", url: "https://www.bilibili.com ", icon: "https://www.bilibili.com/favicon.ico " }, { id: "taobao", title: "淘宝", url: "https://www.taobao.com ", icon: "https://www.taobao.com/favicon.ico " }, { id: "zhihu", title: "知乎", url: "https://www.zhihu.com ", icon: "https://static.zhihu.com/heifetz/favicon.ico " }, { id: "163-mail", title: "163邮箱", url: "https://mail.163.com ", icon: "https://mail.163.com/favicon.ico " }, { id: "github", title: "GitHub", url: "https://github.com ", icon: "https://github.githubassets.com/favicons/favicon.png " }, { id: "google", title: "班级优化大师", url: "file:///C:/Users/zdl88/Downloads/my-html.html", icon: "微信图片_20250630221203.jpg" }, { id: "youtube", title: "YouTube", url: "https://www.youtube.com ", icon: "https://www.youtube.com/favicon.ico " }, { id: "wechat", title: "微信", url: "https://wx.qq.com ", icon: "https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico " }, { id: "jd", title: "京东", url: "https://www.jd.com ", icon: "https://www.jd.com/favicon.ico " }, { id: "weibo", title: "微博", url: "https://weibo.com ", icon: "https://weibo.cn/favicon.ico " }, { id: "alipay", title: "支付宝", url: "https://www.alipay.com ", icon: "https://render.alipay.com/p/c/k2dx0185 " }, { id: "toutiao", title: "头条", url: "https://www.toutiao.com ", icon: "https://m.toutiao.com/favicon.ico " }, { id: "kuaishou", title: "快手", url: "https://www.kuaishou.com ", icon: "https://www.kuaishou.com/favicon.ico " }, { id: "douyin", title: "抖音", url: "https://www.douyin.com ", icon: "https://www.douyin.com/favicon.ico " }, { id: "xiaomi", title: "小米", url: "https://www.mi.com ", icon: "https://www.mi.com/favicon.ico " }, { id: "huawei", title: "华为", url: "https://www.huawei.com ", icon: "https://www.huawei.com/favicon.ico " }, { id: "sohu", title: "搜狐", url: "https://www.sohu.com ", icon: "https://www.sohu.com/favicon.ico " }, { id: "sina", title: "新浪", url: "https://www.sina.com.cn ", icon: "https://www.sina.com.cn/favicon.ico " }, { id: "amazon", title: "亚马逊", url: "https://www.amazon.cn ", icon: "https://www.amazon.cn/favicon.ico " }, { id: "netflix", title: "Netflix", url: "https://www.netflix.com ", icon: "https://www.netflix.com/favicon.ico " }, { id: "reddit", title: "Reddit", url: "https://www.reddit.com ", icon: "https://www.reddit.com/favicon.ico " } ]; function renderIconLinks() { iconLinksContainer.innerHTML = ''; iconLinks.forEach(link => { const linkEl = document.createElement('a'); linkEl.className = 'icon-link'; linkEl.href = link.url; linkEl.target = "_blank"; linkEl.title = link.title; linkEl.innerHTML = ` <div class="icon-wrapper"> <img src="${link.icon}" alt="${link.title}"> </div> <div class="icon-title">${link.title}</div> `; iconLinksContainer.appendChild(linkEl); }); } function setupVoiceSearch() { let recognition; try { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; recognition = new SpeechRecognition(); recognition.continuous = false; recognition.lang = 'zh-CN'; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.onstart = () => { voiceStatus.textContent = "正在聆听...请说话"; voiceButton.innerHTML = `<svg class="voice-icon" viewBox="0 0 24 24" style="fill:#e74c3c;"> <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/> <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/> </svg>`; }; recognition.onresult = (event) => { const transcript = event.results[0][0].transcript; searchInput.value = transcript; voiceStatus.textContent = "识别成功"; setTimeout(() => voiceStatus.textContent = "", 3000); }; recognition.onerror = (event) => { console.error('语音识别错误:', event.error); voiceStatus.textContent = `错误: ${event.error}`; setTimeout(() => voiceStatus.textContent = "", 4000); }; recognition.onend = () => { voiceButton.innerHTML = `<svg class="voice-icon" viewBox="0 0 24 24"> <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/> <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/> </svg>`; }; voiceButton.addEventListener('click', () => { try { recognition.start(); } catch (error) { voiceStatus.textContent = "您的浏览器不支持语音识别"; console.error('语音识别启动失败:', error); } }); } catch (error) { voiceButton.disabled = true; voiceButton.innerHTML = `<svg class="voice-icon" viewBox="0 0 24 24" style="fill:#95a5a6;"> <path d="M12 14c0 1.66-1.34 3-3 3s-3-1.34-3-3V5c0-1.66 1.34-3 3-3s3 1.34 3 3v6zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/> </svg>`; voiceStatus.textContent = "您的浏览器不支持语音搜索"; console.error('语音识别初始化失败:', error); } } function setupSearch() { searchButton.addEventListener('click', performSearch); searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') performSearch(); }); function performSearch() { const query = searchInput.value.trim(); if (query) { window.location.href = `https://www.baidu.com/s?wd= ${encodeURIComponent(query)}`; } } } document.addEventListener('DOMContentLoaded', () => { renderIconLinks(); setupVoiceSearch(); setupSearch(); searchInput.addEventListener('focus', () => { document.querySelector('.search-container').style.transform = 'scale(1.02)'; }); searchInput.addEventListener('blur', () => { document.querySelector('.search-container').style.transform = 'scale(1)'; }); }); </script> </body> </html>加上网页背景,去掉小组件,搜索框下面有两个大悬浮窗,悬浮窗都在一行里,左窗里是热搜榜,在百度风云搜索里获取20个,一列10个,右边是新闻,最下面是百度风云热搜榜里的前200个,一列100个,搜索框与悬浮窗为透明,网页背景在网上获取,热门搜索榜在https://top.baidu.com/board里获取
最新发布