侧边栏1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.side{
width: 54px;
height: 270px;
position: fixed;
right: 0;
top: 200px;
}
ul li{
position: relative;
width: 54px;
height: 54px;
border-bottom: 1px solid #FFFFFF;
float: left;
}
ul li .sidebox:hover{
width: 150px;
background: #ae1c1c;
}
ul li .sidebox{
position: absolute;
width: 54px;
height: 54px;
vertical-align:middle;
top: 0;
right: 0;
transition: all 0.3s;
background: #000;
opacity: 0.8;
filter: Alpha(opacity=80);
color: #fff;
font: 14px/54px "微软雅黑";
overflow: hidden;
}
.side ul li .sidetop{width:54px;height:54px;line-height:54px;display:inline-block;
background:#000;opacity:0.8;filter:Alpha(opacity=80);transition:all 0.3s;}
.side ul li .sidetop:hover{background:#ae1c1c;opacity:1;filter:Alpha(opacity=100);}
</style>
</head>
<body>
<div class="side">
<ul>
<li><a href="#"><div class="sidebox"><img src="image/slide2.png">客服中心</div></a></li>
<li><a href="#"><div class="sidebox"><img src="image/slide2.png">客户案例</div></a></li>
<li><a href="javascript:void(0);" ><div class="sidebox"><img src="image/slide2.png">QQ客服</div></a></li>
<li><a href="javascript:void(0);" ><div class="sidebox"><img src="image/slide2.png">新浪微博</div></a></li>
<li style="border:none;"><a href="#" class="sidetop"><img src="image/slide22.png"></a></li>
</ul>
</div>
<script>
</script>
</body>
</html>
