星火卓越

CSS3自定义滚动条样式 -webkit-scrollbar

前言

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。

演示

来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版）

滚动条组成

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

简洁版

这里就不贴出详细代码了，demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式

[css] view plain copy

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #F5F5F5;
}
/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

详细设置

定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？

伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在css3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。

[css] view plain copy

:horizontal
//horizontal伪类适用于任何水平方向上的滚动条
:vertical
//vertical伪类适用于任何垂直方向的滚动条
:decrement
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start
//start伪类适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面
:end
//end伪类适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面
:double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button
no-button伪类表示轨道结束的位置没有按钮。
:corner-present
//corner-present伪类表示滚动条的角落是否存在。
:window-inactive
//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3自定义滚动条-轩枫阁title>
<style>
header
{
    font-family: 'Lobster', cursive;
    text-align: center;
    font-size: 25px;    
}

#info
{
    font-size: 18px;
    color: #555;
    text-align: center;
    margin-bottom: 25px;
}

a{
    color: #074E8C;
}

.scrollbar
{
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.force-overflow
{
    min-height: 450px;
}

#wrapper
{
    text-align: center;
    width: 500px;
    margin: auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border: 2px solid #555555;
}


/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb
{
    background-color: #0ae;
    
    background-image: -webkit-gradient(linear, 0 0, 0 100%,
                       color-stop(.5, rgba(255, 255, 255, .2)),
                       color-stop(.5, transparent), to(transparent));
}


/*
 *  STYLE 6
 */

#style-6::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb
{
    background-color: #F90;    
    background-image: -webkit-linear-gradient(45deg,
                                              rgba(255, 255, 255, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, .2) 50%,
                                              rgba(255, 255, 255, .2) 75%,
                                              transparent 75%,
                                              transparent)
}


/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-7::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
                                       left bottom,
                                       left top,
                                       color-stop(0.44, rgb(122,153,217)),
                                       color-stop(0.72, rgb(73,125,189)),
                                       color-stop(0.86, rgb(28,58,148)));
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track
{
    border: 1px solid black;
    background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
    background-color: #000000;    
}


/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb
{
    background-color: #F90;    
    background-image: -webkit-linear-gradient(90deg,
                                              rgba(255, 255, 255, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, .2) 50%,
                                              rgba(255, 255, 255, .2) 75%,
                                              transparent 75%,
                                              transparent)
}


/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
    background-color: #AAA;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(90deg,
                                              rgba(0, 0, 0, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(0, 0, 0, .2) 50%,
                                              rgba(0, 0, 0, .2) 75%,
                                              transparent 75%,
                                              transparent)
}


/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-11::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-11::-webkit-scrollbar-thumb
{
    background-color: #3366FF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(0deg,
                                              rgba(255, 255, 255, 0.5) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, 0.5) 50%,
                                              rgba(255, 255, 255, 0.5) 75%,
                                              transparent 75%,
                                              transparent)
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #444444;
}

