实现精灵图

要求：实现京东页面固定菜单栏

 

 

1.1实现步骤

1.1 使用精灵图抠图

html：

使用span实现 （div不行）

或者ul li也行 参考文章：

精灵图的使用yu题_吱吱复卿卿的博客-CSDN博客

<div id="fixNav">
           <div class="all-icon">
               <span class="user-icon"></span>
           </div>
           <div class="all-icon">
               <span class="shopping-icon"></span>
          </div>
          <div class="all-icon">
           <span class="love-icon"></span>
          </div>
          <div class="all-icon">
           <span class="time-icon"></span>
          </div>
          <div class="all-icon">
           <span class="talk-icon"></span>
          </div>
          <div class="all-icon">
           <span class="pet-icon"></span>
          </div>
  </div>

css：

*{
    margin: 0;
    padding: 0;
}
 
span{
    width: 20px;
    height: 20px;
    background-image: url(../img/sidebar-rightfixed-icons.png);
    margin-top: 9px;
    margin-left: 7px;
    /* display: inline-block指的是添加元素后可以再其他元素旁边，不使用换行符*/
    /* 可以不写 */
    display: inline-block; 
    background-repeat: no-repeat;
}

#fixNav{
     float: right;
     position:fixed;
}
.all-icon{
    
    width: 40px;
    height: 40px;
    background-color: rgb(71, 44, 33);
    display: flex;
    border-radius: 4px;
    background-repeat: no-repeat;
    margin-top: 0.9px;
   
}
.user-icon{
    background-position: -92px -180px;
} 
.shopping-icon{
    
    background-position: -55px -6px;
    
}
.love-icon{
    background-position: -54px -55px;
}
.time-icon{
    background-position: -54px -105px;
}
.talk-icon{
    background-position: -194px -155px;
}
.pet-icon{
    background-position: -54px -157px;
}

注意：

在background-position:定位时，采用先固定x或y轴的形式(此时向左移动为x负半轴。向上移动为y负半轴)

例如：这个图片(经过颜色反转后的)

因为要用到他白色的icon 但我看不清，所以反转更好找到

通过固定列来确定位置

先固定x或者y轴 确定行和列

 

1.2遇到的困难

1.position:fixed; 和 float:right 不融合

若我将position:fixed; 和 float:right 放在一个div中 显示不出想要的效果

 

原因：

float是脱离文档流的 是以z轴为坐标建立的 所以会显示不出来

2.在不同分辨率下使用position:fixed 会导致不同效果

或者在控制台直接不会显示出来 ，跑到可见范围外了(但关闭控制台又可以看见)

 第一次写文章 图片又重新截取的 可能画质不清楚 请见谅