首页搜索框html代码小米

搜索框html代码小米

时间: 2024-12-31 13:06:13 浏览: 2

在HTML中创建一个简单的搜索框，通常包括`<input>`元素用于用户输入，加上一个提交按钮。以下是一个基本的小米风格的搜索框示例： ```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; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 1px solid #ccc; outline: none; } button { background-color: #f44336; /* 小米主题色 */ color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } button:hover { opacity: 0.8; } </style> </head> <body> <div class="search-container"> <input type="text" placeholder="请输入搜索关键词..."> <button type="submit">搜索</button> </div> </body> </html> ``` 这个例子中，`.search-container`设置了容器样式，`input`和`button`分别表示文本输入框和提交按钮。你可以根据实际需求调整样式和尺寸。

阅读全文