栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在html列表上设置数字样式?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在html列表上设置数字样式?

可以使用CSS3来完成,但不能使用100%跨浏览器(即IE7)来完成。使用伪:before元素以及counter-reset和counter-
increment,您可以隐藏列表样式并创建自己的样式。

同样在可怕的链接腐烂的情况下-这是所需的主要CSS代码(可以应用于任何有序列表)

ol {    counter-reset:li;     margin-left:0;     padding-left:0; }ol > li {    position:relative;     margin:0 0 6px 2em;     padding:4px 8px;     list-style:none;     border-top:2px solid #666;    background:#f6f6f6;}ol > li:before {    content:counter(li);     counter-increment:li;         position:absolute;    top:-2px;    left:-2em;    -moz-box-sizing:border-box;    -webkit-box-sizing:border-box;    box-sizing:border-box;    width:2em;        margin-right:8px;    padding:4px;    border-top:2px solid #666;    color:#fff;    background:#666;    font-weight:bold;    font-family:"Helvetica Neue", Arial, sans-serif;    text-align:center;}li ol,li ul {margin-top:6px;}ol ol li:last-child {margin-bottom:0;}​

此代码将产生一个自定义的有序列表;尽管不是您要求的样式。我将把定制工作留给您:)干杯



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575778.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号