网页: 如何修改列表项 ul > li 前小圆点的样式
我们在开发的过程中经常会遇到一些需求,比如说这边文章中的需求,我们需要修改ul > li 的默认样式。
默认的 li 样式为:
1、如何将ul > li 前小圆点修改成小方块呢?我们需要修改其相应的css属性 => list-style-type,
我们需要将list-style-type的值设置为square。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo - 修改li的小圆点样式</title><style>.demo_box ul li {list-style-type: square; /* 将li前面的小圆点修改为实心小正方形 */}</style>
</head>
<body><div class="demo_box"><ul><li>test001</li><li>test002</li><li>test003</li><li>test004</li><li>test005</li><li>test006</li><li>test007</li><li>test008</li></ul></div>
</body>
</html>
实现的效果如下:
2、如何将ul > li 前小圆点修改成自定义的图片呢?
我们需要将list-style-type的值设置为none。然后添加一张背景图片,具体操作见下面的代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo - 修改li的小圆点样式</title><style>.demo_box ul{width: 20px;height: 20px;}.demo_box ul li {list-style-type: none; /* 先去除小圆点 */background: url(./蜡烛.png); /* 修改为背景图片 */background-size: 100% 100%; /* 设置背景图片100%填充 */padding-left: 20px; /* 设置字体向右移动20px,否者会遮挡到背景图片 */}</style>
</head>
<body><div class="demo_box"><ul><li>test001</li><li>test002</li><li>test003</li><li>test004</li><li>test005</li><li>test006</li><li>test007</li><li>test008</li></ul></div>
</body>
</html>
实现的效果如下:
附:还有 li 的其他用法如下:
1、list-style-type属性:其全部的可选值如下
a、none不使用项目符号
b、disc实心圆,默认值
c、circle空心圆
d、square实心方块
e、decimal阿拉伯数字
f、lower-roman小写罗马数字
g、upper-roman大写罗马数字
h、lower-alpha小写英文字母
i、upper-alpha大写英文字母
2、ist-style-position属性:用于设置列表项前的符号根据列表文字的排列方式,
a、outside 列表项目符号在文本以外,文本不根据标记对齐。
b、inside 列表项目符号在文本以内,文本根据标记对齐。
网页: 如何修改列表项 ul > li 前小圆点的样式相关推荐
- HTML+CSS修改li前小圆点的样式or颜色
HTML+CSS修改li前小圆点的样式or颜色 修改样式 有参考样式的图片情况: 将原有的小圆点删除后再添加 修改颜色 代码 修改样式 有两种方法比较方便的方法 有参考样式的图片情况: 可以使用图像处 ...
- CSS定义li前小点( · )的样式
语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | ...
- ul li设置横排,并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
- JavaScript——网页轮播图( 实现点击小圆点、图片滑动、小圆点样式改变)
一.轮播图要实现的效果: 实现点击小圆点.图片滑动.小圆点样式改变 二.轮播图实现效果步骤: 1.利用html+css完成轮播图片,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切 ...
- 去掉无序列表 l i 前面的小圆点:
去掉无序列表 l i 前面的小圆点: list-style: none;
- python循环修改列表_关于python:如何在for循环中修改列表项?
现在,我知道在迭代循环中修改列表是不安全的. 但是,假设我有一个字符串列表,并且我想自己剥离字符串. 替换可变值是否算作修改? 字符串不是可变值. @ user470379:列表的元素是否可变与在循环 ...
- 如何给li前的圆点添加背景颜色
li{list-style:disc inside;color:red;width:32px;} 注:必须设置list-style-type:disc:才能给其设置背景颜色:通过width控制其位置.
- html li 圆点 大小,ul li 定制圆点,list-style-image调整图片圆点大小 与 文字和图片排版...
今天我们要介绍两种前端要用到的布局:第一种是ul li定制化圆点的样式,然后使其与文字居中排列,另外一种是文字与图片混排并居中排版. 我们在使用ul li中通常会定制化圆点,使用如下代码就可以使圆点为 ...
- CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child)
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
- HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 工具/原料 html,dw软件 方法/步骤 1 无序列表 无序列表是 ...
最新文章
- 【 Notes 】WLAN,Vision Positioning System,Radar
- 基于WINCE6.0+S3C6410的背光驱动
- 扩展thinkphp5的redis类方法
- CentOS 桌面启动无登录界面
- 过滤Android工程中多余的资源文件
- 【BZOJ4542】大数, 莫队
- IT程序员在北京可以选择哪些国企、央企以及研究所?
- 10岁女程序员,婉拒谷歌Offer,研发全球首款AI桌游,现在是一名CEO
- python 设计简易计算器_python小项目——实现简易的计算器
- idea remote debug
- IP地址中的网络地址和主机地址分别是什么意思
- leshan基于OMALightweight M2M(LwM2M)协议的Java实现(入门)
- 创建一个简单OIO模式的socket服务端
- 第一单元:函数预备知识——邻域——01
- EUV光刻机内部揭秘!
- Python爬虫爬小说《诡秘之主》
- 流星滑落-第13届蓝桥杯Scratch省赛1真题第2题
- 关于win10图标不正常显示的一种解决方法
- kubernetes上的服务发现-CoreDNS配置
- dedecms友情链接plus/flink.php页面出错,DedeCMS友情链接flink_add Getshell漏洞管理员CSRF漏洞...
热门文章
- java mvc外文文献_java spring英文文献和中文翻译
- 干货 | Elasticsearch Nested 数组大小求解,一网打尽!
- ux设计_我是一名开发人员,正在过渡到UX设计帮助
- 有一定基础的JAVA学习笔记_02(面向对象)
- 易捷行云EasyStack与火星高科完成产品互认证,保护云上数据
- vue.jsv-if 的key值问题
- 移动硬盘 无法访问 解决方法
- iOS中获取NSError错误信息汇总
- python中pd是什么意思_python pd
- pvt检查是什么意思_专业术语EVT、DVT、PVT、MP是什么意思?