有序无序的变换序号变图片序号的各种形式变换

在html上写一个列表，如

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>语文</li><li>数学</li><li>英语</li></ol></body>
</html>

运行后

会发现序号1，2，3在li标签的外面，那么怎么实现把序号放在里面呢？很简单，像下面这么写就能实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>ol{list-style-position: inside;/*列表位置：在里面*/}li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>语文</li><li>数学</li><li>英语</li></ol></body>
</html>

还可以设置为不要序号，将1，2，3变为方形和圆形等形状，如

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>ol{list-style-position: inside;/*列表位置：在里面*/list-style-type: square;/*方形*/}li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>语文</li><li>数学</li><li>英语</li></ol></body>
</html>

运行后

还可以将块形东西变为图片，如

将一张有箭头的图片复制

再粘贴在img中

再在ol{}中写

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>ol{list-style-position: inside;/*列表位置：在里面*/list-style-image: url(../img/0x300a0a0.png);/*引入图片*/list-style-type: square;/*方形*/}li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>语文</li><li>数学</li><li>英语</li></ol></body>
</html>

运行后，

发现图片太大了，我也找不到图片小的箭头。这里给个事列怎么变为图片而已。

这里可以简写，将

list-style-position: inside;
list-style-image: url(../img/0x300a0a0.png);
list-style-type: square;

改为

list-style: inside url(../img/0x300a0a0.png) square;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>ol{/*list-style-position: inside;list-style-image: url(../img/0x300a0a0.png);list-style-type: square;*/list-style: inside url(../img/0x300a0a0.png) square;/*顺序不能乱*/}li{border: 1px solid red;font-size: 20px;}</style><body><ol><li>语文</li><li>数学</li><li>英语</li></ol></body>
</html>

运行后一样效果。

值得注意的是，经过这么折腾后有序列表变了无序列表，而有序列表也可变为无序列表，如

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>ul{/*list-style-position: inside;list-style-image: url(../img/0x300a0a0.png);list-style-type: square;*/list-style-position: outside ;list-style-type: decimal;/*顺序不能乱*/}li{border: 1px solid red;font-size: 20px;}</style><body><ul><li>语文</li><li>数学</li><li>英语</li></ul></body>
</html>

运行后，就变为有序的了。

有序无序的变换序号变图片序号的各种形式变换相关推荐

怎样给word的图片自动添加图片序号？
http://jingyan.baidu.com/article/363872ecf0b7656e4aa16f53.html 方法/步骤为图片添加自动题注 1.为图片添加题注,先在文件适当的位置插入 ...
CaNet-master装载图片数据和mask（index对应单张图片序号）
使用三个txt(15cls)训练,另外1个txt(5cls)用于val. 训练需要support set原图+mask,query set原图,使用query集计算loss更新参数. support ...
Android：关于天气预报图片序号99
这里以北京为例,北京城市代码为101010100,访问http://m.weather.com.cn/atad/101010100.html 可获得一段json数据,解析后如下: { "we ...
批量给文件夹名加序号前缀或者序号后缀，对文件夹按序号进行重命名
概要:「我的ABC软件工具箱」实现了强大的批量编排文件夹序号的功能,用户可以根据需要给已有的文件夹加上统一的前缀或者后缀,达到对原文件夹进行重命名并按序排列的目的.可以支持数字序号.日期时间序号以及随 ...
js 数字序号转字母序号
这里只是将 0-26 位转为对应的 A-Z,主要用于索引转为选项 ,用于在线考试,问卷调查等场景 /** 数字序号转字符串序号 0 => "A"*/ function in ...
单词记忆系统二：音标字符输入(re从字符串中提取音标字符；依序打印音标字符；输入对应序号；替换序号。-＞完成“音标输入”)
Python 官网:https://www.python.org/ Free:大咖免费"圣经"教程< python 完全自学教程>,不仅仅是基础那么简单-- My CS ...
unity ui界面鼠标变图片移动
第一步首先准备1张图(我随便截的)放入unity里,图片转换为Cursor; rso'r 第二步创建一个Ui界面,在里面创一个按钮: 第三步创建一个脚本,名字自取(脚本名为TU) sing Sy ...
PMSM永磁同步电机PI双闭环SVPWM矢量控制本模型包括DC直流电源、逆变桥、PMSM、park变换、clark变换、SVPWM、PI控制器、信号测量等单元模块
PMSM永磁同步电机PI双闭环SVPWM矢量控制 Matlab/Simulink仿真模型(成品) 1.本模型包括DC直流电源.逆变桥.PMSM.park变换.clark变换.SVPWM.PI控制器.信 ...
咔咕图聊！超级酷!让QQ文字立刻变图片！
咔咕图聊!超级酷!让QQ文字立刻变图片! 咔咕是一款超酷的个性图片.个性铃音生成器.轻松一键,DIY图片.铃音等就能通过QQ赠送给朋友们一起分享啦!该产品可根据您输入的内容(文字.图片.语音等),自动 ...

有序无序的变换序号变图片序号的各种形式变换

有序无序的变换序号变图片序号的各种形式变换相关推荐

最新文章

热门文章

有序无序的变换 序号变图片 序号的各种形式变换

有序无序的变换 序号变图片 序号的各种形式变换相关推荐

最新文章

热门文章

有序无序的变换序号变图片序号的各种形式变换

有序无序的变换序号变图片序号的各种形式变换相关推荐