浮动练习 淘宝轮播图

图片

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <style type="text/css">
            #wrap{
                width: 520px;
                height: 280px;
                margin: 50px auto;
                position: relative;
            }
            
            ul{
                padding: 5px 9px 0px 3px;
                height: 13px;
                margin: 0;
                border-radius: 10px;
                background-color: rgb(255,255,255,0.3);
                /* 根据外层div(wrap)定位 */
                position: absolute;
                left: 50%;
                bottom: 15px;
                text-align: center;
                margin-left: -39px;
            }
            
            li{
                display: block;
                /* padding-top: 8px; */
                /* 去掉小点点 */
                list-style: none;
                width: 8px;
                height: 8px;
                /* 让li成为下方的圆点 */
                border-radius: 50%;
                background-color: #FFFFFF;
                /* 让li在一行内显示 */
                float: left;
                margin-left: 4px;
                /* position: relative;
                left: 50%;
                top: 50%; */
                
            }
            
            .active{
                background-color: #ff5000;
            }
            
            .span{
                /* 箭头 */
                width: 100%;
                color: white;
                /* background-color: red; */
                position: absolute;
                top: 50%;
                
            }
            #left{
                width: 20px;
                height: 30px;
                /* 垂直居中 */
                line-height: 30px;
                /* 水平居中 */
                text-align: center;
                display: block;
                float: left;
                background-color: rgba(6,6,6,0.5);
            }
            #right{
                width: 20px;
                height: 30px;
                /* 垂直居中 */
                line-height: 30px;
                /* 水平居中 */
                text-align: center;
                display: block;
                float: right;
                background-color: rgba(6,6,6,0.5);
            }
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="img">
                <img src="./img/photo.webp" >
            </div>
            
            <div class="span">
                <span id="left"><</span>
                <span id="right">></span>
            </div>
            
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
        
        
    </body>
</html>
文章名: 《浮动练习 淘宝轮播图》

本文链接:https://lula.fun/757.html

除特别注明外,文章均由 Lula(噜啦) 原创

 原创文章 转载时请注明 出处 以及文章链接
最后修改:2019 年 11 月 02 日 01 : 46 PM

发表评论