php语句写左侧导航栏,请问像图中这样的左侧导航栏怎么写？

demo

*{

padding: 0px;

margin: 0px;

}

a{

text-decoration: none;

}

nav {

width: 180px;

}

nav li{position: relative;}

nav li a{

line-height: 28px;

display: block;

color: black;

background: #FAFAFA;

text-align: center;

position: relative;

font-size: 12px;

border: 1px solid #ECECEC;

margin-top: -1px;

}

nav li a:before{

content: "";

background: red url(写上雪碧图的地址) no-repeat;

display: block;

width: 14px;

height: 14px;

position: absolute;

top: 6px;

left: 31px;

border-radius: 100%;

}

nav li a:hover{

background:#FFFFFF;

border-right-color: #FFFFFF;

}

nav li .air{

position: absolute;

top: 50%;

margin-top: -9px;

right: 10px;

display: block;

background: #ED8B8A;

border-radius: 10px;

padding: 1px 9px;

color: white;

font-size: 12px;

}

• 用户信息
• 我的收藏
• 订阅信息
• 浏览历史
• 消息中心 1

大概帮写了一下.因为截图比较模糊.如果有色差和宽度大小不一样.稍微调整一下就可以了

把所需要用到的图片整理成雪碧图

nav li a:before{

content: "";

background: red url(写上雪碧图的地址) no-repeat;

....

}

这段css换成你的雪碧图地址.然后每个li标签添加个独一的class单独操作这个class 进行background-position选择图片

点击这里预览