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>
scrollbar样式的更多相关文章
- Android必知必会-自定义Scrollbar样式
如果移动端访问不佳,请使用–>GitHub版 背景 设计师给的设计图完全依照 IOS 的标准来的,导致很多细节的控件都得自己重写,最近的设计图中有显示滚动条,Android 默认的滚动条样式(带 ...
- CSS3：scrollbar样式设置
CSS3:scrollbar样式设置 1. 设置出现滚动条的方式 overflow:scroll --- x和y方向都会出现滚动条 或者 overflow-x:scroll --- 只有x方向出现滚动 ...
- scrollbar样式设置
转载:https://segmentfault.com/a/1190000012800450?utm_source=tag-newest author:specialCoder 一 前言 在CSS 中 ...
- Angular5 自定义scrollbar样式之 ngx-malihu-scrollbar
简介 此插件是 Malihu jQuery Scrollbar 为了在 Angular2+ 环境下使用,封装的一个ts的版本.提供directive和service. 从安装量来看,它比不过 perf ...
- Angular5 自定义scrollbar样式之 ngx-perfect-scollbar
版本 angular 5.0 ngx-perfect-scrollbar ^5.3.5 为什么不用 ngx-perfect-scrollbar 最新的版本 v7 呢? 因为它报错啊!!! 每次init ...
- css scrollbar样式设置
参考链接:https://segmentfault.com/a/1190000012800450
- WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...
- 【转】WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合 ...
- WPF 自定义ScrollViwer
ScrollViewer自定义样式 ScrollViewer在各种列表.集合控件中广泛使用的基础组建,先看看效果图: 如上图,ScrollViewer简单来说分两部分,一个横向的滚动条,一个垂直滚动条 ...
随机推荐
- Amazon - removed your selling privileges and placed a temporary hold on any funds - 1
Hello, We are writing to let you know that we have removed your selling privileges and placed a temp ...
- Android连接SQLServer详细教程（数据库+服务器+客户端）
摘星 标签: android连接sql http://blog.csdn.net/haoxingfeng/article/details/9111105
- 用python脚本计算某一个文件的行数
python可以统计文件的行数,你相信吗?不管你信不信反正我信了.下面我们来看一下python怎样统计文件的行数,代码很简单,我也做了注释,很简单的实现... 1 2 3 4 5 6 7 8 9 10 ...
- 细节--服务器mysql空密码
在部署致服务器的时候 发现mysql密码为空的情况 如果采用 root账户的话 试过很多 比如不写下面这行 <property name="password" value=& ...
- 解决zabbix使用中文是出现乱码的问题
解决zabbix使用中文是出现乱码的问题 ①:上传windows的simhei.ttf字体到zabbix服务器的/usr/share/zabbix/fonts/目录下 ②:编辑/usr/sh ...
- c文法
程序→<外部声明>|<程序> 外部声明→<功能定义>|<声明> 功能定义→<声明复合语句的类型> 类型→<VOID| CHAR| IN ...
- python接口自动化测试框架实现之操作mysq数据库
python操作mysql数据库需要使用到mysqlclient库. 安装:pip install mysqlclient python连接mysql数据库分以下步骤: 1.与mysql建立连接: 2 ...
- 【php】提交的特殊字符会被自动转义
在处理mysql和GET.POST的数据时,常常要对数据的引号进行转义操作. PHP中有三个设置可以实现自动对’(单引号),”(双引号),\\(反斜线)和 NULL 字符转移. PHP称之为魔术引号, ...
- mysql 慢查询，查询缓存，索引，备份，水平分割
1.开启慢查询 在mysql的配置文件my.ini最后增加如下命令 [mysqld]port=3306slow_query_log =1long_query_time = 1 2.查看慢查询记录 默认 ...
- SQL中的逻辑运算符
逻辑运算符和比较运算符一样,都是返回 true 或 false 值得布尔数据类型. 运算符 行为 ALL 如果一个比较集中全部都是 true ,则值为 true AND 如果两个布尔值表达式均为 ...