登入
|
停止注册
开启辅助访问
设为首页
收藏网址
扫一扫关注微信
主页
Portal
版块
BBS
兴趣
Group
帮助
Help
专辑
Collection
了解社区
关于我们
租賃視界社區
»
版块
›
兴趣
›
電算技術
›
程序编码
›
CSS
›
HTML列表 <li> CSS样式
HTML列表 <li> CSS样式
[复制链接]
1085
0
坤FL
版块管理
2024-3-27 00:19
|
查看全部
1. 使用 list-style
简单的自定义样式需求可以利用 list-style-type 或 list-style-image 来实现。它们的作用是改变列表的符号。
list-style-type 可以将无序列表默认的圆点改成方块,或将有序列表改为按字母、罗马数字等排序。我们还传入自定义的字符串(可以用 emoji )
li {
list-style-type: ' ';
}
但大部分情况下我们需要自定义的不只是符号的内容,还有大小、间距、颜色等等。这个时候就要用到下面的方法了。
2. 使用 ::marker 伪元素
::marker 伪元素对应的正是列表项的符号,我们可以通过改变 ::marker 伪元素的样式来进行更深入的列表样式自定义。下面这个例子改变了列表符号的颜色和第一个列表符号的字体大小。
li::marker {
color: plum;
transition: color .5s ease-in-out;
}
li:first-child::marker {
font-size: 2.5rem;
}
除了字体大小和颜色,::marker 伪元素可以改变的样式还包括:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
可以看到其中包含了过渡和动画属性,这意味着我们可以利用 ::marker 来进行对列表符号单独进行动画设置。下面的例子中被 hover 的列表项符号会渐变为红色。
li::marker {
transition: color .5s ease-in-out;
}
li:hover::marker {
color: crimson;
}
对于有序列表,我们可以使用 content 属性搭配 counter 函数来实现符号内容的自定义。
li::marker {
content: counter(list-item) "、";
}
counter(list-item) 会自动返回当前列表所属次序的数字。它其实是浏览器自动为我们设置的一个 counter。CSS counter 的具体用法会在下文讲解。
从上面的属性列表可以发现 ::marker 伪元素支持的属性比较有限,对于背景颜色、文字阴影、定位、边距等属性都不支持。比如下面这个网页截图中的列表符号样式就没办法通过 ::marker 来实现。
如果我们希望通过改变其他 ::marker 不支持的属性来更深入地自定义列表符号,就要用最后的这个方法。
3. 使用 ::before 伪元素
我们可以通过设置 list-style-none 来去掉默认的项目符号,然后用 ::before 伪元素设置自定义的项目符号。相较于 ::marker,::before 伪元素的缺点在于我们通常需要手动改变其定位才能让它出现在正确的位置上。但它也给我们提供了更多的可能性,比如动态改变列表符号的位置。例如下面的这个例子
li {
/* 利用flex布局把符号和内容放到同一行 */
display: flex;
align-items: center;
gap: 1rem;
}
li::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' width='100' title='fish'%3E%3Cpath d='M327.1 96c-89.97 0-168.54 54.77-212.27 101.63L27.5 131.58c-12.13-9.18-30.24.6-27.14 14.66L24.54 256 .35 365.77c-3.1 14.06 15.01 23.83 27.14 14.66l87.33-66.05C158.55 361.23 237.13 416 327.1 416 464.56 416 576 288 576 256S464.56 96 327.1 96zm87.43 184c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24 13.26 0 24 10.74 24 24 0 13.25-10.75 24-24 24z' /%3E%3C/svg%3E");
}
li:nth-child(even) {
/* 偶数行的列表项符号和内容位置交换 */
flex-direction: row-reverse;
}
li:nth-child(even)::before {
/* 偶数行的列表项符号方向反转 */
transform: rotateY(180deg);
}
完整代码:
我们也可以通过::before来自定义有序列表的符号,不过有一个问题需要注意:在 ::marker 中我们可以用 counter(list-item) 来自动获取序号,而在 ::before 伪元素中是不行的,所以我们得手动设定一个 counter 来获取序号。在此基础上就可以快乐地自定义符号样式了。
ol {
/* 设置index初始值为0 */
counter-reset: index 0;
}
ol li {
/* 每出现一个li就给index加1 */
counter-increment: index;
}
ol li::before {
/* 利用counter获取序号 */
/* 列表第一项就返回1,第二项返回2,以此类推 */
content: counter(index);
}
完整代码如下:
总结
自定义 <li> 符号时:
如果只想改变符号的内容,使用 list-style-* 即可。
如果希望改变字体相关属性,或者为符号增加单独的过渡和动画,使用 ::marker 伪元素。
如果上面的方法都不够用,就使用 ::before 伪元素。如果想在 ::before 伪元素中获取当前编号,可以利用 counter。
CSS
相关帖子
使用 CSS 的伪类选择器 nth-child 为奇数行和偶数应用不同的背景色
用 html/javascript/css 做个人网站(包含个人简介、简历、联系方式)
有志和有钱者事竟成<諺>志さえあれば必ず成功する
举报
回复
返回列表
论坛元老
论坛联合创始人
回复
转播
评分
分享
搜索
帖子
用户
热搜:
融资租赁
金融租赁
资产证券化
财务分析
风险
税务
银行
热门版块
社区工具
外国語
数学版
侦查学
法学版
热力设备融租
造纸印刷融租
投资学
计算机
统计学
股票基金研习
查看社区所有版块>>
投票调查
社区任务
我的收藏
购物中心
我的文辑
我的好友
参与活动
我的勋章
我的悬赏
我的投票
我的群组
我的话题
研究报告
融资租赁行业2023年回顾与2024年展望
联合资信主要观点: 2023年10月下发了金融租赁公司管理办法,体现了监管机构对
2023年租赁业调查报告(毕马威)
毕马威连续第5年发布租赁业调查报告。本刊结合租赁行业热点话题提供专业洞察,并汇总
2021年度融资租赁业调查报告
2021年度融资租赁业调查报告 下载地址:原链接
2021年融资租赁行业信用风险展望
一、融资租赁行业 2020 年信用风险回顾 1.信用等级迁移及风险事件回顾 202
《金融租赁行业发展报告(2007-2017)》
金融租赁行业发展报告(2007-2017) 《报告》主体内容分为导言、发展篇、环境篇、资产
更多
精华推荐
法律尽职调查指要
产业金融之脱虚向实下的融资租赁供给侧改革
2018年新租赁会计准则修订的内容整理
制造业项目尽职调查报告样本范例(适用于制
金融租赁公司产品手册(研究资料)
汽车租赁证券化:深化汽车金融服务正当时
营改增如何影响融资租赁业: 政策效应与适
融资租赁行业2014年度报告-租赁三十人论坛
更多
社区同学
坤FL
ejoty
更多
客服中心
Admin@tjrzzl.com
周一至周日 10:00-22:00 仅收市话费
站内客服
头条微博
邮件咨询
站务议事
关注我们
加入QQ群组
关注官方微信
关于我们
关于我们
友情链接
联系我们
帮助中心
运营理念
注册说明
获取硬币
服务说明
社区规范
免责声明
账户安全
关注我们
官方微博
官方空间
官方微信
电子邮局联系
周一到周八 10:00-22:00 [全年不休假]
7x24小时在线客服
移动版
禁言
关于
网站地图
-
全球融资租赁领域的联结者
|
津ICP备14004695号
| 津公网安备12011102000780号
快速回复
返回顶部
返回列表