美文网首页
轮播图圆点自适应居中问题

轮播图圆点自适应居中问题

作者: 美伢5 | 来源:发表于2018-12-22 09:40 被阅读0次

    html:

    <div class="slideBox">

        <div class="hd">

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

        <div class="bd">

            <ul>

                <li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner1.png" /></a></li>

                <li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner1.png" /></a></li>

                <li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner2.png" /></a></li>

                <li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner2.png" /></a></li>

                <li><a target="_blank" href="http://www.baidu.com"><img src="./image/banner3.png" /></a></li>

            </ul>

        </div>

    </div>


    css:

    .index-box .left .slideBox .hd{

        height:15px;

        overflow:hidden;

        position:absolute;

        bottom:5px;

        z-index:1;

        left: 0;

        margin: 0 auto;

        width: 100%;

    }

    .index-box .left .slideBox .hd ul{

        text-align: center;

        overflow:hidden;

        zoom:1;

        position: absolute;

        width: 100%;

    }

    .index-box .left .slideBox .hd ul li{

        margin:0 2px;

        width:11px;

        height:11px;

        -webkit-border-radius: 50%;

        -moz-border-radius: 50%;

        border-radius: 50%;

    background:rgba(255,255,255,.4);

        cursor:pointer;

        display: inline-block;

    }

    相关文章

      网友评论

          本文标题:轮播图圆点自适应居中问题

          本文链接:https://www.haomeiwen.com/subject/flxikqtx.html