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简单来说分两部分,一个横向的滚动条,一个垂直滚动条 ...
随机推荐
- c# ms chart 控件使用方法
第一个简单的chart: spline// Create new data series and set it's visualattributes Series series = new ...
- 关于Amazon.com Seller 网络以及IP地址更换 官方回答
Greetings from Amazon Seller Support, I understand your concern that there will be a change of IP ad ...
- Scrum 项目6.0-展示Sprint回顾的过程及成果。
6.0----------------------------------------------------- sprint演示 1.坚持所有的sprint都结束于演示. 团队的成果得到认可,会感觉 ...
- Right-BICEP 测试四则运算程序
测试方法: Right-BICEP 测试计划: 1.边界测试是否正确 2.负数表示是否实现 3.是否有乘除法 4.是否可以选择题目数量 5.是否有输出方式 6.是否有括号 7.是否有重复查询 ...
- Spring的初始化：org.springframework.web.context.ContextLoaderListener
在web.xml中配置 <listener> <listener-class>org.springframework.web.context.ContextLoaderL ...
- 《高性能JavaScript》学习笔记——日更中
------------------2016-7-20更------------------ 最近在看<高性能JavaScript>一书,里面当中,有讲很多提高js性能的书,正在看的过程中 ...
- 【第五周】四则运算GUI
这次这个简陋的程序终于发布了,其实发布很简单(在windows平台),因为使用的是vs2008+qt4.7的组合,在微软自家平台上用一用还是很方便的,只需要在release编译生成的exe文件,加上几 ...
- php面试必知必会常见问题
1 说出常用的10个数组方法 我觉得数组比较最能体现PHP基础语法的一个数据结构了,下面给大家列一下常用的10个关于操作数组的函数 in_array(判断数组中是否有某个元素) implode(将数组 ...
- FZU2127_养鸡场
题目的意思为要你求出满足三边范围条件且周长为n的三角形的数目. 其实做法是直接枚举最短边,然后就可以知道第二条边的取值范围,同时根据给定的范围缩小范围. 同时根据第二条边的范围推出第三条边的范围,再次 ...
- AtCoder Regular Contest 076E Coneected？
题意 给出一个矩形区域和上面的m对整点,要求在矩形区域内画m条互不相交的线(可以是曲线)分别把m对点连接起来.只需要输出能不能做到. 分析 假设我们已经画了一条线.因为在这个题中有用的是平面区域之间的 ...