無序列表在網(wǎng)頁排版中經(jīng)常會被使用到,它可以非常方便地展示一系列相關(guān)的內(nèi)容。在CSS中,我們可以通過以下代碼來定義無序列表:
ul { list-style-type: disc; /*使用實心圓點作為標志*/ /*list-style-type可以設(shè)置多種類型的標志,例如none、square等*/ margin-left: 20px; /*設(shè)置左邊距為20像素*/ /*margin-left可以調(diào)整整個列表相對于父容器的位置*/ } li { /*對于每一個列表項都可以單獨設(shè)置樣式*/ text-indent: -1em; /*使用負縮進來將標志和內(nèi)容分開*/ /*text-indent可以將文本向右縮進*/ margin-top: 10px; /*設(shè)置與上一個列表項的距離為10像素*/ /*margin-top可以調(diào)整列表項與上方元素的間距*/ }
上面的代碼是比較簡單的無序列表樣式的定義,還可以根據(jù)實際需要進行更加細致的調(diào)整。同時,在網(wǎng)頁中,我們也可以對無序列表進行更加復(fù)雜的樣式設(shè)計,例如改變每個列表項內(nèi)部的樣式(例如字體排版、顏色等),或為不同的列表項對應(yīng)不同的圖標。