1. 程式人生 > >天貓右邊的固定欄css

天貓右邊的固定欄css

<!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>