前端学习（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;
}

运行结果