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简单来说分两部分,一个横向的滚动条,一个垂直滚动条 ...
随机推荐
- 第九次ScrumMeeting博客
第九次ScrumMeeting博客 本次会议于11月4日(六)22时整在3公寓725房间召开,持续20分钟. 与会人员:刘畅.辛德泰.窦鑫泽.张安澜.赵奕.方科栋. 1. 每个人的工作(有Issue的 ...
- PHP中的闭包详解
PHP闭包(Closure)使用详解 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-02我要评论 本篇文章介绍了,PHP闭包(Closure)的使用介绍,需要的朋友参考下 不知不 ...
- YQCB冲刺周第二天
YQCB冲刺周第二天 1.实现用户记账的功能 2.实现用户头像的设置 3.实现个人设置的功能 遇到的问题: 记账的分类,数据库存取图片,页面跳转+超链接的使用 团队讨论的照片: ...
- 进阶系列（9）——linq
一.揭开linq的神秘面纱(一)概述 LINQ的全称是Language Integrated Query,中文译成“语言集成查询”.LINQ作为一种查询技术,首先要解决数据源的封装,大致使用了三大组 ...
- 设计模式PHP篇（三）————适配器模式
简单的适配器模式: interface Adaptor { public function read(); public function write(); } class File implemen ...
- mac下mysql5.7.10密码问题
mysql5.7.10刚安装好,会生成一个随机密码. 如果没记住这个随机密码,那么到mysql/bin/下执行mysql_secure_installation命令 按照提示重置密码和其他选项. ps ...
- BZOJ 2004 公交线路(状压DP+矩阵快速幂)
注意到每个路线相邻车站的距离不超过K,也就是说我们可以对连续K个车站的状态进行状压. 然后状压DP一下,用矩阵快速幂加速运算即可. #include <stdio.h> #include ...
- Python下json中文乱码解决办法
json.dumps在默认情况下,对于非ascii字符生成的是相对应的字符编码,而非原始字符,只需要 #coding=utf8 import json js = json.loads('{" ...
- Java发送http get/post请求，调用接口/方法
由于项目中要用,所以找了一些资料,整理下来. GitHub地址: https://github.com/iamyong 转自:http://blog.csdn.net/capmiachael/a ...
- Spring Boot系列教程五：使用properties配置文件实现多环境配置
一.前言 实际项目开发过程中会用到多个环境,比如dev,test,product环境,不同的环境可能使用不同参数,为便于部署提高效率,本篇主要通过properties配置文件来实现多环境的配置. 二. ...