首頁 >web前端 >css教學 >css中列表樣式是什麼

css中列表樣式是什麼

coldplay.xixi
coldplay.xixi原創
2021-03-21 17:56:253397瀏覽

css中列表樣式是:1、css有序列表【ol】和css無序列表【ul】;2、css列表標號樣式【list-style-type】;3、css標號樣式的顯示方式【list-style-position】。

css中列表樣式是什麼

本教學操作環境:windows7系統、css3版,DELL G3電腦。

css中列表樣式是:

1、css有序列表(ol)和css無序列表(ul)

 

  list.html
 
  <!doctypehtml><html><head>
 
  <metacharset="utf-8">
 
  <title>列表样式</title>
 
  <linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
 
  <p>
 
  <ul>
 
  <li>水果<ol>
 
  <li>苹果</li>
 
  <li>香蕉</li>
 
  <li>梨子</li>
 
  </ol>
 
  </li>
 
  </ul>
 
  </p></body></html>

 

2、css清單標號樣式list-style-type

 

  屬性值:

  •   circle;空心圓

  • #  disc;實心圓

  •   decimal;數字

  list.css
 
  ul>li{
 
  list-style-type:circle;
 
  }
 
  ul>li>ol>li{
 
  list-style-type:disc;
 
  }

 

3、css標號樣式的顯示方式list-style-position

 

  屬性值:outside(在文字之外,預設)

 

#  inside(與文字一起)

 

  list.css
 
  ul{
 
  text-align:center;
 
  list-style-position:outside;
 
  }
 
  ul>li{
 
  list-style-type:circle;
 
  }
 
  ul>li>ol>li{
 
  list-style-type:disc;
 
  }

#相關教學推薦:CSS影片教學

#

以上是css中列表樣式是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn