绝对定位案例 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位布局案例</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .is{
        width: 500px;
        margin: 0 auto;
        position: relative;
    }
    .is img{display: block;}
    .is .title{
        position: absolute;
        bottom: 0;
        margin: 0;
        width: 100%;
        line-height: 45px;
        background-color: #000;
        opacity: 0.7;
    }
    .is .title a{
        margin-left: 20px;
        text-decoration: none;
        color: #fff;
    }
    .is .contorls{
        position: absolute;
        bottom: 18px;
        right: 10px;
        line-height: 10px;
    }
    .is .contorls span{
        display: inline-block;
        width: 10px;
        margin:auto 1px;
        height: 10px;
        border-radius: 10px;
        background: gray;
    }
    .is .contorls span.cur{
        background-color: #fff;
    }
</style>
</head>
<body>
    <div class="is">
        <img src="1.jpg" alt="aa" />
        <p class="title"><a href="#">认知学习到底是什么？</a></p>
        <div class="contorls">
            <span></span><span class="cur"></span><span></span><span></span><span></span>
        </div>
    </div>
</body>
</html>

 

 

posted @ 2017-04-23 13:19  行动派  阅读(293)  评论(0)    收藏  举报