                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /側(cè)欄工具條開發(fā)

怎么確定圖片的起始位置一定在中間呢

沒有看有定位置的樣式,我在微信前面加一個塊級元素也是緊貼的微信的,到底是怎么回事

$toolbar-size:?52px;
.toolbar?{
??position:?absolute;
??left:?50%;
??bottom:?5px;
??margin-left:?-$toolbar-size?/?2;
}


.toolbar-item?{
??position:?relative;
??display:?block;//把a標(biāo)簽顯示成塊級元素
??width:?$toolbar-size;//塊級元素的長
??height:?$toolbar-size;//塊級元素的高
??background-image:?url(../img/toolbar.png);
??background-repeat:?no-repeat;//圖片不重復(fù)
??margin-top:?1px;
}
.toolbar-item-pic{
??width:?170px;
??height:?350px;
??background-position:?0?0px;
}

.toolbar-item-weixin?{
??background-position:?0?-798px;//把塊級元素a標(biāo)簽所在圖片的位置移動
??&:hover?{
?????background-position:?0?-860px;
???}
}

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>toolbar</title>
????<link?rel="stylesheet"?href="css/index.css">
</head>
<body>
<div?class="toolbar">
????<a?href="javascript:;"?class="toolbar-item?toolbar-item-pic">

????</a>
????<a?href="javascript:;"?class="toolbar-item?toolbar-item-weixin">
????????<span?class="tool-layer"></span>
????</a>
????<a?href="javascript:;"?class="toolbar-item?toolbar-item-feedback"></a>
????<a?href="javascript:;"?class="toolbar-item?toolbar-item-app">
????????<span?class="tool-layer"></span>
????</a>
????<a?href="javascript:;"?class="toolbar-item?toolbar-item-top"></a>
</div>
</body>
</html>