黑松山资源网 Design By www.paidiu.com
在无序列表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;大写字母*/等!
代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css如何玩转有序无序列表项list样式</title> <style type="text/css"> ul.box1{ list-style-type:circle;/*空心圆*/ } .box1 li{ list-style:none;/*去除标志*/ background-image: url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/*图文结合,列表前面添加图片*/ height: 50px; background-repeat: no-repeat; background-size: 20px; /*设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。*/ padding: 0px 25px 10px;/*调整内边距 上 左右 下*/ } ul.box2{ list-style:square;/*方块*/ } ul.box3{ list-style:upper-roman;/*罗马数字*/ } ul.box4{ list-style:lower-alpha;/*list-style-type:upper-alpha;大写字母*/ } ol.box5{ list-style: none; list-style:upper-alpha; color: indianred; } </style> </head> <body> <!-- 无线列表 --> <ul class="box1"> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <ul class="box2"> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <ul class="box3"> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <ul class="box4"> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <!-- 无序列表把ul>li换成ol>li有序列表,前面默认带有数字--> <ol class="box5"> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> <li>abc</li> </ol> </body> </html>
总结
样式所述是小编给大家介绍的css中有序无序列表项list样式设置方法,希望对大家有所帮助!
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 战锤40K星际战士2狙击职业介绍|狙击职业技能效果一览
- RobertSaxtonTheResurrectionoftheSoldiers(2024)[24Bit-192kHz]FLAC
- 唐成杨东哥弹唱《情若真HQ》头版限量编号[WAV+CUE]
- 柏菲·HIFI风情1《一杯香茶》限量开盘母带ORMCD[WAV+CUE]
- 发糖了!《黑神话》动画导演绘制八戒紫蛛儿中秋贺图
- “时光系列”新作《时光3:永耀之境》首曝:画风更真实的恋爱模拟RPG
- 《战地》游戏主管:始终认为《战地》未来销量能超越《使命召唤》
- 《伤感民谣 值得收藏的音乐极品 2CD》[WAV/分轨][1.2GB]
- 《邓紫棋 巨肺唱将小天后有心人 2CD》[WAV/分轨][1.2GB]
- 《迪克牛仔 坛奇精选 2CD台首版》 [WAV+CUE][600MB]
- 陈明.1998-为了爱影视歌曲+新歌【中唱】【WAV+CUE】
- 黄小琥.2009-简单/不简单【华纳】【WAV+CUE】
- 洪卓立.2010-TASTE.OF.LOVE新曲+精丫英皇娱乐】【WAV+CUE】
- 战锤40K星际战士2职业强度排行
- 交错战线PVE国家队成员以及常用角色推荐