web前台入门到实战：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;/序号数字展现/等！
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划） 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>说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战：css如何玩转有序无序列表项list样式
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战：css如何玩转有序无序列表项list样式
