在无序列表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 name="viewport" content="width=device-width,initial-scale=1.0" 6 title>css如何玩转有序无序列表项list样式</ 7 style type="text/css" 8 ul.box1{ 9 list-style-type:circle;/*空心圆*/ 10 } 11 .box1 li12 list-stylenone去除标志13 background-image url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png")图文结合,列表前面添加图片14 height 50px; 15 background-repeat no-repeat16 background-size 20px17 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。18 padding 0px 25px 10px调整内边距 上 左右 下19 20 ul.box221 square方块22 23 ul.box324 upper-roman罗马数字25 26 ul.box427 lower-alphalist-style-type:upper-alpha;大写字母28 29 ol.box530 none31 upper-alpha32 color indianred33 34 style35 36 body37 <!-- 无线列表 --> 38 ul class="box1"39 li>abc40 41 42 43 44 ul45 ="box2"46 47 48 49 50 51 52 ="box3"53 54 55 56 57 58 59 ="box4"60 61 62 63 64 65 66 无序列表把ul>li换成ol>li有序列表,前面默认带有数字67 ol ="box5"68 69 70 71 72 73 ol74 75 html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。