前端学习（1798）：前端调试之css伪元素练习
生活随笔
收集整理的這篇文章主要介紹了
前端学习（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伪元素练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse查看java源代码
- 下一篇： 前端学习（1667）：前端系列实战课程之