在過去的一年中,我注意到很多網站已經將他們的共享/人氣統計數據移動到左側邊欄,即使您向下滾動窗口,該邊欄仍然可以在屏幕上看到。以下是具有此類功能的網頁的網址:http://news.cnet.com/8301-31921_3-57371426-281/anti-sopa-forces-have-isp-snooping-bill-in-their-crosshairs如何創建評論數量,Facebook喜歡計數和其他社交媒體流行統計的左邊欄?
什麼是創建這種側邊欄的最佳方法?
在過去的一年中,我注意到很多網站已經將他們的共享/人氣統計數據移動到左側邊欄,即使您向下滾動窗口,該邊欄仍然可以在屏幕上看到。以下是具有此類功能的網頁的網址:http://news.cnet.com/8301-31921_3-57371426-281/anti-sopa-forces-have-isp-snooping-bill-in-their-crosshairs如何創建評論數量,Facebook喜歡計數和其他社交媒體流行統計的左邊欄?
什麼是創建這種側邊欄的最佳方法?
一個簡單的方法是使用CSS來進行絕對定位它,所以它出現高於一切
試試這個您的HTML頁面上設置的Z指數
<style>
.side-sharebar {
display: block;
left: 482px;
position: fixed;
top: 20px;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #EEEEEE;
border-color: #CCCCCC transparent #CCCCCC#CCCCCC;
border-radius: 3px 0 0 3px;
border-style: solid;
border-width: 1px;
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFFFFF inset;
left: auto !important;
margin-left: -98px;
margin-top: 2px;
position: absolute;
top: 0;
width: 76px;
}
.side-sharebar ul li {
border-bottom: 1px solid #CCCCCC;
box-shadow: 0 1px 0 #FFFFFF;
padding: 10px 2px 10px 0;
position: relative;
text-align: center;
}
.side-sharebar ul {
list-style: none outside none;
}
</style>
....
<div class="side-sharebar"><ul><li>one</li><li>two</li></ul></div>