前端学习（1807）：前端调试之列表伪类练习三
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1807）：前端调试之列表伪类练习三
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
index.html
<!DOCTYPE html> <html lang="en"><head><!--系統內置 start--><script type="text/javascript"></script><!--系統內置 end--><meta charset="UTF-8"><title>練習</title><!-- 不要忘記引入index.css --><link rel="stylesheet" href="index.css"> </head><body><div class="banner"><ul class="clearFix"><li><div></div><p>小米筆記本Pro 15.6</p><h4>5599元起</h4></li><li><div></div><p>RedmiBook 14</p><h4>3999元起</h4></li><li><div></div><p>游戲本2019款</p><h4>7499元起</h4></li><li><div></div><p>小米筆記本Pro 15.6</p><h4>4299元起</h4></li><li><div></div><p>小米筆記本Air 12.5</p><h4>3499元起</h4></li><li><div></div><p>小米筆記本Air 13.3</p><h4>4499元起</h4></li></ul></div> </body></html>index.css
* {margin: 0;padding: 0; }body {background: #c4c4c4;} .clearFix::after {content: '';display: block;clear: both; }.banner {width: 1439px;background-color: #fff; }.banner ul {box-sizing: border-box;margin: 0px auto;padding: 29px 0px;list-style: none;width: 1011px; }.banner ul li {position: relative;width: 126px;margin-right: 51px;float: left;text-align: center; }.banner ul li:last-child {margin-right: 0px; }.banner ul li div {width: 126px;height: 86px; }.banner ul li:nth-child(1) div {background: url(./images/image1.png) no-repeat center;background-size: contain; }.banner ul li:nth-child(2) div {background: url(./images/image2.png) no-repeat center;background-size: contain; }.banner ul li:nth-child(3) div {background: url(./images/image3.png) no-repeat center;background-size: contain; }.banner ul li:nth-child(4) div {background: url(./images/image4.png) no-repeat center;background-size: contain; }.banner ul li:nth-child(5) div {background: url(./images/image5.png) no-repeat center;background-size: contain; }.banner ul li:nth-child(6) div {background: url(./images/image6.png) no-repeat center;background-size: contain; }.banner ul li p {margin: 15px 0px 6px;font-weight: normal;font-size: 12px;line-height: 17px;color: #000000; }.banner ul li h4 {font-weight: 500;font-size: 12px;line-height: 17px;color: #FD6821; }.banner ul li::after {content: '';position: absolute;right: -26px;top: 0px;height: 86px;width: 1px;background: #DFDFDF; }.banner ul li:last-child::after {content: '';position: absolute;right: 0px;top: 0px;height: 0px;width: 0px;background: #DFDFDF; }運行結果
總結
以上是生活随笔為你收集整理的前端学习（1807）：前端调试之列表伪类练习三的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《Excel数据处理与分析实战技巧精粹》
- 下一篇： 前端学习（1477）：计算属性文档分析