制作京东右侧导航条

京东右侧导航条

<style type="text/css">
/*公共样式，去掉默认内外边距和列表样式*/
*{margin:0;padding:0;list-style: none;}
/*ul固定定位到右侧*/
  .items{position:fixed;right:0;top:200px;}
  /*li设置样式，有一个5px上外边距，看起来更美观*/
  .item{width:300px;height:50px;margin-top:5px;}
  /*span为行标签，转换为行内块标签，*/
  span{display:inline-block;}
  /*给装图片的span标签设置样式，灰色背景色是为了显示白色的图片，右浮动让图标显示在右侧；相对定位是因为图片只需要显示其中的一小部分，所以需要绝对定位，span作为父级需要相对定位，图片比span大很多，所以多余部分隐藏。*/
  .tu{
    width:47px;height:50px;float:right;
    background-color:#ccc;
    position:relative;overflow:hidden;
}
/*图片绝对定位*/
img{position:absolute;}
/*给每个图片不同的top值，因为图片已经绝对定位，所以会显示不同的图标*/
.item:nth-of-type(2) .tu img{top:-50px;}
.item:nth-of-type(3) .tu img{top:-100px;}
.item:nth-of-type(4) .tu img{top:-150px;}
.item:nth-of-type(5) .tu img{top:-193px;}
.item:nth-of-type(6) .tu img{top:-257px;}
/*图标对应不同的文字信息，设置好样式后，初始状态为隐藏*/