CSS是一個用于描述網頁樣式的計算機語言，來控制網頁的字體、顏色、大小、布局等等。而在CSS中，<ul>和<li>元素是常常被用到的。

<ul>標簽會創建一個無序列表，通常是用小黑點或其他符號作為列表項的標記，而<li>標簽則代表列表中的每個項目。下面，我們來看看如何運用CSS來定制這些元素的外觀和排列方式。

/*設置無序列表的樣式*/
ul {
list-style-type: disk; /*將默認的圓形列表項符號變為實心圓*/
margin-left: 1em; /*給列表項加上左側外邊距*/
padding-left: 0.5em; /*給列表項加上左側內邊距*/
}
/*設置列表項的樣式*/
li {
margin: 0.7em 0; /*給每個列表項都加上一定的垂直距離，使其不會互相擠在一起*/
}

這段CSS代碼中，我們用了list-style-type: disk;來改變列表項的標記樣式，把它從默認的空心圓形變為實心圓；使用了margin-left: 1em;和padding-left: 0.5em;來控制列表項的外邊距和內邊距；使用margin: 0.7em 0;來給每個列表項都加上一定的垂直距離，從而讓它們之間不會擁擠在一起。

除此之外，我們還可以通過給每個列表項設置不同的樣式，來讓它們變得更加個性化。下面的代碼，例如，給每個列表項都加上了一個彩虹背景：

li:nth-child(1) {
background-color: #ff6b6b;
}
li:nth-child(2) {
background-color: #feca57;
}
li:nth-child(3) {
background-color: #ff9ff3;
}
li:nth-child(4) {
background-color: #48dbfb;
}
li:nth-child(5) {
background-color: #1dd1a1;
}

這段CSS代碼中，我們使用:nth-child()偽類來選中不同位置的列表項，從而給它們分別設置不同的背景顏色。這樣，我們可以輕松實現一個既美觀又實用的列表。