| 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>
 |