前言： 搜索框是網站中常用的工具，而帶放大鏡的搜索框更是提高用戶體驗的一種方法。本文將介紹如何使用HTML和CSS實現帶放大鏡的搜索框，同時提供示例代碼。 正文： 首先，我們需要一個基本的搜索框，它可以使用HTML中的元素來創建。以下是一個簡單的搜索框代碼：

<input type="text" name="search" placeholder="Search">

接下來，我們需要為搜索框添加一個放大鏡圖標，這可以使用HTML中的元素來創建。在這個例子中，我們將使用一個SVG圖標，因為它不會失真或模糊。 以下是示例代碼：

<input type="text" name="search" placeholder="Search" class="search-input">
<img src="search.svg" alt="search" class="search-icon">

現在，我們需要使用CSS使搜索框和放大鏡圖標排列在一起。我們可以通過使用CSS中的float和padding屬性來實現。 以下是示例代碼：

.search-input {
float: left;
padding: 10px;
}
.search-icon {
float: right;
}

最后，我們需要使放大鏡圖標具有縮放功能。我們可以使用CSS中的transform屬性和:hover偽類來實現。以下是示例代碼：

.search-icon:hover {
transform: scale(1.5);
}

完整的代碼如下所示：

<style>
.search-input {
float: left;
padding: 10px;
}
.search-icon {
float: right;
}
.search-icon:hover {
transform: scale(1.5);
}
</style>
<input type="text" name="search" placeholder="Search" class="search-input">
<img src="search.svg" alt="search" class="search-icon">

結論： 通過使用HTML和CSS，我們可以輕松地創建帶放大鏡的搜索框，提高了用戶的搜索體驗。代碼簡單易懂，也方便大家使用。