java京东左侧固定层_京东首页右侧固定层

需求说明

制作京东首页右侧的固定层，6个图标：京东会员、购物车、我的关注、我的足迹、我的消息和咨询JIMI

默认状态下仅显示图标，背景颜色为深灰色；当鼠标移至图标上时，背景颜色为深红色，并且显示文本

css

*{margin: 0; padding:0; font-size: 12px;}

ul,ol,li{list-style: none;}

#nav{width: 100px; margin: 0 auto;}

#nav li{height:36px;}

#nav li span{

display: block;

float: right;

width: 35px;

height: 35px;

border-bottom-left-radius: 5px;

border-top-left-radius: 5px;

background: #7a6e6e url("../images/toolbars.png") no-repeat;

}

#nav li span:hover{ background-color: red;}

#nav li:nth-of-type(1) span{background-position: 0px -15px;}

#nav li:nth-of-type(2) span{background-position: 0px -57px;}

#nav li:nth-of-type(3) span{background-position: 1px -106px;}

#nav li:nth-of-type(4) span{background-position: 0px -156px;}</