CSS基础知识三（列表编号 ）

最新推荐文章于 2024-04-14 12:25:50 发布
最新推荐文章于 2024-04-14 12:25:50 发布
阅读量792 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012054869/article/details/51397908
版权
本文介绍了CSS中如何设置列表编号，包括不显示编号、数字、空心圆、实心圆和方块等。还提到了通过URL设置自定义图片符号，并提供了实现列表水平显示、a标签 hover 效果及列表项样式的示例代码。
摘要由CSDN通过智能技术生成

一、列表编号（ul中设置）

List-style-type:none;------不显示编号

List-style-type:decimal;------数字编号

List-style-type:circle;------空心圆

List-style-type:disc;------实心圆

List-style-type:square;-----方块

List-style-type:url(图像位置);-----图片符号（同时也可以用背景图像实现，background:url(图像位置) no-repeat;）

注意：

<ul>

         <li><ahref=””>标题</li>

</ul>

1、  设置a:hover的背景色，需要把a:hover的属性覆盖到li中，即在a样式中加入

最低0.47元/天 解锁文章
ZhangXD_BLOG
关注
CSS控制列表项序号
weixin_41387874的博客
04-20 516
CSS控制列表项序号 list-style-type属性用于控制列表项序号。 list-style-type属性作用于<ol>标签和<ul>标签，而不是<li>标签。 <ol>标签的list-style-type属性属性值 属性值 作用 none 用于去掉列表项 decimal 用于定义有序列表列表项序号是阿拉伯数字，是默认值 lower-roman 用于定义有序列表列表项序号是小写罗马数字 upper-roman 用于定义有序
项目符号css样式,CSS: 项目符号及列表编号颜色
weixin_32081953的博客
08-03 1024
彩色列表编号编号列表怎么办？ 它的概念是一样的：因为我们不能用我们自己生成的自动计数器，我们必须更换自动计数器。除了上面的属性，我们还需要创建一个计数器。假设我们使用一个叫做"li"的计数器。我们先把它在OL元素设置为0：ol {list-style: none; counter-reset: li}然后把它当成上面的项目符号一样使用li::before {content: counter(li)...
css项目符号编号,CSS重新定义项目符号和编号_css
weixin_39947016的博客
08-04 603
用过Word的人都知道Word有一个“项目符号和编号”的功能，用起来很方便。Dreamweaver3的属性面板也有一个类似有的“项目符号和编号”的图标按钮，产生自动列表功能，但它只有两种形式，即方块和阿拉伯数字。不过我们可以利用Dreamweaver3的css定义功能去重新定义“列表符号的格式”。下面以定义一个“大写罗马数字项目列表符号”为例来说明其使用方法：1、按F7(或点击快速启动栏里那个象“...
css有序列表 中文序号解决方法
weixin_43355265的博客
08-15 1340
这个问题百度了很久 看到百度的富文本编辑器用的是图片解决 得到了个解决办法是用图片设置list-style解决 但是由于图片收到像素等限制会不清晰 所以想到使用伪类解决 css代码 ol { list-style: none; } .list-cn-paddingleft-1{ padding-left: 35px; position: relative; } li.list-cn-1-1::before { position: absolute;
css实现对元素编号，加序号（counter-reset、counter-increment、counter()的使用 ）
tutouXiaoGe的博客
07-23 1400
counter-reset、counter-increment、counter()的使用 在实现元素编号中，可以用 ol li 制作有序列表，但是处理不了复杂点的排序，这时候就可以用到counter-reset、counter-increment、counter()这三个属性了 1、先实现简单的排序 ul{ margin: 0; padding: 0; list-style: none; counter-reset: main; } li::before{ lis
CSS基础（三）
weixin_45455252的博客
07-19 75
文章目录CSS基础背景样式超链接样式盒子模型浮动布局定位布局 CSS基础 背景样式 背景图片样式属性： 属性 说明 值 background-image 背景图片地址 url(图片路径) background-repeat 背景图片重复 repeat / repeat-x / repeat-y / no-repeat background-position 背景图片位置 水平距离px 垂直距离px; / top left; / bottom center; / … backgro
【CSS】CSS列表【CSS基础知识详解】
@花无缺
01-21 2818
CSS精品专栏之CSS列表详解
HTML、CSS基础知识(网页设计必备50页)
05-08
HTML 基础知识点 HTML（HyperText Markup Language）是一种标记语言，用于创建网页的结构和内容。HTML 由一系列的控制标记（Tag）组成，每个控制标记都有其特定的功能和用途。 1. HTML 基本结构 * <html>：根控制...
CSS基础知识——栅格系统
weixin_45177251的博客
11-13 2664
栅格系统如何设置栅格容器如何绘制栅格固定绘制栅格结构重复绘制栅格结构自动填充与按比例划分栅格如何在栅格中放置元素根据栅格编号放置元素栅格固定命名放置元素重复栅格的命名技巧根据偏移量部署元素元素定位简写操作使用区域定位的方式栅格样式的处理栅格排布方式栅格整体对齐方式处理栅格内元素的整体控制栅格内元素的独立控制 如何设置栅格容器 把元素的display赋值 grid 或 inline-grid ，便能把元素变成容器。 <style> main { width: 200px;
【WEB】CSS常用基础知识
一场雨 一束晨
02-10 575
css基础知识
css字符列表,CSS嵌套有序列表用字母数字字符编号
weixin_33961553的博客
08-03 527
要达到预期的结果，请使用类型 -'a' 作为订单列表onetwothreefourfive请参阅此链接以了解不同的订购类型 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/oltype表示编号类型：“a”表示小写字母，“A”表示大写字母，“i”表示小写罗马数字，“I”表示大写罗马数字，“1”表示数字(默认)。实现预期格式的代码...
HTML+CSS基础——基础标签（有序列表、无序列表、定义列表）
weixin_66547608的博客
12-27 636
这是一个HTML格式的食谱，内容为炒鸡蛋的制作方法。配料包括2个鸡蛋、1汤匙黄油和2汤匙奶油，其中鸡蛋和奶油需要在碗中轻轻混合。步骤包括在中火热锅上加热黄油、加入鸡蛋和奶油、不断翻动锅边的鸡蛋直到变成滑嫩的状况，并在鸡蛋仍然含有少量水分的时候离开热源（因为它在碟子上仍会继续煮熟），最后按照此方法完成美味的炒鸡蛋。
css怎么写数字序号,CSS自动加序号-多种有序列表数字序号
weixin_36251012的博客
08-03 2205
这是一种数字序号效果，你先运行一下看效果就明白了，完全使用CSS自己的属性方法来实现，代码中一共演示了三种序号风格，一种是阿拉伯数字风格，还有大写序号风格，另外还有带竖线的序号风格，向大家介绍如何用CSS自动为内容增加序号的功能，非常实用。代码如下：htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/...
CSS实现多层嵌套列表自动编号
weixin_42978759的博客
12-13 1684
li标签选择器的特点 之前认为标签选择器会对符合搜索条件的所有对应标签进行选择，直到最近做一个自动添加多层嵌套有序列表的项目，发现li:before {color:#f00; font-family:Times New Roman;} 的标签只对第一层的li目录起作用。依次类推，li li{ }只对第二层目录起作用，li li li{ }只对第二层目录起作用。 多层嵌套有序列表的编号 因此可以利用...
html li加入数字,LI自动添加数字序号
weixin_35078004的博客
07-21 3240
LI自动添加数字序号，完全使用CSS自己的属性方法来实现，代码中一共演示了三种序号风格，一种是阿拉伯数字风格，还有大写序号风格，另外还有带竖线的序号风格，向大家介绍如何用CSS自动为内容增加序号的功能，非常实用。CSS自动加序号Ordered List样式/* list 1 style */#list1 {font: italic 1em Georgia, Times, serif;color: ...
小白学习Python的第五天之列表的操作与方法
bbbbbya的博客
09-27 673
一. Python中的重复删除 # 练习：删除指定分数列表中所有低于60分的成绩 # scores = [98, 45, 34, 89, 23, 67, 23, 9, 54, 100, 78] # 删除后：[98, 89, 67, 100, 78] # 坑一：直接遍历用remove删除元素 - 删除不干净（因为遍历的时候没有把所有元素都遍历出来） scores = [98, 45, 34, 89, 23, 67, 23, 9, 54, 100, 78] new = scores[:] for i in ne
前端学习-HTML+CSS(2)
Michelle209的博客
02-28 180
帮助中心购物指南账户管理
CSS 列表
最新发布
ac34dgf的博客
04-14 361
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值