CSS 中的 ul(unordered list,無序列表)是一個很重要的元素,可以用于展示一些不需要特定排序的列表,比如導(dǎo)航菜單、目錄等等。
在 CSS 中,我們可以利用 ul 元素的特性來設(shè)置其樣式,包括字體、顏色、行高、背景等等。
/* 設(shè)置 ul 元素的樣式 */ ul { list-style: none; /* 去除默認(rèn)的圓點(diǎn)樣式 */ margin: 0; /* 去除默認(rèn)的邊距 */ padding: 0; /* 去除默認(rèn)的內(nèi)邊距 */ } /* 設(shè)置 li 元素的樣式 */ li { margin-bottom: 10px; /* 設(shè)置每個列表項(xiàng)的下邊距 */ } /* 設(shè)置a標(biāo)簽樣式,美化鏈接樣式 */ a { text-decoration: none; color: #333; } /* 鼠標(biāo)懸浮時,鏈接樣式的變化 */ a:hover { color: #f00; }
其中,list-style 屬性用于去除 ul 元素默認(rèn)的圓點(diǎn)樣式,margin 和 padding 屬性則用于去除默認(rèn)的邊距和內(nèi)邊距。
在設(shè)置好樣式后,我們可以在 ul 元素中添加 li(list item,列表項(xiàng))元素,來創(chuàng)建我們所需的列表。例如:
<ul> <li><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">技術(shù)</a></li> <li><a href="#">關(guān)于我們</a></li> </ul>
上述代碼將創(chuàng)建一個簡單的導(dǎo)航菜單,其中每個列表項(xiàng)都包含一個鏈接。我們可以通過 CSS 設(shè)置每個鏈接的字體、顏色等樣式,讓菜單更加美觀。