2 顶部关闭按钮

• 效果图:

  
  
  image.png

• 素材:

  
  
  top.jpg

• 下载字体:(https://icomoon.io/app/#/select/library)
  
  image.png

• 过程:

  
  
  image.png

• 注意点:

image.png

image.png

• 代码如下:

index.html

    
    
    
    
    
    
    
    
    


    

        
            
        
    

• base.css

/*版心*/
.w{
    width: 1190px;
    margin: auto;
}
.fr{
    float: right;
}
.fl{
    float: left;
}

/*声明  fonts导入(字体)注意[../fonts/]写法*/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?etxksv');
  src:  url('../fonts/icomoon.eot?etxksv#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?etxksv') format('truetype'),
    url('../fonts/icomoon.woff?etxksv') format('woff'),
    url('../fonts/icomoon.svg?etxksv#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}



/*京东 顶部 star*/
.J_event{
    height: 80px;
    background-color: #000;
}
.J_event a{
    display: block;
    height: 80px;
    background: url(../images/top.jpg) no-repeat;
    position: relative;  /*子绝父相  */
}
.J_event a i{  /*小×号*/
    width: 20px;
    height: 20px;
    /*background-color: pink;*/
    position: absolute;  /*子绝父相  要以a*/
    right: 0;
    top: 5px;
    font-family: "icomoon";  /*声明字体*/
    font-style: normal;  /*字体不倾斜*/
    text-align: center;  /*水平居中*/
    line-height: 20px;  /*垂直居中*/
    color: #fff;  /*小×号的颜色*/
    background: rgba(0,0,0,0.4);  /*半透明*/
}



/*京东 顶部 end*/