当前位置：网站首页>【案例】定位的运用-淘宝轮播图

【案例】定位的运用-淘宝轮播图

2022-07-05 20:56:00 【发呆少女】 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> * {
       margin: 0; padding: 0; } a {
       text-decoration: none; } li {
       list-style: none; } .promo_bd {
       position: relative; height: 315px; width: 630px; background-color: blue; margin: 100px auto; border-radius: 20px; } .promo_bd img {
       height: 100%; width: 100%; border-radius: 20px; } .promo_bd .pre, .promo_bd .next {
       position: absolute; width: 25px; height: 40px; top: 50%; margin-top: -20px; background-color: rgba(0, 0, 0, 0.4); color: #fff; font-size: 20px; line-height: 40px; text-align: center; } .promo_bd .pre {
       left: 0; border-radius: 0 20px 20px 0; } .promo_bd .next {
       right: 0; border-radius: 20px 0 0 20px; } .promo_bd .promo_nav {
       position: absolute; left: 50%; margin-left: -35px; bottom: 15px; height: 14px; width: 70px; background-color: rgba(255, 255, 255, 0.3); border-radius: 7px; } .promo_bd .promo_nav ul li {
       float: left; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; margin: 3px; } .promo_bd .promo_nav ul .selected {
       background-color: #ff5000; } </style>
</head>

<body>
    <div class="promo_bd">
        <img src="./ad.jpg" alt="">
        <a class="pre" href="#">&lt;</a>
        <a class="next" href="#">&gt;</a>
        <div class="promo_nav">
            <ul>
                <li class="selected"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>

</html>

在这里插入图片描述

原网站

版权声明
本文为[发呆少女]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43632490/article/details/125571206

边栏推荐

猜你喜欢

随机推荐