层级,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;
}
