前言webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版）滚动条组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚...
转自：http://www.yiyifly.com/blog/下面是代码:html {overflow: auto;}body {position: absolute;top: 0;left: 0;bottom: 0;right: 0;overflow-y: scroll;overflow-x: hidden;}/*滚动条宽度*/::-webkit-scrollbar {width: 8px;}/* 轨道样式 */::-webkit-scrollbar-track {}/* Handle样式 */::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.2);}/*当前窗口未激活的情况下*/::-webkit-scrollbar-thumb:wi...
在线演示本地下载原文：https://www.cnblogs.com/qixidi/p/10072546.html
//autoload.js 1 ;! function(e) {2var autoload = e.autoload || {};3 e.autoload = autoload;4 e.autoload = newfunction() {5this.options = {6 id: ‘autoload‘,7 }8var o = this.options;9this.include = function(_opt) { 10 o = _opt; 11var id = document.getElementById(‘autoload‘); 12if(typeof id!==‘undefined‘){ 13var cssid = id.getAttribute(‘css‘); 14var jsid =...
CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为，一般用在滚动到顶部或者底部。背景滚动边界和滚动链接（boundary & chaining）在 APP 中经常使用的抽屉导航(drawer)中，我们期望的效果是：滚动到底部时，滚动停止，因为我们到达了"滚动边界"。但是在 Web 页面中滚动并不会停止，而是继续滚动抽屉后面的内容。效果如下：我们称这种行为叫滚动链接（scroll chaining）。下拉刷新 pull-to-refresh下拉刷新是一...
本篇主要包括：■ 自定义CSS■ 自定义Theme■ 自定义Package 自定义CSS有时候，需要自定义或重写Bootstrap默认的CSS。→在css文件夹下创建一个site.css→假设要对container类重写，在site.css中.container {background-color: #eee; }→把site.css引用到index.html中，并放置在bootstrap.min.cs的下方 <link href="css/bootstrap.min.css" rel="stylesheet" /><link href="css/site.css" rel="stylesheet" />→浏览index.h...
有时候需要用css设定cursor，一般而言用的比较多的是pointer或是move这类，殊不知其实cursor可以设置一个url，指向一个.cur文件，实现自定义光标。需要注意的是在IE浏览器上需要将url设定为绝对路径。比如：cursor: url(http://localhost:63342/free-drag-sort-temp/img/12.cur), default;后面需要设定一个值，指定url获取失败如何显示光标。原文：http://www.cnblogs.com/bluedreamviwer/p/4262129.html
当我们在逛聊天室或者论坛时，经常会碰到有人提问怎么向 Drupal 网站中添加自定义CSS —— 通常来讲，通过 Drupal 主题来进行添加最好。不过在某些情况下，因为环境限制或网站管理员没有访问主题文件的权限，而不得不考虑其它办法。 今天本文就来介绍一下，如何使用CSS Injector模块来为 Drupal 7 网站中添加自定义CSS。 （译注：不论是 CSS Injector 还是 CSS Editor，都可作为临时性的CSS添加和调整手段，但最终都还是应该...
在线演示本地下载原文：https://www.cnblogs.com/qixidi/p/10079584.html
原文链接：http://www.lrxin.com/archives-683.html首先看下效果：点击演示地址查看实例。首先，需要添加一段CSS隐藏所有的Checkbox复选框，之后我们会改变它的外观。要做到这一点需要添加一段代码到你的CSS文件中。/*** 隐藏默认的checkbox*/ input[type=checkbox] { visibility: hidden; }隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被...
效果展示Demo代码HTML<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Document</title> </head> <body><section><span></span></section> </body> </html> CSShtml,body{margin: 0;height: 100%; } body{display: flex;justify-con...
网上有各种用CSS3画图标，画漫画的代码，实在是有点吊！如果能为自己的网站也绘制一套CSS3图标，那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同，但是大势所趋，写写更健康。首先，我们要做到使用简单，简单到给元素加个类就能使用图标，然后我们还要支持可定制，比如颜色，大小。看下面的代码：<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>...
html<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><link rel="stylesheet" type="text/css" href="css/begin.css"/></head><body><section><h2>登记个人信息</h2><ol><li>课程进度推进通知</li><li>即时沟通<ol><li>QQ</li><li>微信</li></ol></li><li>快递收件地址</li></ol></section><section><h2>熟悉课程出品流程</h2><figure>课程出品流程</figure></section><section><h2>观看在线示例课程</h2><figu...
自定义滚动条实现此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：滚动条组成部分1. ::-webkit-scrollbar 滚动条整体部分2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。5. ::-webkit-scrollbar-track-piece 内层...
CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。效果如下图所示：1、当未鼠标未放到图片上的效果： 2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：代码如下：<!DOCTYPE html> <html> <head> <meta c...