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简单来说分两部分,一个横向的滚动条,一个垂直滚动条 ...
随机推荐
- JavaScript设计模式-----命令模式的简单应用
命令模式是最简单和优雅的模式之一,命令模式中的命令(command)是指一个执行某些特定事情的指令. 应用场景:有时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道被请求的操作是什么, ...
- python3【基础】-文件操作
1. python对文件操作流程: 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件操作 关闭文件 现有如下文件: 昨夜寒蛩不住鸣. 惊回千里梦,已三更. 起来独自绕阶行. 人悄悄,帘外月胧明. ...
- MacOS下安装BeautifulSoup库及使用
BeautifulSoup简介 BeautifulSoup库是一个强大的python第三方库,它可以解析html进行解析,并提取信息. 安装BeautifulSoup 打开终端,输入命令: pip3 ...
- 多tab点击切换
现在来一个小练习,就是用js实现多tab之间的切换: <body> <ul id="tab"> <li id="tab1"> ...
- IDEA中Git的更新/提交/还原方法
记录一下在IDEA上怎样将写的代码提交到GitHub远程库: 下面这个图是基本的提交代码的顺序: 1. 将代码Add到stage暂存区本地修改了代码后,需先将代码add到暂存区,最后才能真正提价到gi ...
- 【C】多线程编程笔记
1. pthread_create(pthread类型指针变量 ,NULL ,函数 ,函数参数[多个参数用结构体传]) 2. pthread_join(pthread类型指针变量, 返回一般为null ...
- MySQL专题 2 数据库优化 Slow Query log
MySQL Server 有四种类型的日志——Error Log.General Query Log.Binary Log 和 Slow Query Log. 第一个是错误日志,记录 mysqld 的 ...
- mysql（六）索引的数据结构
先做抽象定义如下: 定义一条数据记录为一个二元组[key, data],key为记录的键值,对于不同的数据记录,key是互不相同的:data为数据记录除key外的数据. B-tree的特点: d为大于 ...
- 第155天：canvas(二）
一.添加样式和颜色 在前面的绘制矩形章节中,只用到了默认的线条和颜色. 如果想要给图形上色,有两个重要的属性可以做到. fillStyle = color 设置图形的填充颜色 strokeSt ...
- EL语法 ${person.id} 这里面的id指的是实例对象的成员变量
EL语法 ${person.id} 这里面的id指的是实例对象的成员变量