CSS中将无序列表的项目符号改为指定图片

一、将无序列表的项目符号改为指定图片
二、将无序列表的项目符号默认的圆点改为方块

HTML

<ul><li>Humous</li><li>Pitta</li><li>Green salad</li><li>Halloumi</li></ul>

添加CSS后

ul {padding-left: 2rem; //设置列表左边间隔以放置图片list-style-type: none; //取消默认的项目符号图标
}ul li {padding-left: 2rem;    //设置列表左边间隔以放置图片background-image: url(star.svg);  //为每一个li插入图片background-position: 0 0;    //定位为最左和最上background-size:  1.6rem;      //为图片与li设置0.4rem的间隔background-repeat: no-repeat;  //取消默认的图片复制，就显示一个图标
}

二、将无序列表的项目符号默认的圆点改为方块

CSS中将无序列表的项目符号改为指定图片相关推荐

CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置往盒子里面装东西盒子模型(box model) 网页中, ...
html项目符号正方形,HTML无序列表| HTML项目符号列表
本文概述 HTML无序列表或项目符号列表以项目符号格式显示元素.我们可以使用无序列表, 而无需按任何特定顺序显示项目. HTML ul标签用于无序列表.项目符号列表可以有4种类型: 碟片圈广场没 ...
html去掉无序列表前面的符号,css基础去除ul,li无序列表前面的符号
镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发. ----------------------------- ...
[HTML+CSS] 仿京东列表页项目实战
仿京东首页部分的项目链接在这: 链接: link. (https://blog.csdn.net/qq_49900295/article/details/123475801?spm=1001.2014 ...
如何使用 CSS 自定义无序列表样式
大家好,我是前端西瓜哥. 前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说. 设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点. 默认的无序列表样式是这样的. <sty ...
自定义列表li项目符号
list-style:none;写在ul里! 自定义符号主要是使用background-image属性示例代码: li{ background-image:url('../img/nav.png') ...
如何设置列表的项目符号（li的点）与文字之间的距离
今天在上课过程中遇到了一个小问题,如何调整li的点与文字之间的距离,一般情况下,个人会去掉li自带的项目符号,单独做一个圆点,但今天特殊情况,没有做,所以就"逼迫"我去找到了一个属 ...
html列表圆点改色,在不使用span的情况下更改HTML列表的项目符号颜色
我们可以结合list-style-image使用svgS,我们可以在CSS内联!这种方法提供了令人难以置信的"子弹"控制,它可以成为任何东西. 要获得一个红色圆圈,只需使用以下cs ...
css 无序列表横排列,CSS：无序列表样式
CSS按优先级和标识符工作.要定位页面上的所有H2元素,您将声明 h2 { color: #00FF00; } 但是,您也可以获得更具体的内容,并且仅在DIV中定位H2元素,例如: div h2 { ...

CSS中将无序列表的项目符号改为指定图片

CSS中将无序列表的项目符号改为指定图片相关推荐

最新文章

热门文章