无序列表空心圆代码_列表样式的使用CSS入门基础（018）

---

今天我们分享关于列表样式的内容。列表项list-sytle-type：在HTML学习中，我们知道有有序列表和无序列表，都是使用type属性来定义的。1、有序列表

  有序列表  有序列表  有序列表 属性值type：1，数字1、2、3……；a，小写英文字母a、b、c……；A，大写英文字母A、B、C……；i，小写罗马数字i、ii、iii……；I，大写罗马字母I、II、III……；2、无序列表

  无序列表  无序列表  无序列表

属性值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	无，去除

示例代码：

      列表项          #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;}            有序列表    

      HTML      CSS      Javascript      HTML CSS Javascript      HTML CSS Javascript      HTML CSS Javascript      HTML CSS Javascript     无序列表     HTML CSS Javascript      HTML CSS Javascript      HTML CSS Javascript示例代码：

      列表项          ol { list-style-type:none;}      ul { list-style-type:none;}            有序列表    

      HTML      CSS      Javascript        无序列表         HTML     CSS     Javascript      在实际开发中，我们经常需要用到这个小技巧，去除列表项默认符号。自定义列表项符号list-style-image:默认的列表符号比较丑，我们可以使用自定义的列表项美化网页的，在css中，可以使用list-style-image属性来自定义符号。语法：

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

图像地址可以是相对地址，也可以是绝对地址。示例代码：

      自定义列表          ul {        list-style-image: url("images/2.png");      }                  HTML      CSS      Javascript      

自定义列表项符号，实际上就是将原来的符号用一张图片替换了。这个在实际开发中用的不是太多。

---