html中有序列表的css样式,CSS 列表样式(ul)

2023-05-16

CSS 列表

CSS 列表属性作用如下:设置不同的列表项标记为有序列表

设置不同的列表项标记为无序列表

设置列表项标记为图像

列表

在 HTML 中,有两种类型的 HTML列表:无序列表 - 列表项的标记使用特殊图形(如小黑点、小方框等)

有序列表 - 列表项的标记使用数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

不同的列表项标记

list-style-type 属性指定列表项标记的类型是:

实例

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

一些值是无序列表,以及有些是有序列表。

下列是对 list-style-type 属性的常见属性值的描述:none:不使用项目符号

disc:实心圆

circle:空心圆

square:实心方块

decimal:阿拉伯数字

lower-alpha:小写英文字母

upper-alpha:大写英文字母

lower-roman:小写罗马数字

upper-roman:大写罗马数字

作为列表项标记的图像

要指定列表项标记的图像,使用列表样式图像属性:

实例

ul

{

list-style-image: url('sqpurple.gif');

}

上面的例子在各大主流浏览器中的显示有所差异,IE 和 Opera 显示图像标记比火狐( Firefox ),Chrome 和 Safari 更高一点点。

浏览器兼容性解决方案

同样在所有的浏览器,下面的例子会显示的图像标记:

实例

ul {

list-style-type: none;

padding: 0px;

margin: 0px;

}

ul li {

background-image: url(sqpurple.gif);

background-repeat: no-repeat;

background-position: 0px 5px;

padding-left: 14px;

}

例子解释:ul :设置列表样式类型为没有列表项标记

设置填充和边距 0px(浏览器兼容性)

ul 中所有 li :设置图像的 URL ,并设置它只显示一次(无重复)

您需要的定位图像位置(左 0px 和上下 5px )

用 padding-left 属性把文本置于列表中

列表 -简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性,列表样式属性设置如下:

实例

ul {

list-style: square url("sqpurple.gif");

}

如果使用缩写属性值的顺序是:list-style-type

list-style-position (有关说明,请参见下面的CSS属性表)

list-style-image

在简写属性时,如果上述值丢失一个,其余仍在指定的顺序,就没关系。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html中有序列表的css样式,CSS 列表样式(ul) 的相关文章