#style-12::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-12::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
                                              transparent,
                                              rgba(0, 0, 0, 0.4) 50%,
                                              transparent,
                                              transparent)
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
                                              transparent,
                                              rgba(0, 0, 0, 0.4) 50%,
                                              transparent,
                                              transparent)
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
    background-color: #FFF;
    background-image: -webkit-linear-gradient(90deg,
                                              rgba(0, 0, 0, 1) 0%,
                                              rgba(0, 0, 0, 1) 25%,
                                              transparent 100%,
                                              rgba(0, 0, 0, 1) 75%,
                                              transparent)
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-gradient(linear,
                                       40% 0%,
                                       75% 84%,
                                       from(#4D9C41),
                                       to(#19911D),
                                       color-stop(.6,#54DE5D))
}

/*
 *  STYLE 16
 */

#style-16::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-16::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-16::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-linear-gradient(top,
                                              #e4f5fc 0%,
                                              #bfe8f9 50%,
                                              #9fd8ef 51%,
                                              #2ab0ed 100%);
}


style>
head>
<body>
      <div id="wrapper">
        <div class="scrollbar" id="style-default">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-1">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-2">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-3">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-4">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-5">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-6">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-7">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-8">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-9">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-10">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-11">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-13">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-14">
          <div class="force-overflow">div>
        div>

        <div class="scrollbar" id="style-15">
          <div class="force-overflow">div>
        div>
    div>
body>
html>

https://www.cnblogs.com/ertingbo/p/7151566.html

DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts 信息可视化数据分析
ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
uniapp使用内置地图选择插件，实现地址选择并在地图上标点神夜大侠 Uniapp vue.js uniapp
uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
装修日记（三十七） huangluan
因为没看到实际的颜色，也没有看到样式，老婆也没有参与，久久下不了单。周日下午三四点钟样子，老婆外甥女打来电话，让老婆和我去欧派看看，如果满意可以在欧派订，毕竟欧派是大品牌，品质还是有保障的。说她的朋友老颜比较过，欧派的实际价格可能比其他牌子贵点，但按照其阴影的计算面积，贵不了多少。殴派有两间专卖店，一间是底柜木饰定制，另外一间是厨房定制。我们先在海悦城店观摩，反复比较，老婆在她外甥女的参谋下定下客
HTML中"bgcolor"与"background-color"的区别 Sardar_ html
bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
一串奇特的代码 hi武林高手
一个空的div元素，所有浏览器的渲染结果都不一样。body{display:table-cell;vertical-align:middle;//垂直居中}div{margin:atuo;height:100px;width:100px;outline:inset100pxgreen;//设置4个边框的样式outline-offset:-125px;//对轮廓进行偏移}html{display：t
qml Text 文本可能只会写BUG QT6 qt qml
Text文本Text元素是QML中用于显示文本的基本元素。它可以显示静态文本，也可以通过绑定属性来显示动态文本。Text元素支持多种文本格式和样式，并且可以通过各种属性来控制文本的显示效果。常用属性text:要显示的文本内容。Text{text:"Hello,World!"}color:文本的颜色。Text{text:"Hello,World!"color:"blue"}font.family:字
悠悠岁月——（法）安妮·埃尔诺欧阳云飞
崭新的风格和出色的语言使《悠悠岁月》成为一部杰作，安妮·埃尔诺也因此当之无愧地跻身于法国当代第一流作家之列。——“21世纪年度最佳外国小说”评选委员会一种无人称自传，刚开始读还不了解作者的写作样式，有点茫然，摸不着头脑。但是读着读着就明白了作者的写作脉络，而且有点上头，停不下来。读的时候很畅快，有一种似曾相识的感觉，回想过去，再看看现在，仿佛两个平行时空串联起来，我们也恨不得穿越回去亲身经历时代的
Axure移动端原型模板实例100+，APP原型设计模版，高保真高交互含大组件库默林工作室 AxureRP原型模板 axure 原型模板
作品概况页面数量：共100+页（长期更新中…）源文件格式：rp格式，兼容AxureRP9/10，非程序软件无源代码适用领域：APP、小程序、H5作品特色本品为「移动端原型模板实例100+」，属于APP+H5+小程序的页面实例原型模板，主要运用了中继器＋动态面板，栏目丰富样式多多，高保真高交互高复用（带仿真交互），可以快速组装成美观大方的原型图。该原型模板的页面尺寸为375×812像素，推荐演示设备
利用Axure的动态面板和中继器完成下拉框选择功能 Dannyoung 学习之路 Axure 动态面板中继器
这是在练习Axure时找到的一个案例，自己根据博主的说明一步步操作后发现不能实现对应的效果，幸好博主提供了源文件，通过对源文件的拆解，最终实现了下拉框选项的功能。这里采用的Axure版本这里就在博主提供的基础上进行说明。新建Axure文件后，第一步是新增一个动态面板，设置一下样式，主要是设置控件的大小和显示方式，为了更好地操作，自动调整为内容尺寸前面的勾可以在完成所有功能以后去勾选上。第二步，在前
元宵节，再见牛来牛去_2165
元宵节，没有吃到元宵，只吃了一大桌酒菜。是公司聚餐，把大家伙围拢到一起，搞了几个节目，自娱自乐了一番。早起的鞭炮声，还有空气中飘荡的烟雾，预示着今天是个节日。其余的，并没有什么特殊的情怀。记得，小时候，大街上，小巷子，到处都是锣鼓喧天，热闹非凡。这样热闹的场面，也只有元宵节会有。有舞狮，有武术，样式繁多，看的人们眼花缭乱。街上人头攒动，挤扛不动，夹杂在人群中央，感觉到前所未有的安全感，贼好看。如今
excel打开html非常慢,解决EXCEL表格打开缓慢，文件异常臃肿庞大史文林 excel打开html非常慢
相信很多每天在操作EXCEL的朋友，会觉得自己的表格一天比一天大，一天比一天打开慢，但表格里面实际也没多少内容。这其中的主要原因之一，就是你喜欢在多个表格之间互相复制来复制去，粘贴的时候也不是使用选择性粘贴。把原来表格里面的所有样式设置内容和不必要的数据都复制过来了，导致整个工作薄变得异常臃肿庞大。接下来我们就来分析下具体发生了什么情况和如何解决这个问题吧！1.看这个“源文件”，文件大小居然达到了
CSS中如何实现鼠标悬停效果？神明木佑 css 前端
在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
微信小程序常用开发框架有哪些？ +码农快讯+ 分享微信小程序小程序开发
想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。1：WeUI小程序–使用教程https://weui.io/官方介绍：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大
js的书写位置和css的书写位置的区别？为什么要这样写？李是啥也不会 javascript css 开发语言
JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
【H2O2|全栈】关于CSS（3）CSS基础（三）过期的H2O2 【H2O2】CSS入门 css 前端
目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：
python 标准库之openpyxl的常规操作真的学不了一点。。。 Python学习 python
目录openpyxl（Excel文件处理模块）读sheet读sheet中单元格合并单元格openpyxl模块基本用法安装方法基本使用读取Excel文档（一）获取工作表（二）获取单元格（三）获取行和列写入Excel文档（一）写入单元格（二）保存文件设置单元格样式（一）字体（二）对齐方式（三）边框（四）设置行高和列宽（五）合并和拆分单元格openpyxl(Excel文件处理模块)读sheet读取Exc
css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
css3实现鼠标放到图标上自动切换图标黄丫丫07 css css3 html
作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
CSS实现鼠标移动到购物车显示详情 AsiaFT. css css3 html
需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
【无标题】 2401_84102689 2024年程序员学习 java
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Mark
el-table实现多列排序 KOi.. vue.js 前端 javascript
业务需求el-table需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留，但是el-table默认是单列排序。页面/***@header-click="handleHeaderCLick"*点击表头文字触发的监听器**@sort-change="handleTableSort"*点击表头排序标签触发定时器*/data:{tmpTotal:0,tabl
网页隐藏版之一行小说阅读器流落的小鬼 css 前端 javascript 摸鱼神器最佳隐藏
网页隐藏版之一行小说阅读器显示效果：懒人操作：页面鼠标右键，新建文本文档，复制黏贴以下代码，点击左上角【文件】，点击【另存为】，如下设置，后缀为.html，这样一个本地网页就完成啦~https://baidu.combody{margin:0;padding:0;}p{font-size:15px;margin:0;padding:0;}/*设置文件输入框的样式*/#fileInput{font-
vue el-dialog嵌套解决无法点击问题 javachen__ vue.js elementui
产生原因:当你在el-dialog上嵌套另一个el-dialog窗口时，可能会遇到内部对话框无法点击的问题。这通常是由于嵌套对话框的遮罩层（overlay）或其他样式问题造成的。解决方案:如果你的el-dialog组件支持append-to-body属性，你可以将对话框附加到body元素上，以避免z-index问题。外层对话框内层对话框
H5新增标签和属性 yx_back Html H5新增属性 H5新增标签
H5新增标签和属性H5新增标签1、结构标签2、媒体标签3、表单标签4、其他功能标签H5新增属性1、对于js进行添加的属性。2、网页中标签中加入小图标的样式代码3、iframe新增属性4、其他属性H5全局属性可直接在标签里插入的：data-自定义属性名字；H5新增标签1、结构标签header：某个区块的头部信息/标题；section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节
【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpack css rust
问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
css3溢出隐藏的方法 DDOS防御网络技术 css3 前端 css
CSS3提供了几种方法来处理元素内容的溢出问题，以下是一些常见的方法：1.**使用`overflow`属性**：-`overflow:hidden;`：隐藏溢出的内容。-`overflow:scroll;`：如果内容溢出，将显示滚动条。-`overflow:auto;`：如果内容溢出，将显示滚动条，但滚动条只在需要时显示。2.**使用`text-overflow`和`white-space`属性*
css滚动条隐藏但是可以滚动每一天，每一步 HTML/CSS css 前端 javascript
要实现滚动条隐藏但仍然可以滚动的效果，可以使用CSS来隐藏滚动条，同时允许鼠标的滚轮或触摸板滚动。/*隐藏滚动条，但仍可滚动*/.scrollable{overflow:auto;/*保持内容可滚动*/scrollbar-width:none;/*对于现代浏览器，隐藏滚动条*/}/*针对IE和Edge的隐藏滚动条样式*/.scrollable::-webkit-scrollbar{display:
js动画html标签（持续更新中） 843977358 html js 动画 media opacity
1.jQuery 效果 - animate() 方法改变 "div" 元素的高度： $(".btn1").click(function(){ $("#box").animate({height:"300px
springMVC学习笔记 caoyong springMVC
1、搭建开发环境 a>、添加jar文件，在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar b>、在web.xml中配置前端控制器 <servlet> &nbs
POI中设置Excel单元格格式 107x poi style 列宽合并单元格自动换行
引用：http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结：先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.
jquery 获取A href 触发js方法的this参数无效的情况一炮送你回车库 jquery
html如下： <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>" j
md5 3213213333332132 MD5
import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq
完全卸载干净Oracle11g sophia天雪 orale数据库卸载干净清理注册表
完全卸载干净Oracle11g A、存在OUI卸载工具的情况下：第一步：停用所有Oracle相关的已启动的服务；第二步：找到OUI卸载工具：在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中 &
apache 的access.log 日志文件太大如何解决 darkranger apache
CustomLog logs/access.log common 此写法导致日志数据一致自增变大。直接注释上面的语法 #CustomLog logs/access.log common 增加： CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log
Hadoop单机模式环境搭建关键步骤 aijuans 分布式
Hadoop环境需要sshd服务一直开启，故，在服务器上需要按照ssh服务，以Ubuntu Linux为例，按照ssh服务如下： sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件，将JAVA_HOME设置为Java
PL/SQL DEVELOPER 使用的一些技巧 atongyeye java sql
1 记住密码这是个有争议的功能，因为记住密码会给带来数据安全的问题。但假如是开发用的库，密码甚至可以和用户名相同，每次输入密码实在没什么意义，可以考虑让PLSQL Developer记住密码。位置：Tools菜单－－Preferences－－Oracle－－Logon HIstory－－Store with password 2 特殊Copy 在SQL Window
PHP：在对象上动态添加一个新的方法 bardo 方法动态添加闭包
有关在一个对象上动态添加方法，如果你来自Ruby语言或您熟悉这门语言，你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象，并给这个对象添加一个额外的方法。好！不说Ruby了，让我们来谈谈PHP PHP未提供一个“标准的方式”做这样的事情，这也是没有核心的一部分... 但无论如何，它并没有说我们不能做这样
ThreadLocal与线程安全 bijian1013 java java多线程 threadLocal
首先来看一下线程安全问题产生的两个前提条件： 1.数据共享，多个线程访问同样的数据。 2.共享数据是可变的，多个线程对访问的共享数据作出了修改。实例：定义一个共享数据： public static int a = 0;
Tomcat 架包冲突解决征客丶 tomcat Web
环境： Tomcat 7.0.6 win7 x64 错误表象：【我的冲突的架包是：catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突，不知道其他架包冲突时是不是也报这个错误】严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep
【Scala三】分析Spark源代码总结的Scala语法一 bit1129 scala
Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象，等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class 2. 方法默认值 defaultMinPartitions就是一个默认值，类似C++的方法默认值
java 线程池管理机制 BlueSkator java线程池管理机制
编辑 Add Tools jdk线程池一、引言第一：降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二：提高响应速度。当任务到达时，任务可以不需要等到线程创建就能立即执行。第三：提高线程的可管理性。线程是稀缺资源，如果无限制的创建，不仅会消耗系统资源，还会降低系统的稳定性，使用线程池可以进行统一的分配，调优和监控。
关于hql中使用本地sql函数的问题（问-答） BreakingBad HQL 存储函数
转自于：http://www.iteye.com/problems/23775 问：我在开发过程中，使用hql进行查询（mysql5）使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好，但是我直接把它写在hql语句里面（from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
读《研磨设计模式》-代码笔记-迭代器模式-Iterator bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象内部表示 * * 个人觉得，为了不暴露该
常用SQL chenjunt3 oracle sql C++c C#
--NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA
数学是科学技术的语言 comsci 工作活动领域模型
从小学到大学都在学习数学，从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学，看起来好像掌握了这些数学知识，但是在工作中却很少真正用到这些知识，为什么？最近在研究一种开源软件-CARROT2的源代码的时候，又一次感觉到数学在计算机技术中的不可动摇的基础作用，CARROT2是一种用于自动语言分类（聚类）的工具性软件，用JAVA语言编写，它
Linux系统手动安装rzsz 软件包 daizj linux sz rz
1、下载软件 rzsz-3.34.tar.gz。登录linux，用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf rzsz-3.34.tar.gz 3、安装 cd rzsz-3.34 ; make posix 。注意：这个软件安装与常规的GNU软件不
读源码之:ArrayBlockingQueue dieslrae java
ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
C语言学习九枚举的定义和应用 dcj3sjt126com c
枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne
Vagrant 三种网络配置详解 dcj3sjt126com vagrant
Forwarded port Private network Public network Vagrant 中一共有三种网络配置，下面我们将会详解三种网络配置各自优缺点。端口映射(Forwarded port)，顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上，访问宿主计算机端口时，请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为： c
16.性能优化-完结 frank1234 性能优化
性能调优是一个宏大的工程，需要从宏观架构(比如拆分，冗余，读写分离，集群，缓存等)，软件设计（比如多线程并行化，选择合适的数据结构），数据库设计层面（合理的表设计，汇总表，索引，分区，拆分，冗余等）以及微观（软件的配置，SQL语句的编写，操作系统配置等）根据软件的应用场景做综合的考虑和权衡，并经验实际测试验证才能达到最优。性能水很深，笔者经验尚浅，赶脚也就了解了点皮毛而已，我觉得
Word Search hcx2013 search
Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
Spring4新特性——Web开发的增强 jinnianshilongnian spring spring mvc spring4
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
CentOS安装配置tengine并设置开机启动 liuxingguome centos
yum install gcc-c++ yum install pcre pcre-devel yum install zlib zlib-devel yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens
第14章工具函数（上） onestopweb 函数
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
Xelsius 2008 and SAP BW at a glance blueoxygen BO Xelsius
Xelsius提供了丰富多样的数据连接方式，其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢？以下Wiki文章应该提供了全面的概览。 http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
oracle表空间相关 tongsh6 oracle
在oracle数据库中，一个用户对应一个表空间，当表空间不足时，可以采用增加表空间的数据文件容量，也可以增加数据文件，方法有如下几种： 1.给表空间增加数据文件 ALTER TABLESPACE "表空间的名字" ADD DATAFILE '表空间的数据文件路径' SIZE 50M; &nb
.Net framework4.0安装失败 yangjuanjava .net windows
上午的.net framework 4.0，各种失败，查了好多答案，各种不靠谱，最后终于找到答案了和Windows Update有关系，给目录名重命名一下再次安装，即安装成功了！下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法： 1.运行cmd，输入net stop WuAuServ 2.点击开

CSS3自定义滚动条样式 -webkit-scrollbar

前言

演示

滚动条组成

简洁版

详细设置

你可能感兴趣的:(CSS3自定义滚动条样式 -webkit-scrollbar)