css--天猫侧边栏的实现

    
    
    
    


//给div一个高度，出现滚动条，显示侧边栏的fixed属性

//固定背景线

//右部一列图标写在ul,li里
    

        

            
            
会员权益 
        
        

            
                
购
物
车
        
        

            
            
我的资产 
        
        

            
            
我的收藏
        
        

            
            
历史记录 
        
        

            
            
充值中心 
        
    
    //底部的三个图标
    

        

            
用户反馈
        
        

            
            

                
                
            
        
        

            
会员权益 
    

通用样式：
*{
 margin:0;
    padding:0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}

.content{
    height:1000px;
}
ul,li{
    list-style: none;
}
/*侧边栏效果*/
.line{
    width:30px;
    height:100%;
    background: #000;
    position: fixed;//侧边栏固定
    right:0;定位在右边
    top:0;
}
.line-center{
    position: relative;//偏上小图标的定位
    right:0;
    top:15%;
}
.line-foot{
    position: absolute;//底部三个小图标的定位
    right:0;
    bottom:0;
}
.line ul li>a{
    width:30px;//a里是icon图标，变为块级元素，给宽高，让其居中
    height:30px;
    color: #2cd8ff;
    text-align: center;
    line-height: 30px;
    display: block;
}
.line ul li{
    position: relative;
}
.line-center li>div,.line-foot li:first-of-type>div,.line-foot li:last-of-type>div{
    height:30px;//点击图标显示的文字div
    width:90px;
    background: #666;
    color:#fff;
    position: absolute;
    top:0;
    left:-150px;
    line-height: 30px;
    text-align: center;
    opacity: 0;
    transition: all .3s linear;
}
.line-center li>div strong,.line-foot li:last-of-type>div strong{
    position: absolute;//小三角的定义
    right:-6px;
    top:8px;
    border-top:solid 6px transparent;
    border-left:solid 6px #666;
    border-bottom:solid 6px transparent;
}
.line-center li:nth-of-type(2){
    height:100px;
    padding-top:12px;//上部第二个图标特殊定义
}
.line-center li:nth-of-type(2) a{
    line-height:20px!important;//上部第二个图标特殊定义，给a内部行高
}
.line ul li:hover{
    background: #ff1513;//icon图标的hover属性，背景色改变
}
.line i{
    font-size: 22px;//调整i标签里icon图标的大小
}
.line-center li{
    margin-top: 10px;
}
.line-center li:hover div,.line-foot li:first-of-type:hover>div,.line-foot li:last-of-type:hover>div{
    opacity: 1;
    transform: translateX(60px);//li的hover属性，div移动
}
.appadv{
    width:154px;
    height:207px;
    background:url(../tmiconbg.png) no-repeat;
    position:absolute;
    right: 30px ;
    bottom: -30px;
    padding:45px 0 0 30px;
    opacity: 0;
    transition: opacity .3s linear;
}
.appadv img{
    width:100px;
}
.tmcode:hover div{
    opacity: 1;
}

效果图：