h5無序序列使用css CSS 列表樣式

2021-10-17 09:45:59 字數 1973 閱讀 7450

我們知道在 html 中列表可以分為無序列表、有序列表、定義列表。在網頁中經常可以看到無序列表的使用,例如像導航欄選單、新聞列表、商品分類、展示等,基本都是通過無序列表來實現的。

無序列表中每個列表項前面都會預設帶乙個圓點符號,然而一般我們平時在**上看到的列表樣式,通常前面是沒有圓點符號的,所以我們要如何去掉這個預設的圓點符號呢?這些都可以通過 css 中的列表屬性來實現。

本節要講的 css 中的列表屬性有下面四個:

list-sytle-type 屬性用於設定列表項的標記的型別,和 html 中列表標籤中的 type 屬性類似。

常用值屬性值如下所示:

示例:

下面是乙個沒有新增任何樣式的列表:

如果我們希望去掉列表前面預設的圓點,可以通過將 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學習(9xkd.com)
第一項 第二項 第三項 第四項 第五項第一項 第二項 第三項 第四項 第五項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...