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>
  • 相关阅读:
    完整安装IIS服务
    IIS支持json、geojson文件
    C# ODP.Net oracle数据库操作 支持不安装客户端
    RabbitMQ —— spring标签整合实现（API介绍）
    RabbitMQ —— spring标签整合实现
    RabbitMQ —— spring整合发送异步消息
    RabbitMQ —— spring整合发送同步消息
    RabbitMQ Spring 相关类信息
    RabbitMQ 消息流转示意图
    RabbitDemo —— 延迟队列（在消息上设置TTL）
  • 原文地址：https://www.cnblogs.com/theWayToAce/p/8342491.html
Copyright © 2011-2022 走看看