欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css搜索放大鏡圖

CSS
呂致盈2年前13瀏覽0評論

搜索放大鏡圖是網站中非常常見的一個圖標之一。其主要目的是為了讓用戶更方便快速地進行搜索。如果你想要在網站中添加一個搜索放大鏡圖，那么你需要熟悉一些基本的CSS知識。

首先，在HTML文檔中添加一個搜索圖標，你可以使用pre標簽來包含CSS樣式，代碼如下：

<html>
<head>
<title>搜索放大鏡圖</title>
<style>
/*搜索圖標樣式*/
.search-icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('search-icon.png');
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div>
<span class="search-icon"></span>
<input type="text" placeholder="搜索...">
</div>
</body>
</html>

代碼解釋：

.search-icon {
display: inline-block;     /*設置元素為行內塊元素*/
width: 16px;               /*設置寬度為16個像素*/
height: 16px;              /*設置高度為16個像素*/
background-image: url('search-icon.png');    /*設置樣式背景圖片*/
background-repeat: no-repeat;                /*設置背景圖片不會平鋪*/
background-size: cover;                      /*設置背景圖片平鋪滿整個元素*/
}

上面的代碼就完成了一個簡單且常見的搜索放大鏡圖的添加。如果你想要更改搜索圖標的大小、顏色等樣式，只需要在樣式中做出相應的更改即可。