层级,hover

1.1 透明度  opacity

Opacity:有兼容性问题，而且不但让背景颜色透明，而且还让里面的内容也透明

background: rgba(0,0,0,.3);

仅让背景色透明，内容不透明

1.2 相邻元素的层级(仿淘宝的效果)

 

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 500px;
            border: 10px solid blue;
            float: left;
            /*margin-right: 10px;*/
            margin-left: -10px;
            position: relative; /*定位了的元素，默认的都会有层级的概念，而且默认的层级都是0*/
        }
        div:hover {
            border-color: red;
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

 

1.3 overflow:hidden

当同一行的内容超过版心时，可以大大增加父盒子的宽度，然后给父盒子设置overflow：hidden

1.4设置左右拉动，以及设置hover

<div class="arrow">
    <div class="arrow-left"><</div>
    <div class="arrow-right">></div>
</div>


.arrow{
    display: none;
}
.main-left:hover .arrow{
    display: block;
}
.arrow-left,.arrow-right{
    width: 30px;
    height: 62px;
    position: absolute;
    /**/
    top:50%;
    margin-top:-31px;
    text-align: center;
    font:400 30px/62px "宋体";
    background:rgba( 0,0,0,0.3);
}
.arrow-left:hover, .arrow-right:hover{
    background:rgba( 0,0,0,0.7);
}
.arrow-right{
    right:0px;
}

 

posted @ 2016-07-25 23:44  程序猿1990  阅读(269)  评论(0)  编辑  收藏  举报