webkit

点击上方“前端自习课”关注，学习起来~ 导航条对于每一个Web前端攻城狮来说并不陌生，但是毛玻璃可能会相对陌生一些。简单的说，毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。 本次分享的主题：通过CSS3来制作类似下面的导航条和毛玻璃效果。 导航条是梯形形状的。 背景区域的毛玻璃效果。 把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。因为这两个效果的实现离不开一个重要的思想。 用语言来描述就是：父元素设置position:relative，其伪元素（after或者before）设置 position:absolute，并且让top,bottom,left,right都为0，伪元素占满父元素的整个空间，最后设置z-index将背景放在父元素后边。 具体代码如下。 .container { position : relative ; } .container::after { content : '' ; position : absolute ; left : 0 ; right : 0 ; bottom : 0 ; top : 0 ; 　z-index : -1 ; } 什么意思呢？稍安勿躁，我会在接下来的两个实战例子中对这段代码的意思一一道来。 1.导航条 1.1：平行四边形导航条 平行四边形制作的思想

点击 上方蓝字 ，和我一起学技术 。 今天给大家分享的是LeetCode当中的32题，这是一道 Hard 难度的题。 也是一道经典的字符串处理问题，在接下来的文章当中，我们会详细地解读有关它的三个解法。 希望大家不要被题目上的标记吓到，虽然这题标着难度是Hard，但其实 真的不难 。 我自信你们看完文章之后也一定会这么觉得。 题目 Longest Valid Parentheses 难度 Hard 描述 给定一个只包含左右括号的字符串，返回最长能够组成合法括号的长度 Given a string containing just the characters '(' and ')' , find the length of the longest valid (well-formed) parentheses substring. 样例 1: Input: "(()" Output: 2 ## Explanation: The longest valid parentheses substring is "()" 样例 2: Input: ")()())" Output: 4 ## Explanation: The longest valid parentheses substring is "()()" 思考 我们来分析一下题目，这题的题目很容易理解

网上查了很多关于修改火狐浏览器样式的资料，发现千篇一律，能解决问题的可以说没有。 当然一番搜寻下来也不是没有收获，为了节省广大前端同学不再耗费时间在这上面，特此记录。解决了在火狐浏览器下滚动条的部分样式问题，当然有更好的解决办法欢迎留言~~~ 基于webkit的浏览器： /* 滚动条样式 */ ::-webkit-scrollbar { width : 4px ; height : 6px ; } ::-webkit-scrollbar-thumb { border-radius : 1em ; background-color : rgba(50,50,50,.3) ; } ::-webkit-scrollbar-track { border-radius : 1em ; background-color : rgba(50,50,50,.1) ; } 火狐： overflow-y: scroll; scrollbar-color: transparent transparent; scrollbar-track-color: transparent; -ms-scrollbar-track-color: transparent; 可以实现火狐浏览器下滚动条的隐藏。 参考地址 https://stackoverflow.com/questions/6165472/custom

原文链接: webpack4基础 webpack4基础 鉴于一些大牛的提醒，我把此文改成，基础的webpack，提供给像我一样的刚进入webpack的小白们。 首先webpack4建议使用 node版本在8.5以上 ，cmd中 node -v 查看node版本。 1.什么是webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。 代码转换 ：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化 ：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割 ：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并 ：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。 自动刷新 ：监听本地源代码的变化，自动重新构建、刷新浏览器。 代码校验 ：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。 自动发布 ：更新完代码后，自动构建出线上发布代码并传输给发布系统。 构建其实是工程化

谷歌的一位技术专家曾经和我分享过关于 JavaScript 的一个引人注目的观点:它不是真正的内聚编程语言——至少不是正式意义上的内聚编程语言。 ECMA-262规范定义了JavaScript，但没有一个真正的实现。更重要的是，这种语言远非封闭的。 它游走在一个名副其实的相邻规范的海洋中，这些规范管理着 JavaScript 涉及的所有 api: DOM、网络请求、系统硬件、存储、事件、文件、加密，以及数百种其他规范。Web浏览器及其各种 JavaScript 引擎都按照它们认为合适的方式实现这些规范。 Chrome 有 Blink/V8, Firefox 有 Gecko/SpiderMoney, Safari 有 WebKit/JavaScriptCore。 浏览器将以符合规范的方式运行几乎所有的 JavaScript，但 web 上到处都是每种浏览器特性的示例。因此，JavaScript被更准确地描述为一组浏览器实现。尽管 web 纯粹主义者可能坚持认为 JavaScript 不应该是 web 页面的组成部分，但他们必须承认，如果没有它，现代 web 将会严重退化。 可以毫不夸张地说，JavaScript 实际上是不可避免的:手机、电脑、平板电脑、电视、游戏机、智能手表、冰箱，甚至汽车现在都有运行 JavaScript 的 web 浏览器

