Question

在过去一年中，我注意到许多网站已将其共享/受欢迎度统计信息移至左侧边栏，即使您向下滚动窗口，该左侧边栏仍会在屏幕上显示。以下是具有此类功能的网页的网址：http://news.cnet.com/8301-31921_3-57371426-281/anti-sopa-forces-have-isp-snooping-bill-in-their-crosshairs

创建这种侧边栏的最佳方法是什么？

Answer 1

一种简单的方法是使用CSS来绝对定位并设置Z索引，使其显示在其他所有内容

Answer 2

在您的HTML页面上尝试此操作

<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>

你如何创建带有评论计数的左侧边栏，像计数的Facebook和其他社交媒体流行度统计数据？

2 个答案: