HTML 漂亮列表代碼 在網站開發過程中，漂亮的列表是一個重要的組成部分之一。通過合理的排版和樣式設置，漂亮的列表可以讓網站看起來更加美觀和專業。本文將為大家介紹 HTML 中如何創建漂亮的列表。 在 HTML 中創建列表，我們可以使用兩個元素：ul 和 li。其中，ul 表示無序列表，li 表示列表項。下面是一個示例：

<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
</ul>

在默認情況下，上面的列表將會顯得非常普通和無聊。為了使其更加漂亮，我們可以使用 CSS 樣式來設置。 下面是一組樣式代碼，可以讓上面的列表變得更加美觀：

<style>
ul {
list-style: none;  /* 去掉原本的符號 */
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;  /* 每個列表項之間的間距 */
padding: 10px;
background-color: #f7f7f7;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加陰影效果 */
transition: all .3s ease-in-out;  /* 添加鼠標懸停效果 */
}
li:hover {
background-color: #e2e2e2;
transform: translateX(10px);
}
</style>

上面的代碼實現了以下效果： - 去掉了原本的符號； - 每個列表項之間有一定的間距； - 列表項有一定的內邊距和圓角邊框； - 添加了陰影效果，使列表項有立體感； - 當鼠標懸停在列表項上時，背景顏色會變淺，同時有一個簡單的懸停動畫效果。 通過以上代碼，我們可以輕松地創建漂亮的列表，提升網站的視覺效果和用戶體驗。