第一步：在mail.js中引入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 第二步：安装 cnpm install vue-infinite-scroll --save 第三步：使用 < div class ="schoolPlatformGroup" v-infinite-scroll ="loadMore" infinite-scroll-disabled ="scrollDisabled" > < ul style ="list-style-type:none" v-for ="(data,index) in cameraList" > < el-tag style ="float: left;color: #409eff;z-index: 999;margin-top: 2px;" > {{data.id}} </ el-tag > < li :id ="'platform'+data.id" class ="platformNameTag" style ="padding: 4px;margin-left: 40px;margin-right: 10px;background: #ffffff;" @click ="clickPlatform(data.id)" > 【{

本视频在上传过程中会有平台的压缩，看不清楚的朋友们请点击阅读原文，进入腾讯视频中，选择超清来观看哦~ 本文分享自微信公众号 - 零分C语言（LFCYY666）。 如有侵权，请联系 support@oschina.cn 删除。 本文参与“ OSC源创计划 ”，欢迎正在阅读的你也加入，一起分享。 来源： oschina 链接： https://my.oschina.net/u/4057995/blog/4348735

-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果. 在移动端上，在你用 overflow-y:scorll 属性的时候，你会发现滚动的效果很木，很慢，这时候可以使用 -webkit-overflow-scrolling:touch 这个属性，让滚动条产生 滚动回弹 的效果，就像ios原生的滚动条一样流畅。 兼容安卓和IOS的写法如下 overflow:auto;/* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */ 取值 auto 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */ 浏览器兼容性 移动版 Safari iOS 5.0+ Bug 1.当你给一个元素设置过position:absolute;或者position

1.作用 可控制元素在移动设备有滚动回弹效果，可惯性滚动 2.适应场景 在ios移动端上，设置容器overflow-y:scroll;使容器内元素滚动时，滑动会很卡顿，使用-webkit-overflow-scrolling:touch;可以解决该问题。 原理：该属性开启了硬件加速 缺点：耗内存 3.引发的bug（仅ios） 3.1 在设置了该属性的滚动容器内手动设置scrollTop时容器会变空白，（内 容绘制出 错，应 该是浏览器底层的问题） 3.2 手动设置scrollTop,某些机型上的scrollTop值改变了，但是页面不滚动 3.3 滑动时偶尔卡顿 4.解决方案 3.1 & 3.2（规避问题）：在手动改变scrollTop前先将-webkit-overflow-scrolling属性设置为auto,scrollTop改变后再设置回touch 3.1: 可先让页面延时100ms再滚动1px,空白可以恢复正常 3.2：给容器的某个子元素高度加1px 3.3：给容器设置position:static 来源： oschina 链接： https://my.oschina.net/u/4366528/blog/3485652

在网页制作中,按钮是必不可少的,每个按钮也有不同的功能,当然,更加炫酷的按钮也会让用户感兴趣,甚至还想多玩几下.下面我就简单介绍一种简单的按钮: 本身只能看到一个按钮,当鼠标悬停在按钮上时,会上下同时拉出两个框,这是只用到了css样式,具体代码: <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > Document </ title > < style type ="text/css" > .button01 { width : 200px ; margin : 50px auto 20px auto ; } .button01 a { display : block ; width : 200px ; height : 50px ; background-color : #00b7ea ; text-align : center ; line-height : 50px ; color : #FFFFFF ; font-size : 20px ; text-decoration : none ; text-transform : uppercase ; border-radius : 10px ; box-shadow : 0px 0px 20px rgba(0,0