首页帮我写一个web，模仿百度搜索框

帮我写一个web，模仿百度搜索框

时间: 2024-09-23 14:04:48 浏览: 66

要创建一个简单的网页模仿百度搜索框，你可以使用HTML、CSS和JavaScript。首先，我们需要搭建页面的基本结构。这是一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简易百度搜索模拟</title> <style> .search-container { width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; } input[type="text"] { width: 100%; height: 40px; padding: 5px; font-size: 16px; } button { width: 100%; height: 40px; background-color: #0095DD; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="search-container"> <h2>简易百度搜索</h2> <input type="text" id="search-input" placeholder="请输入关键词..."> <button onclick="sendSearch()">搜索</button> </div> <script> function sendSearch() { const query = document.getElementById('search-input').value; // 这里只是一个模拟，实际应用会发送到百度API或其他搜索引擎 console.log(`正在搜索: ${query}`); } </script> </body> </html> ``` 这个例子中： - HTML部分定义了一个包含输入框和按钮的搜索容器，并设置了样式。 - CSS负责美化外观，如设置边框和颜色等。 - JavaScript函数`sendSearch`会在用户点击“搜索”按钮时获取输入框的内容并打印出来，这里仅用于演示，实际应用会需要连接到百度的搜索API。

阅读全文