CSS可以幫助我們美化和布局我們的網頁。其中一個使用CSS的例子是創建好友列表。在本文中，我們將展示如何使用CSS來創建一個優美的好友列表。

/* 好友列表的CSS代碼 */
.friend-list {
list-style: none;
padding: 0;
margin: 0;
}
.friend {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.friend img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.friend span {
font-size: 18px;
font-weight: bold;
}
.friend .status {
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: auto;
}
.friend .status.online {
background-color: green;
}
.friend .status.offline {
background-color: red;
}

為了實現好友列表，我們需要先創建一個HTML列表。接下來，我們可以使用CSS來改變我們列表中的元素外觀和布局。例如，我們可以使用“list-style: none”屬性來移除默認的列表符號，使用“display: flex”屬性和“align-items: center”來使每項顯示為一行，并使圖像和文本垂直居中，使用“margin-bottom”屬性來為每項添加下邊距。

我們還可以使用CSS來裝飾好友圖像，如添加圓角等。我們可以使用“font-size”和“font-weight”屬性來改變好友文字的大小和粗細程度。

最后，我們使用“margin-left: auto”屬性來使狀態部分始終靠右對齊。我們還為不同的狀態使用“online”和“offline”類并設置對應的背景顏色。

通過以上CSS代碼的調整，我們可以輕松地創建一個漂亮的好友列表。