列表样式的使用-CSS入门基础(018)

今天我们分享关于列表样式的内容。

 

列表项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>

 

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

 

 

 


 

 

 

图片

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页