前端学习（1798）：前端调试之css伪元素练习

index.html

<!DOCTYPE html>
<html lang="en"><head><!--系统内置 start--><script type="text/javascript"></script><!--系统内置 end--><meta charset="UTF-8"><title>练习</title><link rel="stylesheet" href="index.css">
</head><body><div class="banner"><!--可以使用列表完成小圆点的绘制，注意清除列表样式--><ul><li></li><li></li><li class="third"></li><li></li><li></li></ul></div>
</body></html>

index.css

* {margin: 0px;padding: 0px;
}.banner {position: relative;width: 850px;height: 394px;background: url(./images/banner.png) no-repeat center;background-size: contain;
}.banner::before {/*在这里使用伪元素完成左箭头*/content: url(./images/left.png);position: absolute;left: 15.51px;top: 185.76px;
}.banner::after {/*在这里使用伪元素完成右箭头*/content: url(./images/right.png);right: 15.51px;top: 185.76px;position: absolute;
}ul {position: absolute;bottom: 22px;right: 30px;
}ul>li {float: left;box-sizing: border-box;width: 8px;height: 8px;margin-left: 8px;border-radius: 50%;background: #9995A5;border: 1px solid #8E8A97;padding: 1px;
}ul>li.li-last {margin-right: 0px;
}ul>li::before {content: '';display: block;width: 4px;height: 4px;background: #666278;border-radius: 50%;
}ul>li.third {background: #D6D6D6;
}ul>li.third::before {background: #D6D6D6;
}

运行结果

前端学习（1798）：前端调试之css伪元素练习相关推荐

前端学习（1797）：前端调试之css伪元素
web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码在阿里iconfont中创建项目新建项目搜索自己想要的图标并添加入库点击购物车添加至项目回到"我的项目" ...
顾川的前端学习笔记--前端开发基础
阶段一前端开发基础初始HTML 本阶段重难点 3.29小时40小节4个模块 CSS选择器盒模型 CSS三大特性浮动和清楚浮动 CSS四种定位 CSS进阶 CSS3 前端工程师需要会的PS取图案 ...
2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
CSS伪元素及元素的显示与隐藏的学习
什么是伪元素? CSS 伪元素用于设置元素指定部分的样式. 例如,它可用于: 设置元素的首字母.首行的样式在元素的内容之前或之后插入内容伪元素在超链接中的应用 1. link 未 ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
CSS伪元素::before,::after
W3C的解释用一句话概括:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素中. css伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html页面中没有对应的元素,但是其所有用 ...
html中伪元素怎么更改图片,如何改变css伪元素的样式
本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助! 一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下:selector:pseudo-el ...
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

前端学习（1798）：前端调试之css伪元素练习

前端学习（1798）：前端调试之css伪元素练习相关推荐

最新文章

热门文章