css中怎么玩转有序/无序列表项list样式

发布时间:2022-03-01 17:51:27 作者:iii
来源:亿速云 阅读:321

本篇内容介绍了“css中怎么玩转有序/无序列表项list样式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

  在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有(/内容注释部分/)list-style-type:circle;/空心圆/list-style:none;/去除标志/list-style:square;/方块/list-style:upper-roman;/罗马数字/list-style:lower-alpha;/list-style-type:upper-alpha;大写字母/list-style-type: decimal;/序号数字展示/等!

  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6     <title>css如何玩转有序无序列表项list样式</title>

  7     <style type="text/css">

  8     ul.box1{

  9         list-style-type:circle;/*空心圆*/

  10     }

  11     .box1 li{

  12         list-style:none;/*去除标志*/

  13         background-image: url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/*图文结合,列表前面添加图片*/

  14         height: 50px;

  15         background-repeat: no-repeat;

  16         background-size: 20px;

  17         /*设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。*/

  18         padding: 0px 25px 10px;/*调整内边距 上 左右 下*/

  19     }

  20     ul.box2{

  21         list-style:square;/*方块*/

  22     }

  23     ul.box3{

  24         list-style:upper-roman;/*罗马数字*/

  25     }

  26     ul.box4{

  27         list-style:lower-alpha;/*list-style-type:upper-alpha;大写字母*/

  28     }

  29     ol.box5{

  30         list-style: none;

  31         list-style:upper-alpha;

  32         color: indianred;

  33     }

  34     </style>

  35 </head>

  36 <body>

  37     <!-- 无线列表 -->

  38     <ul class="box1">

  39         <li>abc</li>

  40         <li>abc</li>

  41         <li>abc</li>

  42         <li>abc</li>

  43         <li>abc</li>

  44     </ul>

  45     <ul class="box2">

  46         <li>abc</li>

  47         <li>abc</li>

  48         <li>abc</li>

  49         <li>abc</li>

  50         <li>abc</li>

  51     </ul>

  52     <ul class="box3">

  53         <li>abc</li>

  54         <li>abc</li>

  55         <li>abc</li>

  56         <li>abc</li>

  57         <li>abc</li>

  58     </ul>

  59     <ul class="box4">

  60         <li>abc</li>

  61         <li>abc</li>

  62         <li>abc</li>

  63         <li>abc</li>

  64         <li>abc</li>

  65     </ul>

  66     <!-- 无序列表把ul>li换成ol>li有序列表,前面默认带有数字-->

  67     <ol class="box5">

  68         <li>abc</li>

  69         <li>abc</li>

  70         <li>abc</li>

  71         <li>abc</li>

  72         <li>abc</li>

  73     </ol>

  74 </body>

  75 </html>

“css中怎么玩转有序/无序列表项list样式”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. css-关于字体的使用+ 谷歌字体
  2. css如何实现背景图片拉伸填充

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css list

上一篇:CSS边框有哪些属性

下一篇:CSS的字体单位有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》