首页用js和css制作小米搜索框

用js和css制作小米搜索框

时间: 2024-12-14 16:13:29 浏览: 28

要用JavaScript和CSS创建一个类似小米风格的搜索框，你可以按照以下步骤操作： 1. **HTML结构**: ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="search-container"> <input type="text" id="search-input" placeholder="搜索..."> <button class="search-button">搜索</button> </div> <script src="script.js"></script> </body> </html> ``` 2. **CSS样式** (styles.css)： ```css .search-container { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #ccc; } #search-input { width: 70%; height: 40px; font-size: 16px; border-radius: 5px; border: none; outline: none; box-shadow: none; padding-left: 15px; } .search-button { background-color: #f09c00; /* 小米主题颜色 */ color: white; border: none; border-radius: 5px; padding: 10px 20px; margin-left: 15px; cursor: pointer; } ``` 3. **JavaScript交互** (script.js) (可选，如果需要搜索功能)： ```javascript document.querySelector('.search-button').addEventListener('click', function() { var input = document.getElementById('search-input'); if (input.value.trim()) { // 这里可以添加实际的搜索功能，比如发送请求到服务器 console.log("Search triggered with:", input.value); } }); ```

阅读全文