css必会1---轮播图 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head>
<style>
    .box{
        width:520px;
        height:280px;
        margin:100px auto;    
        overflow:hidden;
        position:relative;
    }
    ul,ol{
        list-style:none;
        padding:0;
        margin:0;    
    }
    .box>a{
        position:absolute;
        width:24px;
        height:36px;
        top:50%;
        margin-top:-18px;
        display:none;    
    }
    .left{
        left:0;
    }
    .right{
        right:0;    
    }
    ol{
        width:60px;
        height:20px;
        position:absolute;
        lefT:50%;
        margin-left:-30px;
        bottom:10px;
        background:rgba(255,255,255,0.5);    
        border-radius:10px;
    }
    ol li{
        width:10px;
        height:10px;
        background:#fff;
        border-radius:50%;
        float:left;
        margin-top:5px;
        margin-left:5px;
        margin-right:5px;    
    }
    .box:hover>a{
        display:block;    
    }
</style>
<body>
<div class="box">
    <ul>
        <li><a href="#"><img src="images/banner1.jpg"></a></li>
        <li><a href="#"><img src="images/banner2.jpg"></a></li>
        <li><a href="#"><img src="images/banner3.jpg"></a></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <a href="javascript:;" class="left"><img src="images/left.png"></a>
    <a href="javascript:;" class="right"><img src="images/right.png"></a>
</div>
</body>
</html>

 

posted @ 2021-04-06 16:27  鲲尘轻杳  阅读(41)  评论(0)    收藏  举报