時間：2023-09-27 18:30:01 | 來源：網(wǎng)站運營
時間：2023-09-27 18:30:01 來源：網(wǎng)站運營
HTML+CSS案例：淘寶輪播圖：前面的按照順序的筆記已經(jīng)更新了20篇內(nèi)容了，因為篇幅問題，請看目錄最后一欄。已經(jīng)總結在了最后，下面開始今天的淘寶輪播圖學習。
在線咨詢
border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘寶輪播圖做法</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } .tb-promo { position: relative; width: 520px; height: 280px; background-color: pink; margin: 100px auto; } .tb-promo img { width: 520px; height: 280px; } /* 并集選擇器可以集體聲明相同的樣式 */ .prev, .next { position: absolute; /* 絕對定位的盒子垂直居中 */ top: 50%; margin-top: -15px; /* 加了絕對定位的盒子可以直接設置高度和寬度 */ width: 20px; height: 30px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 30px; color: #fff; text-decoration: none; } .prev { left: 0; /* border-radius: 15px; */ border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .next { /* 如果一個盒子既有l(wèi)eft屬性也有right屬性，則默認會執(zhí)行 left屬性 同理 top bottom 會執(zhí)行 top */ right: 0; /* border-radius: 15px; */ border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .promo-nav { position: absolute; bottom: 15px; left: 50%; margin-left: -35px; width: 70px; height: 13px; /* background-color: pink; */ background: rgba(255,255,255, .3); border-radius: 7px; } .promo-nav li { float: left; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; margin: 3px; } /* 不要忘記選擇器權重的問題 */ .promo-nav .selected { background-color: #ff5000; } </style></head><body> <div class="tb-promo"> <img src="images/tb.jpg" alt=""> <!-- 左側按鈕箭頭 --> <a href="#" class="prev"> < </a> <!-- 右側按鈕箭頭 --> <a href="#" class="next"> > </a> <!-- 小圓點 --> <ul class="promo-nav"> <li class="selected"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div></body></html>關鍵詞：
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
