zoukankan      html  css  js  c++  java

  • scrollbar样式

        .friends-list-content {
        height: 520px;
        overflow-y: scroll;
    }
    .friends-list-content::-webkit-scrollbar {  
        width:14px;
        height: 15px;
    }  
    .friends-list-content::-webkit-scrollbar-track,  
    .friends-list-content::-webkit-scrollbar-thumb {  
        border-radius: 999px;  
        border: 5px solid transparent;  
    }  
    .friends-list-content::-webkit-scrollbar-track {  
        box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  
    }  
    .friends-list-content::-webkit-scrollbar-thumb {  
        min-height: 20px;  
        background-clip: content-box;  
        box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  
    }  
    .friends-list-content::-webkit-scrollbar-corner {  
        background: transparent;  
    }
    <!Doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
<link href="base.css" rel="stylesheet" type="text/css">
<style type="text/css">
    .friends-list {
        font-size: 14px;
        width: 300px
    }
    .friends-list h3 {
        display: inline-block;
    }
    .friends-list ul {
    }
    .friends-list ul li {
        padding: 10px;
        position: relative;
        background: #F5F5F5;
        border-bottom: 1px solid #e1e1e1;
    }
    .friends-list ul li dl {
    }
    .friends-list ul li dl dt {
        padding: 2px 0px;
    }
    .friends-list ul li dl h3{
        width: 85px;
        font-size: 14px;
    }
    .friends-list ul li dl dd {
        padding: 2px 0px;
    }
    a.view {
        position: absolute;
        right: 10px;
        top: 20px;
        display: inline-block;
        padding: 2px 8px;
        border: 1px solid;
        border-color: #e1e1e1;
    }
    a.choose {
        position: absolute;
        right: 10px;
        top: 50px;
        padding: 2px 8px;
        border: 1px solid;
        border-color: #e1e1e1; 
    }
    a.chosed {
        border-color: #fff;
        background: #e45050;
        color: #fff;
    }
    .friends-list-content {
        height: 520px;
        overflow-y: scroll;
    }
    .friends-list-content::-webkit-scrollbar {  
        width:14px;
        height: 15px;
    }  
    .friends-list-content::-webkit-scrollbar-track,  
    .friends-list-content::-webkit-scrollbar-thumb {  
        border-radius: 999px;  
        border: 5px solid transparent;  
    }  
    .friends-list-content::-webkit-scrollbar-track {  
        box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  
    }  
    .friends-list-content::-webkit-scrollbar-thumb {  
        min-height: 20px;  
        background-clip: content-box;  
        box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  
    }  
    .friends-list-content::-webkit-scrollbar-corner {  
        background: transparent;  
    }
</style>
</head>
<body>
<div class="friends-list">
    <h3 style="padding: 0px 10px 10px;font-weight: 600">我的客户列表</h3>
    <div class="friends-list-content">
        <ul id="friends-list-ul">
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span>
                </dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span>
                </dd>
                <dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span>
                </dd>
            </dl>
            <a class="view" href="javascript:;">
                        查看
            </a>
            <a class="choose" href="javascript:;">
                        选择
            </a>
            </li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span>
                </dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span>
                </dd>
                <dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span>
                </dd>
            </dl>
            <a class="view" href="javascript:;">
                        查看
            </a>
            <a class="choose" href="javascript:;">
                        选择
            </a>
            </li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span>
                </dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span>
                </dd>
                <dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span>
                </dd>
            </dl>
            <a class="view" href="javascript:;">
                        查看
            </a>
            <a class="choose" href="javascript:;">
                        选择
            </a>
            </li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span>
                </dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span>
                </dd>
                <dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span>
                </dd>
            </dl>
            <a class="view" href="javascript:;">
                        查看
            </a>
            <a class="choose" href="javascript:;">
                        选择
            </a>
            </li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span>
                </dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span>
                </dd>
                <dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span>
                </dd>
            </dl>
            <a class="view" href="javascript:;">
                        查看
            </a>
            <a class="choose" href="javascript:;">
                        选择
            </a>
            </li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span>
                </dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span>
                </dd>
                <dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span>
                </dd>
            </dl>
            <a class="view" href="javascript:;">
                        查看
            </a>
            <a class="choose" href="javascript:;">
                        选择
            </a>
            </li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span>
                </dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span>
                </dd>
                <dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span>
                </dd>
            </dl>
            <a class="view" href="javascript:;">
                        查看
            </a>
            <a class="choose" href="javascript:;">
                        选择
            </a>
            </li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
            <li>
            <dl>
                <dt>
                <h3>客户名称</h3>
                <span>test</span></dt>
                <dd>
                <h3>联系方式</h3>
                <span>15874848596</span></dd><dd>
                <h3>车牌牌照</h3>
                <span>沪A23455</span></dd>
            </dl>
            <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li>
        </ul>
    </div>
</div>
</div>
</body>
</html>
  • 相关阅读:
    Oracle 跟踪sql 方法2
    [原] 通过客户端工具连接MySQL问题解决
    [原]文件比较小技巧
    JQuery上传插件Uploadify使用详解(转)
    sql 批量插入多条记录
    LinkButton中使用CommandArgument传递参数
    assembly、using（import）的区别(转)
    Ajax UpdatePanel 回传后滚动条位置变更解决方法
    Asp.net 动态加载css与js总结
    Treeview 分级加载方法
  • 原文地址：https://www.cnblogs.com/theWayToAce/p/8342491.html
Copyright © 2011-2022 走看看