在網(wǎng)頁設(shè)計中，我們經(jīng)常會見到一個小鎖圖標(biāo)，它代表著該頁面是安全的。這個小鎖圖標(biāo)的出現(xiàn)是因為在該頁面使用了SSL（Secure Sockets Layer，安全套接層）協(xié)議，通過該協(xié)議可以對網(wǎng)站進行數(shù)據(jù)傳輸加密，防止信息被惡意竊取。

那么，如何在網(wǎng)站中添加這樣的小鎖圖標(biāo)呢？答案是通過CSS代碼。CSS即層疊樣式表（Cascading Style Sheets），可以用于控制網(wǎng)頁的樣式和布局。

.lock-icon {
width: 20px;
height: 20px;
background-image: url('lock-icon.png');
background-size: cover;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}

上面的代碼就是一個簡單的鎖圖標(biāo)CSS樣式，通過定義寬度、高度、背景圖片和顯示方式等屬性來實現(xiàn)圖標(biāo)的樣式效果。其中，display: inline-block;和vertical-align: middle;可以讓鎖圖標(biāo)垂直居中顯示，margin-right: 5px;可以在圖標(biāo)后留出5個像素的間隔。

在網(wǎng)頁中使用這個鎖圖標(biāo)CSS樣式非常簡單，只需要在HTML代碼中，添加一個class為lock-icon的元素即可：

<p>本站已使用SSL協(xié)議保證信息安全<span class="lock-icon"></span></p>

通過這樣的方式，就可以在網(wǎng)頁中輕松地添加一個小鎖圖標(biāo)，提醒用戶該頁面是安全的。