列表樣式的使用-CSS入門基礎（018）

蝦米大王發表於2020-12-18
CSS

今天我們分享關於列表樣式的內容。

 

列表項list-sytle-type：

 

在HTML學習中，我們知道有有序列表和無序列表，都是使用type屬性來定義的。

 

1、有序列表

 

 

<ol type="屬性值">  <li>有序列表</li>  <li>有序列表</li>  <li>有序列表</li></ol>

 

 屬性值type：

1，數字1、2、3……；

a，小寫英文字母a、b、c……；

A，大寫英文字母A、B、C……；

i，小寫羅馬數字i、ii、iii……；

I，大寫羅馬字母I、II、III……；

 

2、無序列表

 

​​​​​​​

<ul type="屬性值">  <li>無序列表</li>  <li>無序列表</li>  <li>無序列表</li></ul>

 

屬性值type：

dics，預設值，實心圓；

circle，空心圓；

square，實心正方形；

 

在css中，不管是有序列表還是無序列表，都統一使用list-style-type屬性來定義。

 

語法：

 

 

list-style-type:屬性值；

 

有序列表list-style-type屬性取值
屬性值說明
decimal預設值，數字1、2、3
lower-roman小寫羅馬數字i、ii、iii
upper-roman大寫羅馬數字I、II、III
lower-alpha小寫英文字母a、b、c
upper-alpha大寫英文字母A、B、C

 

無序列表list-style-type屬性取值
屬性值說明
disc預設值，實心圓
circle空心圓
square實行正方形

 

去除列表項符號
屬性值說明
none無，去除

 

示例程式碼：

 

​​​​​​​

<html>  <head>    <title>列表項</title>    <style type="text/css">      #ol1 { list-style-type:decimal;}      #ol2 { list-style-type:lower-roman;}      #ol3 { list-style-type:upper-roman;}      #ol4 { list-style-type:lower-alpha;}      #ol5 { list-style-type:upper-alpha;}      #ul1 { list-style-type:disc;}      #ul2 { list-style-type:circle;}      #ul3 { list-style-type:square;}    </style>  </head>  <body>    <p>有序列表</p>    <ol id="ol1">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ol>    <ol id="ol2">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ol>    <ol id="ol3">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ol>    <ol id="ol4">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ol>    <ol id="ol5">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ol>    <p>無序列表</p>    <ul id="ul1">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ul>    <ul id="ul2">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ul>    <ul id="ul3">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ul>  </body></html>

 

示例程式碼：

 

​​​​​​​

<html>  <head>    <title>列表項</title>    <style type="text/css">      ol { list-style-type:none;}      ul { list-style-type:none;}    </style>  </head>  <body>    <p>有序列表</p>    <ol>      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ol>    <p>無序列表</p>    <ul>      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ul>  </body></html>

 

在實際開發中，我們經常需要用到這個小技巧，去除列表項預設符號。

 

自定義列表項符號list-style-image:

 

預設的列表符號比較醜，我們可以使用自定義的列表項美化網頁的，在css中，可以使用list-style-image屬性來自定義符號。

 

語法：

 

 

list-style-image:url("影像地址");

 

影像地址可以是相對地址，也可以是絕對地址。

 

示例程式碼：

 

​​​​​​​

<html>  <head>    <title>自定義列表</title>    <style type="text/css">      ul {        list-style-image: url("images/2.png");      }    </style>  </head>  <body>    <ul>      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ul>  </body></html>

 

自定義列表項符號，實際上就是將原來的符號用一張圖片替換了。這個在實際開發中用的不是太多。

 

 

 

 

 

 

圖片

相關文章