CSS 列表样式集合

最新推荐文章于 2023-09-19 08:13:40 发布
最新推荐文章于 2023-09-19 08:13:40 发布
阅读量267 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Doris2016/article/details/84957600
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}

ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

</style>
</head>

<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

样式为：

原文链接 http://www.runoob.com/try/try.php?filename=trycss_list-style-type_all

Hyggef
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-列表样式
m0_50555031的博客
05-20 1988
介绍CSS的列表样式及属性
css列表大全,CSS中<li>列表样式汇总大全，全实例展示
weixin_35697229的博客
08-03 2131
CSS中列表样式li {list-style-type:符号名称}css中用list-style-type指定列表(lists)前面符号,如下：li {list-style-type:符号名称}符号名称可用的值为：disc：CSS1 实心圆列表标签样式展示1列表标签样式展示2列表标签样式展示3circle:CSS1 空心圆列表标签样式展示1列表标签样式展示2列表标签样式展示3square:CSS1...
localize.css：用于本地化Web内容CSS样式的集合
02-15
localize.css CSS样式集合，可用于本地化Web内容。 目前，我只是收集不同语言的样式作为参考，不包括任何重置样式。 最终这可能成为CSS库。 非常欢迎您做出贡献，特别是那些精通英语以外的其他语言的人！ 看一看以寻找起点。
用html与css实现一个下载列表
☂yǒng 超-站在巨人的肩膀上来创新.
07-27 851
今天项目需求，需要一个鼠标放在一个下载超链接上然后弹出一个文本框显示左右上传的
CSS列表样式
m0_57774967的博客
04-28 2523
css列表属性作用： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 在html中，有两种类型的html列表： 无序列表：列表项的标记使用特殊图形（如小黑点、小方框等） 有序列表：列表项的标记使用数字或字母 使用css，可以列出进一步的样式，并可用图像作列表项标记 不同的列表项标记 list-style-type 属性指定列表项标记的类型 下面是对list-style-type属性的常见属性值的描述： none：不使用项...
50多个超漂亮水晶Button按钮样式大集合
05-12
内容索引:脚本资源,CSS特效,按钮,水晶按钮　50多个超级漂亮的Button按钮样式，大部分都是大家喜欢的水晶样式，水凌凌的，讨人喜欢，而且都配合了CSS实现了鼠标悬停变色，这些按钮在我们日常从事WEB前端设计时候都能...
带有纯 css 的 React Spinners 组件的惊人集合
06-08
React Spinners CSS Loaders (Vue, Angular) 使用纯 css 的 React Spinners 组件的惊人集合。 React 微调器基于 load.io 和来自整个网络。 如果您想添加自己的微调器，请遵循贡献指南。 :nail_polish: 没有额外的 ...
20行代码实现的一个CSS覆盖率测试脚本
01-19
document.styleSheets里保存了当前页面上所有CSS规则的集合。通过它可以遍历出页面<style>里定义的所有selector，访问selectorText属性可得选择器的匹配规则。然后将规则规则传递给 document.querySelectorAll...
gutenberg-sass:SASS-y文件夹中的WordPress Gutenberg核心块样式
05-09
我用gulp-sass编译了部分代码以发现错误，IRL这些部分代码将包含在_s的较大集合中，并最终成为主题的style.css 。 完成的文件是： _blocks.scss，只需@import类别文件。 _blocks-common.scss _blocks-formatt
silly.graphics：:rainbow:超链接的美化列表
02-03
愚蠢的图形通常与图形设计有关的资源的集合。概要用建用样式用自动化的（ ） 与（） 托管在用注册（ ） 通过进行速度测试安装优点git clone bundle install npm install gulp乔斯安装（如果在OS X上） /usr/bin/ruby...
CSS|列表样式
Alan_Lowe
07-30 396
CSS|列表样式 我们可以看一下淘宝的左侧有一个导航框，如果我们要做一个这样的导航框，应该怎么样去操作呢？ 1.div 我们看到图中的块是只占了网页的左侧一小部分，可以使用div来设置它占用的宽度 #nav{ width: 200px; background-color: #b5dcff; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
css 列表的设置,css设置列表样式的实现方法
weixin_30722051的博客
08-03 1760
css设置列表样式的实现方法发布时间：2020-08-31 11:09:23来源：亿速云阅读：131作者：小新小编给大家分享一下css设置列表样式的实现方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！list-style属性list-style属性是一个速记属性，它可以设置与列表相关的三个不同属性值：ul {list-style: || || ;}这是一个语法示例：ul {li...
CSS(十一) 设置列表样式
hlfsunshine的专栏
10-08 1024
设置列表的符号 有序列表：默认的就是数字1 2 3 无序列表：默认的是小圆点 可以看到其实有序列表和无序列表是可以转换的 html> head> meta charset="UTF-8"> title>设置列表符号title> style type="text/css"> ul,ol{ list-style-type: square; } style> h
【CSS】CSS列表【CSS基础知识详解】
@花无缺
01-21 2505
CSS精品专栏之CSS列表详解
CSS 列表
weixin_30580341的博客
06-05 270
CSS列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中，有两种类型的列表： 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 - 列表项的标记有数字或字母 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 不同的列表项标记 list-styl...
【CSS】文本样式和列表样式
叶子yes的博客
07-21 655
color为字体指定颜色font-style用于打开和关闭斜体文本font-weight为字体设置粗细程度font-size为文字指定大小font-family为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体text-decoration设置或者取消文本修饰（上划线、下划线、删除线）text-align文字排列方式text-indent文本缩进属性text-transform设置或者取消字体改变（大写、小写等）...
CSS 列表：List
最新发布
梁辰兴的博客
09-19 658
值得注意的是，不同的浏览器可能会以不同的方式显示图像标记，因此在显示效果上可能会存在差异。另外，使用图像作为列表项标记需要注意的是，如果图像尺寸过大，可能会导致列表看起来不协调。同时，也可以使用CSS的其他属性来调整图像的显示方式，如大小、位置等。最后，可以使用一些CSS框架，如Bootstrap、Foundation等，这些框架已经处理了大部分浏览器兼容性问题，可以减少开发时间和出错概率。你可以使用任何CSS属性来定制列表项的样式。此外，CSS还可以用来设置列表项的样式，包括字体、颜色、大小、间距等。
CSS列表样式（源码示例）
weixin_47556601的博客
02-04 3424
大家好，今天给大家分享一下CSS列表样式 看源码： 写HTML源码; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> </head> <body> <h2 class="title">全部商品分类</h2> <ul>
css 使用less参数
08-15
### 回答1： 在 CSS 中使用 Less 可以为样式表提供更多的功能和灵活性，以下是使用 Less 的一些常见参数： 1. 变量：使用 @ 符号定义变量，例如：@primary-color: #007bff; 2. 嵌套规则：可以将选择器嵌套在另一个选择器内，例如： ``` .container { width: 100%; .content { margin: 0 auto; } } ``` 3. 混合（Mixins）：可以将一组样式定义为混合，然后在需要的地方引用，例如： ``` .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box { .border-radius(10px); } ``` 4. 函数：可以定义函数来处理样式值，例如： ``` .font-size(@size) { font-size: @size; line-height: @size * 1.5; } h1 { .font-size(24px); } ``` 5. 运算符：可以使用加、减、乘、除等数学运算符来计算样式值，例如：@width: (100% - 20px) * 2; 以上是一些常见的 Less 参数，可以让你更方便地编写 CSS 样式表。 ### 回答2： Less参数是一种用于CSS的预处理器，它允许开发人员在CSS中使用更便捷和灵活的方式来编写代码。Less参数的使用有以下几个方面。 首先，Less参数允许我们定义变量。通过在Less代码中定义变量，开发人员可以将常用的颜色、字体和尺寸等数值赋值给变量，以便在整个代码中重复使用。这一功能不仅节省了开发时间，还使得代码维护更加方便。例如，我们可以定义一个变量为@primary-color: #007bff，然后在需要使用这个颜色值的地方直接使用@primary-color。 其次，Less参数还支持嵌套规则。通过使用嵌套规则，我们可以将相关样式的代码组织在一起，使代码更加清晰和易读。例如，我们可以将所有列表项的样式放在一个ul的嵌套规则中，然后在该规则中定义li的样式。 另外，Less参数还支持混合(Mixins)和继承(Extend)。混合是将一组样式集合到一个类似函数的结构中，然后在需要使用这组样式的地方调用它。继承则是通过使用@extend关键字将一个选择器的样式继承到另一个选择器中。这两个功能都能减少代码的重复，提高代码的可重用性和可维护性。 最后，Less参数还提供了运算功能。开发人员可以使用加减乘除等运算符对数值进行运算，从而可以更灵活地控制样式中的值。例如，我们可以通过@base-font-size: 14px; @large-font-size: @base-font-size * 1.2;来定义一个大字号，该大字号是基础字号的1.2倍。 总之，Less参数为CSS的编写提供了更加灵活和便捷的方式。通过使用Less参数，我们可以更高效地编写和维护样式代码，提高开发效率。 ### 回答3： CSS 使用 LESS 参数可以使编写和维护样式表变得更加简洁和高效。LESS 是一种 CSS 预处理器，它在现有的 CSS 语法基础上添加了一些功能，让样式表更加灵活和易于管理。 其中，LESS 的参数功能主要有以下几个方面。 1. 变量：LESS 允许定义变量来存储各种样式值，然后在样式表中使用这些变量，以实现样式的复用和统一管理。通过使用变量，可以方便地修改整个项目的样式，提高开发效率。 2. 混合（Mixin）：LESS 允许定义一组样式，并将其命名为混合。可以在样式表中通过调用混合来重用这组样式。混合可以接受参数，使得样式更加灵活和可定制。 3. 嵌套：LESS 允许在样式声明中嵌套其他样式声明，以表示父子关系。这样可以使得样式表更加结构化和易读，减少样式的层级。 4. 运算：LESS 允许在样式声明中进行简单的数学运算，如加减乘除。这可以方便地计算出各种动态的样式值，如计算盒模型的宽度或高度。 通过使用这些参数功能，我们可以更加方便地编写和维护样式表，提高开发效率和代码的可读性。同时，LESS 参数功能也为样式的复用和定制提供了更多的可能性，使得样式的管理变得更加灵活和可控。因此，使用 LESS 参数可以极大地简化 CSS 编写的过程，并且有助于保持样式表的整洁和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值