CSS是網頁設計中的重要一環，它可以讓網頁看起來更加美觀、易讀。不僅如此，CSS還可以幫助我們實現更多的功能，如友聯機。

友聯機是指在一個網站頁面中，將其他網站的鏈接放置于其中以便用戶使用。這種方式可以幫助網站拓展訪問量、增加與其他網站的合作關系。使用CSS實現友聯機其實很簡單，只需使用class選擇器就可以了。

.friend-link {
width: 200px;
height: 120px;
background-color: #f5f5f5;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
text-align: center;
}
.friend-link a {
text-decoration: none;
color: #333;
}
.friend-link a:hover {
color: #00bfff;
}

上述代碼中，我們為友聯機關鍵字設置了一個class選擇器，這樣可以批量地定義樣式。在.friend-link中，我們設置了寬度、高度、背景色、圓角等樣式屬性，使友聯機可以看起來更加美觀。同時，我們通過padding屬性和text-align屬性來使友聯機中的文字居中顯示。在.friend-link a中，我們設置了鏈接的樣式，即去除下劃線、改變字體顏色。在.friend-link a:hover中，則在鼠標懸停時改變鏈接的顏色，以便用戶知道該鏈接可以被點擊。

在實際使用中，我們只需要將上述代碼放置在網頁的頭部，在友聯機的位置使用如下代碼就可以了：

<div class="friend-link">
<a >Example</a>
</div>

這樣，我們就可以輕松地在網頁中實現友聯機了！