认识CSS(七):CSS list-style

CSS list-style提供网页调整列表清单中更多的显示功能,之前提到的HTML表单里有传统的ul 无序号清单或 ol有序号的清单, 它的列表呈现方式比较单纯,预设值为由上而下排列,ul li 是开头一个黑点,ol li 则是在开头自动产生数字排序,如果想要修改网页内这些列表,呈现较多元方式的表现。例如:修改开头的图形、将开头的符号改成小图片显示,或修改列表的呈现位置,都可以使用 CSS list-style 列表属性来重新设计。

  • CSS list-style-type
    CSS list-style-type 可以用来设定 ul li 或 ol li 的项目符号,无论是 ul li 无排序项目或是 ol li 有排序项目清单都可以使用 CSS list-style-type 来修改每个项目的标示符号,例如无标示、空心圆圈、实心圆圈、大写英文字母、小写英文字母、数字、正方形甚至是罗马数字,都是常见到的标示方式,换句话说 CSS list-style-type 有非常多种不同的风格可以使用。

    CSS list-style-type 可设为下列的属性,让清单项目显示不同的符号

    • none:不显示项目符号
    • circle:空心圆点
    • square:实心方块
    • disc:实心圆点

    除此之外还可以显示为英文字母小写、实心圆形、空心圆形、阿拉伯数字、十进位制的阿拉伯数字(前方自动补 零)、希腊语、小写罗马数字、大写罗马数字 ... 等多种变化,这算是最简单的 CSS list-style 列表属性应用 方式。
    参见范例:
    https://ithelp.ithome.com.tw/upload/images/20211002/20141905YpnlRpZa4f.png

https://ithelp.ithome.com.tw/upload/images/20211002/20141905ama8ecGLcl.png

  • CSS list-style-image
    CSS list-style-image 可以指定以图案为项目符号,取代 ul li 或 ol li 原本预设的项目符号,属性值可以用url(“图档路径”)来设定。如此一来,项目的呈现就变得相当的丰富,轻松的设计出可爱图形等替代符号,能够显示图片的格式包含 jpg、jpeg、png、gif、bmp ... 等常见图档格式

    CSS list-style-image 语法:
    list-style-image:url(“图档路径”)
    CSS list-style-image 范例

https://ithelp.ithome.com.tw/upload/images/20211002/201419054aCl3cRQIv.png

https://ithelp.ithome.com.tw/upload/images/20211002/2014190575q5Fqfsj1.png

参考文献:wibibi网页设计教学


<<:  资料存取的先後顺序:Stack 和 Queue

>>:  成员 20 人:

Day1 学习目标与动机

这学期我加入了学校的实验室,而学长给我们的第一个作业呢,就是要我们去了解到基本网页架构是怎麽形成的,...

DAY19 - 认识 line message API

在上一篇有提到,当挑战者上传图片证明打卡的行为的时候,会将打卡的讯息,透过line message ...

第 28 型 - 路由 (Router) - Resolve / 延迟载入 (Lazy Router)

上一篇利用路由机制传递参数来实作待办事项的编辑功能,除了透过网址路径来传递所需要的参数,还可以在路由...

Day 08-在Azure建立Azure Bot资源

上一篇文章我们补充了关於微软针对Bot提供的许多服务 在这一篇我们会教学如何在Azure建立Bot的...

[2021铁人赛 Day-02] 嵌入式学习模式 and 系统分类

引言 今天介绍嵌入式系统学习的模式,并说明未来的撰写模式 = ) 学习十字路口 学习新知识必定会有...