html中無序列表的預設樣式及其修改

2021-09-10 17:29:56 字數 1521 閱讀 7943

在我們進行常規的網頁設計的時候經常要用到無序列表;然而在css3中;無序列表

是有預設樣式的,這些預設樣式對我們來說有時候是不合適的。

從上圖可以明顯的看出,列表前面有乙個很可能沒必要存在的黑點!這對我們進

行自由設計是乙個不必要的存在。其實不僅僅是前面的小黑點,它還有另外乙個

預設樣式,那就是邊距,當然,我們也一定希望邊距也是可調的。事實也是

如此,下面我就如何消除黑點和調整邊距進行分別說明。

消除黑點:

我們只須在樣式裡加入 li 即可:

但是有時候我們又想在列表前面加一些其他圖案,而非小黑點,那該怎末辦呢?

你可能首先想到的是插入背景或svg圖案;這當然可以啊。其實,如果你要

求並不高;那麼幸運了,css3提供一些型別供你選擇!

它們有

這樣的:

還有這樣的:

其實這都得益於 list-style 屬性;比如 list-style:circle;list-style:square;就分別

表現出圓圈和方塊了。

預設邊距:

結構樣式

#div1 

ul li

#div2

結果

現在可以明白了吧;列表的上下都存在一定的間距,其實也就是預設的margin

既然是margin,我們就試著寫寫它的樣式;

margin:none;?。。。。。。。。。。。。。。。。。。。。。。。。。沒變化!

這個可以啊,那…

這樣就成功消除了邊距。同樣,只要設定好適當的margin值,就可以根據自己的需要

設定好邊距了!

html預設的樣式

各種html標籤 h1 h6,p,ul,ol,dl 即使沒有給他們定義樣式屬性值,他們在瀏覽器中顯示時,也會具有各種樣式屬性 主要是字型大小和各種間距 這是因為瀏覽器和css給這些標籤設定了預設的樣式屬性值,各種版本的瀏覽器和css可能略有差別,下面列舉的是firefox 1.5 和css 2.1 ...

HTML無序列表 有序列表 定義列表

一 無序列表 ordered list 各個列表專案之間沒有順序,是並列的 type屬性用於設定列表樣式,預設是小圓點 disc circle空心圓圈 square小方塊 通過list style none可以取消 二 有序列表 ordered list type 預設是1,表示專案列表用數字1,2...

html的無序列表個人總結

無序列表 ul unordered list li list item 所謂的無序列表,我小白認為 只是前面沒有序號來分別先後順序 預設使用實心圓作為符號標記 雙擊666title charset utf 8 head 世界第一li 另外可以在ul前加入type屬性,更改列表前的符號標記。type屬...