12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <!DOCTYPE html>
- <html>
- <head>
-
- <style>
- /* 搜索栏CSS 样式 */
- .search-container {
- display: flex;
- align-items: center;
- width: 300px;
- }
- .search-input {
- flex: 1;
- padding: 8px;
- font-size: 16px;
- border: 1px solid #ccc;
- border-radius: 4px;
- }
- .search-input::placeholder {
- color: #999;
- opacity: 1;
- }
- .search-button {
- padding: 8px 12px;
- background-color: #4CAF50;
- color: white;
- font-size: 16px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <div class="search-container">
- <input type="text" id="search-input" class="search-input" placeholder="Enter your search term">
- <button id="search-button" class="search-button">Search</button>
- </div>
- <script>
- // JavaScript 代码
- const searchButton = document.getElementById("search-button");
- const searchInput = document.getElementById("search-input");
- searchButton.addEventListener("click", function() {
- const searchTerm = searchInput.value;
- // 在这里执行搜索操作,可以根据需求进行相应的处理
- console.log("Search term:", searchTerm);
- });
- </script>
- </body>
- </html>
|