天猫右边的固定栏css

来源：互联网发布：行业专用软件编辑：程序博客网时间：2024/04/27 14:59

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style>
*{margin:0px;padding:0px;}
body{font-size:12px;}
ul li{list-style:none;}
.r-fixed{
height:100%;width:6px;
background:#666;
position:fixed;right:0px;
}
.logo{
right:6px;
width:30px;
top:35%;
position:absolute;
}
.logo ul li{
width:36px;height:35px;
line-height:35px;background:#666;
margin-bottom:1px;
border-radius:10% 0% 0% 10%;
position:relative;
background-image:url(pic/toolbars.png);
background-repeat:no-repeat;
}
.r-fixed .logo ul li:hover{
background-color:#F00;
}
.logo ul li p{
position:absolute;
width:0px;
height:35px;
line-height:35px;
text-align:center;
color:#FFF;
background:#F00;
right:34px;
top:0px;
display:block;
border-radius:10% 0% 0% 10%;
overflow:hidden;
transition:all 0.5s 0.2s;
}
.logo ul li:hover p{
width:80px;
}
.r-fixed .logo ul li:nth-child(1){
background-position:-90px -175px;
}
.r-fixed .logo ul li:nth-child(2){
background-position:-50px -2px;
}
.r-fixed .logo ul li:nth-child(3){
background-position:-50px -50px;
}
.r-fixed .logo ul li:nth-child(4){
background-position:-50px -100px;
}
.r-fixed .logo ul li:nth-child(5){
background-position:-190px -152px;
}
.r-fixed .logo ul li:nth-child(6){
background-position:-50px -150px;
}
</style>
</head>

<body>
<div class="r-fixed">
<div class="logo">
<ul>
<li><p>京东会员</p></li>
<li><p>京东会员</p></li>
<li><p>京东会员</p></li>
<li><p>京东会员</p></li>
<li><p>京东会员</p></li>
<li><p>京东会员</p></li>
</ul>
</div>
</div>
<body>
</html>

0 0