CSS练习中|无序列表中，＜li＞的小黑点如何替换为图片（菜鸡趣味学习，细节到每一步）

最新推荐文章于 2022-01-23 12:14:43 发布
最新推荐文章于 2022-01-23 12:14:43 发布
阅读量4.3k 收藏 9
点赞数 8
分类专栏： CSS练习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47788265/article/details/107864985
版权
本文记录了一次使用CSS将无序列表`<li>`的小黑点替换为图片的学习过程，详细讲述了从设置背景图片、处理元素间距、避免宽度撑大、使用`border-bottom`替代`<hr>`到取消列表样式并插入箭头图片的每个步骤。通过这个实例，作者展示了学习CSS过程中遇到的问题及解决办法。
摘要由CSDN通过智能技术生成

今日小目标：

好了，来看看我第一次尝试做完的效果

         没完全做完，做到这心态崩了T T

 

                  这就是传说中的买家秀和卖家秀叭！

不拘小节的说 最大的问题是小圆点不会删去，结构也处理的不清晰，学过的东西不会利用

那么，我一点一点 从头开始抠

（其中的高和宽，文字、边框颜色都使用PS获取）

1.第一眼，三个div

  外面

最低0.47元/天 解锁文章
美女变成老太婆✿
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
购物车原生js简单明了
积极废人的博客
07-31 672
用js 完成购物车的功能
无序列表将点替换成图片
weixin_46247507的博客
03-12 4027
ul { list-style-type: none; } ul li { padding-left: 2rem; background-image: url(1.png); background-repeat: no-repeat; }
css 将无序列表前面的小点变成图片 并调整图片大小
weixin_45966674的博客
01-23 2912
我们先建一个普通的无序列表 <ul> <li>111</li> <li>222</li> <li>333</li> </ul> 关键还是在于css ul li { list-style-type: none; line-height: 1.2em; background: url("图片的路径") no-repeat 0rem 0.3rem; backgrou
无序列表前小黑点图片替换方法
chvef66842的专栏
09-15 781
无序列表前小黑点图片替换方法： 直接上代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta ...
CSS中将无序列表的项目符号改为指定图片
热门推荐
Capgras的博客
09-08 1万+
HTML <ul> <li>Humous</li> <li>Pitta</li> <li>Green salad</li> <li>Halloumi</li> </ul> 添加CSS后 ul { padding-le...
页面跳转 有序列表 无序列表 图片的使用
qq_45224476的博客
05-11 724
<img src="images/qianfeng01.png" width="100%"> <img title="提示鼠标滑上去显示的文字" alt="失敗图片加载失败后的文字" src="../003图片的使用/images/4.png" width="200px"> ​ <img src="#" width="700px" title="提示鼠标滑上去显示的文字" alt="失敗图片加载失败后的文字"> ​ <!-- ti...
参加过的DM NLP CV的一些比赛和练习赛（菜鸡比赛记）光学习不如认真敲点代码！！！.zip
08-24
在这个压缩包文件中，我们可以看到一个名为"ori_code"的子文件夹，这通常意味着它包含了一些原始的代码文件，可能记录了作者在参与数据挖掘（DM）、自然语言处理（NLP）和计算机视觉（CV）相关比赛时的实践过程。...
山东大学深度学习期末复习资料，93菜鸡
03-08
山东大学深度学习期末复习资料，93菜鸡。 包含上课ppt，几套期末试卷以及自己的学习总结。 学弟学妹看了认真复习应该可以90+。加油
Scratch少儿编程项目源代码文件案例-五子棋-菜鸡版，比较适合小朋友.zip
最新发布
01-24
本项目是一个使用Scratch制作的五子棋游戏，被称为“菜鸡版”，旨在为初学者提供一个简单有趣的编程实践案例。 首先，我们要理解Scratch中的主要编程概念。在Scratch中，编程主要通过“积木”来实现，这些积木代表...
css中li前面点的样式或换成图片
niuguangyuan的专栏
06-03 4396
不使用li样式：list-style-type:none;   如果要定义为图片： li{    list-style: url("pre.gif") outside circle; } 改颜色 li{          color:#f00;      } 关于这个list-style-type的一些语法与参数： 语法： list-style-type : disc | c
图片作为无序列表图标 待解
qq_36636312的博客
04-10 1395
将图片设置合适的大小，成为无序列表的图标 使用html+css ul.image{list-style-image:url(../img/t018cf71a3dc744c5a7.jpg)} <ul class="image" > <li>咖啡1</li> <li>咖啡2</li> <li>咖啡3</...
更换li列表里面图片图标的方法
weixin_44679078的博客
04-17 1878
方法1：用属性选择器 优点，省了一个类名 <ul class="local-nav"> <li> <a href="#" title="景点·玩乐"> <span class="local-nav-icon-icon1"></span> ...
html中有序排列改颜色,html – 如何在无序列表中更改点的颜色？
weixin_42246401的博客
06-21 2573
最简单(而不是无意义)的方法是将内容包装在跨度标签中,然后将项目符号颜色应用于li和文本颜色.代码：texttexttextul li {/* Bullet color */color: red;list-style-type: disc;}ul li span {/* Text color */color: black;}jsFiddle preview如果您无法修改HTML,您可以使用自定义颜...
如何改变无序列表的颜色
weixin_30855099的博客
10-07 3445
默认的无序列表的符号样式都是一个小的黑色实心圆点。通过list-style-type 可以改变样式的形状，比如圆圈，方块和其他自定义的图片 但是有些时候，为了突出，我们需要将黑色圆点，变化成为其他颜色，比如红色、黄色等一、简单写一个无序列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
2021-04-12
dg_xdg的博客
04-12 363
CSS中设置无序列表符号形状或为图片 ①设置符号就在想要更改的标签内添加type属性值。在无序列表标签中改变全部，列表项中改变单项。 ②CSS中选择相应的列表标签，设置list-style-type属性。list-style-image:url=“地址”。可以设置为指定图片(怎么选自行了解选择器用法) ...
vue的<script>里面怎么遍历，然后将遍历到的东西存到data的数组里
03-27
在Vue的`<script>`中，可以使用`v-for`指令进行遍历。具体步骤如下： 1. 在`data`中定义一个空数组，用于存储遍历到的数据，例如： ``` data() { return { items: [] } } ``` 2. 在模板中使用`v-for`指令进行遍历，并将遍历到的数据存入`items`数组中，例如： ``` <template> <div> <ul> <li v-for="(item, index) in itemList" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { items: [] } }, computed: { itemList() { return ['item1', 'item2', 'item3'] } }, mounted() { // 将遍历到的数据存入items数组中 this.itemList.forEach(item => { this.items.push(item) }) } } </script> ``` 在上面的例子中，`v-for`指令会遍历`itemList`数组中的每个元素，并将遍历到的数据存入`item`变量中。`items`数组会在`mounted`钩子中被遍历，将遍历到的数据存入其中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值