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 可设为下列的属性,让清单项目显示不同的符号:
除此之外还可以显示为英文字母小写、实心圆形、空心圆形、阿拉伯数字、十进位制的阿拉伯数字(前方自动补 零)、希腊语、小写罗马数字、大写罗马数字 ... 等多种变化,这算是最简单的 CSS list-style 列表属性应用 方式。
参见范例:
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 范例
参考文献:wibibi网页设计教学
这学期我加入了学校的实验室,而学长给我们的第一个作业呢,就是要我们去了解到基本网页架构是怎麽形成的,...
在上一篇有提到,当挑战者上传图片证明打卡的行为的时候,会将打卡的讯息,透过line message ...
上一篇利用路由机制传递参数来实作待办事项的编辑功能,除了透过网址路径来传递所需要的参数,还可以在路由...
上一篇文章我们补充了关於微软针对Bot提供的许多服务 在这一篇我们会教学如何在Azure建立Bot的...
引言 今天介绍嵌入式系统学习的模式,并说明未来的撰写模式 = ) 学习十字路口 学习新知识必定会有...