java 实心圆,liststyletype实心圆小图标大小颜色属性设置
一、css样式liststyletype相关属性详解
1)属性介绍
liststyletype单看字面意思它是列表的样式类型,在CSS中,它特质ul和ol列表的样式属性,主要是用来自定义列表样式前面的符号。
有意思的是该属性既可以作用在无序列表中有可以作用在有序列表中,只不过它在无序或有序列表中的属性值不一样而已,说白了liststyletype属性就是在网页布局中设置列表的样式,让列表的样式符号儿更加的好看美观,接下来我们可以看一下无序列表和有序列表中相关的该属性对应的属性值有哪些?
2)liststyletype属性值介绍
上图中是列出的有序列表的liststyletype属性的可选择的所有属性值,其中默认值是decimal属性,也就是说如果我们不设置liststyletype属性的话,那么有序列表的列表符号儿默认值就是按数字1数字2数字3这样的形式展示。
在有序列表中该属性还可以使用大小写的英文字母或者是大小写的罗马数字进行表示,这几个属性不是很常用,图中已经说得很详细我们就不再细说。
上图中是liststyletype在无序列表中展示的所有的可选择的属性值,在无序列表中也有一个默认值它的名称是disc,它其实是实心圆,在无序列表中不设置该属性的话,我们也会看到列表展示时的项目符号是一个黑色的实心圆。
其次还可以设置square和cycle这两个属性值,一个代表方形,一个代表空心圆。
3)语法与代码案例
讲了这么多相关的意思介绍,不如我们写一个相关的代码案例能让我们了解的更加清楚,接下来我们分别用CSS样式代码和js代码操作css样式编写该list-style-type属性的语法代码案例。
css样式代码:
#tab-content ul { list-style-type: none; }
js操作样式代码:
document.getElementById(“liebiao”).style.listStyleType=”circle”;
上面的两种写法都很简单,相信大家已经很快就快速入门了,第一种写法设置的该样式属性为none,意思就是列表前面的不显示任何符号儿,下面的JS操作样式设置为空心圆的列表样式符号。
二、实心圆与图片小图标大小颜色等属性设置
上文中讲解了liststyletype一些基本用法和基本属性的用法,接下来我们讲一点儿高级的用法,比如说修改实心圆的大小、实心圆的颜色设置,以及列表符号改为用图片代替,自定义的美观的图片可以让列表看起来更加的舒适和简洁美观。
1)实心圆小图标大小设置
如果我们想要用li标签儿默认的实心圆设置其大小的话,一般会有两种方式,第一种方式就是设置li标签儿的fontsize属性,但是这种方式会连同标签中的文字一起设置大小,不是很方便,详见下图代码:
另一种方式就是我们可以自己定义实心圆小图标,然后用CSS的before伪元素设置,参见如下的代码。
2)实心圆小图标颜色设置
实心圆的小图标如果想要修改其颜色,首先要说明一下,li标签儿自带的默认的实心圆它的颜色其实是不能修改的,如果想修改,只能是将liststyletype这个属性设置为none,将li标签自带小圆点儿去掉,然后我们自己手写一个小圆点儿,设置该小圆点儿颜色。
需要注意的是,如果想让小圆点儿的颜色和li标签中文字的颜色不一致,只需要单独设置小圆点的颜色即可。
·测试案例代码
.it-new ul li { list-style-type: none; }
.circle-new { color: #00A93A; }
3)图片小图标代替实心圆设置
接下来讲解用图片小图标代替liststyletype那些默认的圆点等符号,因为有的时候默认点不是很好控制,因此我们可以设置一下小图标小图片儿来代替。
我们可以将图片儿做成其它任意心仪的样式,以图片的方式代替原先的圆点,然后按照下图中代码所示将图片儿引入进去即可。
java 实心圆,liststyletype实心圆小图标大小颜色属性设置相关推荐
- app 图标大小,尺寸设置
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:刘剑 链接:http://www.zhihu.com/question/20248971/answer/14480857 ...
- java poi word 图表_Java操作Poi--word图表中颜色的设置
在做java 动态增删图表中,如果将原来的标签数据删除了,在新增标签数据,发现颜色没设置,然后找不到对应的方法. 将word模板另外存word.xml格式,你会发现word模板其实是一大堆标签,你操作 ...
- qcustomplot圆_QCustomPlot使用心得五:坐标轴常用属性设置
先看轴部分的名称约定,根据名称就可以修改对应的属性了 1.显示坐标轴 默认只显示左y轴和下边的x轴,调用setVisible(bool)设置轴是否显示 1 customplot->yAxis2- ...
- qt android 应用程序图标大小,vs+qt 设置应用程序图标
LaTeX 学习记录4-字体设置 LaTeX 学习记录4-字体设置 % 导言区\documentclass[10pt]{ctexart}%10pt为字体大小%使用ctexart后就可以不引用ctex宏 ...
- CSS 网站小图标 雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
- uniapp小程序底部tabbar图标大小设置
小程序底部tabbar图标大小设置 在uniapp中小程序的tabbar没有设置图标大小的属性,导致小程序在不同平台打开时图标大小显示的不一样,特别是在电脑微信打开小程序时,底部的图标就会特别大,使得 ...
- css制作提示小图标(内容撑开盒子)
一.内容撑开盒子:不设置盒子宽度,给盒子设置左右内边距撑开盒子(padding: 0 10px;) 注意行内元素不能设置长宽,需要先将其转换为行内块元素或者块级元素(display: inline-b ...
- Typora 中如何打小黑点,空心圆,实心方框
文章目录 Typora 中如何打小黑点,空心圆,实心方框 Typora 中如何打小黑点,空心圆,实心方框 这三个图标类似1.2.3级标题 Ctrl+Shift+] 即可打出小黑点 再点回车会在下一行自 ...
- Typora中如何打小黑点,空心圆,实心方框
这三个图标类似1.2.3级标题 按Ctrl+Shift+]可打出小黑点. 按回车下一行又会出现小黑点 按Tab就会变成空心圆. 实心方框也是如此.
- Typora 如何依次打小黑点,空心圆,实心框后恢复空心圆、小黑点
现有问题点 网上很多大神都写了如何依次打小黑点.空心圆和实心框,但是对于我这种刚学Python的新手来说,按错了之后如何恢复之前的状态很多大神都不会细说,我这边根据自己学习的情况做个笔记. 如何打小黑 ...
最新文章
- iOS-CoreImage简单使用
- python集合和eval的使用
- vilatile 深入理解java虚拟机_《深入理解Java虚拟机》笔记 第十二章 volatile变量
- vue.config.js配置
- opencv计算两数组的乘积_#剑指Offer#12. 构建乘积数组
- 【渝粤题库】国家开放大学2021春1313学前儿童卫生与保健题目
- java 伴随矩阵_C#计算矩阵的逆矩阵方法实例分析
- 36Kr鬼畜推送,没事别惹程序员
- mysql5.7.14_mysql 5.7.14 下载安装配置方法图文教程
- 最全面的智能锁领域常见的无线传输协议类型
- 深度优先搜索算法的通用解法
- 【PAT乙】1038 统计同成绩学生 (20分) 裸桶排序
- 中国电信校园宽带客户端连接服务器无响应,天翼校园客户端出现了错误码,是在提示什么?...
- 如何将PNG图像转换为word文档?
- ae渲染出现错误是什么问题_怎样彻底检查根治AE导出失败,渲染影片出错问题...
- 在线副业教程之 01 如何通过编码赚钱的 6 种方法
- Android Key获取方式
- EP4CE10系列芯片引脚图
- 关于socket数据长度
- php 促销方案,七步就轻松搞定,促销活动方案