技術標籤：前端學習之路css

css中經常對列表新增圖示，為了便於新增圖示，我們一次性將圖示新增到一張圖中，比如
有5個span每個span中有i，i中有圖示 我們就可以這樣

.content_toolbar span i{
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("images/icon_sprite.png") no-repeat 0 0;
    vertical-align: middle;
    margin-right: 10px;
}
.
 
content_toolbar span:nth-child(1) i{
background-position:-60px -20px ;
}
.content_toolbar span:nth-child(2) i{
    background-position: -20px -20px;
}
.content_toolbar span:nth-child(3) i{
    background-position: -40px -240px;
}
.content_toolbar span:nth-child(4) i{
    background-position:-100px -20px ;
}
.
 
content_toolbar span:nth-child(5) i{
    background-position: -40px -300px;
}

這樣就可以找到對應的圖示，具體位置px，提前在photoshop上找好