列表样式的使用-CSS入门基础（018）

最新推荐文章于 2024-01-29 01:01:03 发布

虾米大王

最新推荐文章于 2024-01-29 01:01:03 发布

阅读量659

点赞数

分类专栏： CSS 文章标签： html5 html css css3

本文链接：https://blog.csdn.net/modern358/article/details/111397765

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

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