float与position组织运用练习

一.效果图

默认效果：

当鼠标移动到图片上时出现切换按钮：

结构：   

                                                     <div>

                     <a>                           <img>                    <a>

                                                                 <ul>嵌套<li>标记

二.代码

1.结构层（html)

<div>
    <img src="1.jpg" alt="music">
    <a href="#" class="left"></a>
    <a href="#" class="right"></a>
    <ul >
        <li class="max"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

2.展示层(css)

    <style type="text/css">
        *{
            margin:0;
            padding:0;
            border:0;

        }
a{
    text-decoration:none;
    font-size:30px;
    color:#fff;
}
div{
width:850px;
    height:300px;
    margin:50px auto;
    position:relative;

}
        a{
            float:left;
            width:30px;
            height:90px;
            line-height:90px;
            background:#333;
            opacity:0.7;
            border-radius:4px;
            text-align:center;
            display:none;
            cursor:pointer;
        }
        .left{
            position:absolute;
            left:-15px;
            top:100px;
        }
        .right{
            position:absolute;
            right:-15px;
            top:100px;
        }
        div:hover a{
            display:block;
        }
ul{
    width:110px;
    height:20px;
    background:#333;
    opacity:0.5;
    border-radius:8px;
    position:absolute;
    right:30px;
    bottom:20px;
}
li{
    width:6px;
    height:6px;
    border-radius:50%;
    display:inline-block;
    background:#ccc;
}
        .max{
            margin-left:12px;
            width:12px;
            boackground:orange;
            border-radius:4px;
        }
    </style>