随机推荐

  • Windows平台下利用Fastcopy来做数据的定期同步

    FastCopy号称是Windows 平台上最快的文件拷贝 删除软件 xff0c 特别是文件超多 超大的情况下 为此我们在数据备份的时候选择FastCopy 但是 FastCopy如果直接来做计划任务的话会有一个问题 xff0c 因为打开的
  • 善用VS中的Code Snippet来提高开发效率

    前言 在谈谈VS中的模板中 xff0c 我介绍了如何创建项目 项模板 xff0c 这种方式可以在创建项目时省却不少重复性的工作 xff0c 从而提高开发效率 在创建好了项目和文件后 xff0c 就得开始具体的编码了 xff0c 这时又有了新
  • [git]merge和rebase的区别

    前言 我从用git就一直用rebase xff0c 但是新的公司需要用merge命令 xff0c 我不是很明白 xff0c 所以查了一些资料 xff0c 总结了下面的内容 xff0c 如果有什么不妥的地方 xff0c 还望指正 xff0c
  • 正则表达式python_Python的隐藏正则表达式宝石

    正则表达式python There are many terrible modules in the Python standard library but the Python re module is not one of them W
  • IP地址自动封与解封的shell脚本

    本脚本学习与阿铭的脚本课程 用于防止公司网站被DDos攻击时 xff0c 封禁 肉机 的IP地址 共分为以下步骤 xff1a 1 每分钟分析一次访问日志 data logs access log 2 把访问量超过100的IP给封掉 3 将封
  • 应用中抛出SELECT/UPDATE/INSERT/DELETE command denied to user 'XXX'@'XXX.XXX.XXX.XXX' for table 'xxx' 的5种原...

    实为吾之愚见 望诸君酌之 闻过则喜 xff0c 与君共勉 第一章 准备环境 创建数据测试数据 xff0c 以下测试多是基于自建mysql进行 mysql gt create database test1 Query OK 1 row aff
  • 数据标注的作用及行业现状

    在之前的内容中讲过确立一个算法模型需要使用大量标注好的数据去训练机器让机器去学习其中的特征以达到 智能 的目的 而数据标注就是帮助机器去学习去认知数据中的特征 比如我们要让机器学习认知汽车 xff0c 我们直接给机器一个汽车的图片它是无法识
  • 如何解决安卓手机显示google play服务停止运行?

    相信不少的安卓用户都遇到过这种情况 xff1a 很抱歉 xff0c google play服务 已停止运行 这到底是怎么一回事呢 xff1f 接下来就通过本文来给大家介绍一下 xff0c 我们一起往下看 xff01 其实呢 xff0c 这句
  • Failed to stop the server machine ' xxx.xxx'

    2019独角兽企业重金招聘Python工程师标准 gt gt gt arcgis for server 10 2 在部署新站点时抛出异常 xff1a Failed to create the site Failed to stop the
  • vue中使用jquery报错 $ is not defined

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 一 问题 is not defined 在使用Vs Code编写Vue应用的时候 xff0c 从页面中引入jquery后 xff0c 在 vue文件编写使用时 xff0c
  • 即将发布的 ASP.NET Core 2.2 会有哪些新玩意儿?

    今年 6 月份的时候时候 NET 团队就在 GitHub 公布了 ASP NET Core 2 2 版本的 Roadmap xff08 文末有链接 xff09 xff0c 而前两天 ASP NET Core 2 2 预览版 2 已经可以下载
  • 【three.js练习程序】随机生成100个方块

    lt DOCTYPE html gt lt html gt lt head gt lt meta charset 61 34 utf 8 34 gt lt title gt ceshi lt title gt lt script type
  • [转]你应该知道的CSS文字大小单位PX、EM、PT

    这里引用的是Jorux的 95 的中国网站需要重写CSS 的文章 xff0c 题目有点吓人 xff0c 但是确实是现在国内网页制作方面的一些缺陷 我一直也搞不清楚px与em之间的关系和特点 xff0c 看过以后确实收获很大 平时都是用px来
  • 实践这一次,彻底搞懂浏览器缓存机制

    前言 实践系列 主要是让我们通过实践去加深对一些原理的理解 实践系列 前端路由 实践系列 Babel原理 实践系列 Promises A 43 规范 有兴趣的同学可以关注 实践系列 求star求follow 如果觉得自己已经掌握浏览器缓存机
  • lxc lxd_如何在LXC和LXD中使用Linux容器

    lxc lxd In the good old days installing an operating system meant pulling together all the hardware components firing yo
  • (linux)Centos 7 xfsdump文件系统的备份和恢复

    XFS提供了 xfsdump 和 xfsrestore 工具协助备份XFS文件系统中的数据 xfsdump 按inode顺序备份一个XFS文件系统 centos7选择xfs格式作为默认文件系统 xff0c 而且不再使用以前的ext xff0
  • 佳能2900脱机自检_HP打印机脱机自检方法

    HP激光打印机如何在打印机面板上打印脱机自检页 背景 在打印机使用过程中经常需要查看打印机状态 xff0c 此时我们可以打印脱机 自检页来 帮助我们判断 xff0c 下面列出了 HP 激光打印机打印脱机 自检页的 方法 控制面板其他操作请参
  • loglog matlab,MATLAB 函数loglog()

    它使用x和y轴的对数刻度生成向量x和y的图 句法 loglog Y It should plot the columns of Y versus their index if Y includes real numbers If Y inc
  • k30s刷鸿蒙系统,Redmi K30S至尊版喜提MIUI 12.5稳定版

    Redmi K30S至尊版喜提MIUI 12 5稳定版 2021 05 07 13 20 05 16点赞 18收藏 104评论 进入5月 xff0c 第二批升级MIUI 12 5的机型也陆续开启推送 xff0c 在五一小长假期间包括Redm
  • html中有序列表的css样式,CSS 列表样式(ul)

    CSS 列表 CSS 列表属性作用如下 xff1a 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在 HTML 中 xff0c 有两种类型的 HTML列表 xff1a 无序列表 列表项的标记使用