我們知道在 html 中列表可以分為無序列表、有序列表、定義列表。在網頁中經常可以看到無序列表的使用,例如像導航欄選單、新聞列表、商品分類、展示等,基本都是通過無序列表來實現的。
無序列表中每個列表項前面都會預設帶乙個圓點符號,然而一般我們平時在**上看到的列表樣式,通常前面是沒有圓點符號的,所以我們要如何去掉這個預設的圓點符號呢?這些都可以通過 css 中的列表屬性來實現。
本節要講的 css 中的列表屬性有下面四個:
list-sytle-type
屬性用於設定列表項的標記的型別,和 html 中列表標籤中的type
屬性類似。
常用值屬性值如下所示:
在實際應用中,上述幾種屬性值用的最多的還是none
,也就是用於去掉列表項的標記。
示例:
下面是乙個沒有新增任何樣式的列表:
如果我們希望去掉列表前面預設的圓點,可以通過將list-style-type
屬性設定為none
來實現:
ul
在瀏覽器中的演示效果:
list-style-image
屬性用於使用影象來替換列表項的標記。但有一點需要注意,如果我們設定了list-style-image
屬性,這個時候設定的list-sytle-type
屬性將不起作用。一般為了防止某些瀏覽器不支援list-style-image
屬性,我們會設定乙個list-style-type
屬性來替代。
示例:
ul
在瀏覽器中的演示效果:
list-style-position
屬性用於設定在何處放置列表項標記。
屬性值有如下所示:
示例:
例如我們可以設定兩組不同的列表,分別將list-style-position
屬性設定為outside
和inside
來進行對比:
css 樣式**:
.ul1
.ul2
在瀏覽器中的演示效果:
可以明顯的看到,第一組列表的標記放置在文字內,第二組列表的標記位於文字的左側。
list-style
屬性是乙個簡寫屬性,是上述幾個列表屬性的簡寫形式,用於把所有列表的屬性設定在乙個宣告中。
屬性設定順序為:list-style-type
、list-style-position
、list-style-image
,也可以不設定其中某個屬性,如果不設定則採用預設值。
示例:
例如設定乙個簡寫列表樣式,其中list-style-type
屬性值為square
、list-style-position
屬性值為inside
、list-style-image
屬性值為url(./flower.png)
:
ul
在瀏覽器中的演示效果:
本節我們講了 css 中的幾個列表樣式,一般我們用的最多的就是如何去掉列表項的預設標記,即list-style-type:none
。
h5無序序列使用css CSS 列表樣式
我們知道在 html 中列表可以分為無序列表 有序列表 定義列表。在網頁中經常可以看到無序列表的使用,例如像導航欄選單 新聞列表 商品分類 展示等,基本都是通過無序列表來實現的。無序列表中每個列表項前面都會預設帶乙個圓點符號,然而一般我們平時在 上看到的列表樣式,通常前面是沒有圓點符號的,所以我們要...
H5使用Manifest離線快取
1.mime type宣告 以apache為例,我們需要在httpd.conf中加上 2.在html檔案中引入manifest檔案 3.manifest檔案語法 cache manifest version 1.0 cache style default.css images sound icon....
使用H5實現機械人臉
效果圖 在鼻子 眼睛 嘴巴上 單擊的時候,有特殊效果,鼻子效果如下 頁面靜態 如下 樣式修飾如下 men face left,right,nose,mouse left right nose mouse left hover right hover nose hover mouse hover le...