css3修改浏览器scroll默认样式

原生的滚动条又宽又长, 特别的丑, 其实我们可以自己定义滚动条的:定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸::-webkit-scrollbar { width: 4px; height: 4px; background-color: #F5F5F5; }定义滚动条轨道 内阴影+圆角::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-co

Bloogle开发日记 | 制作一个滚动大纲的前端网页

从零教学怎么制作一个滚动大纲前端页面大纲区域是一个列表,列表中的每项的超链接<a>都有一个#id的超链接指向gif中左侧的内容区域的heading标题JS代码当滚动时,我们要求大纲区域停靠在顶部// 获取大纲侧边栏的元素对象var aside = document.getElementsByClassName("outline")[0];// 获取大纲侧边栏的元素对象距离浏览器顶部的距离var aside_sticky_offset_top = aside.offsetTop;// 当窗口滚动会触发window.onscroll方法window.onscroll = functio

极致性价比的几款手机

选手机真的是让人头疼的一件事, 要么怕买贵, 要么怕坑买错. 这里我为大家推荐几款自认为不错的手机(主要是钱包空空, 不会推荐太贵的手机), 大家可以参考参考. 荣耀Play 全网通版 6GB+64GB 极致性价比的中高端选择 1499 荣耀 Play 搭载海思Kirin 970次旗舰处理器,4核2.36 GHz A73 CPU + 12 核 Mali-G72配备上6G 大内存. 使荣耀play面对大型游戏毫无压力. 快如固态硬盘的ufs2.1 64g储存, 使我们日常打开软件游戏快如闪电. 配上华为自家吓人的GPU Turbo 技术 和4D游戏体验. 是吃鸡玩家不二的选择. 6.3寸刘海

如何居中一个元素(终结版)

前言本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下:一、水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{ text-align:center;//在父容器设置 }此外,如果块级元素内部包着也是一个块级元素,我们可以先将其由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。<div class="parent"> &

Vue从零开始到toDoList

Vue从零开始到toDoList本教程使用从VueCli进行开发,需安装NodeJs,NPM包管理气。直接安装NodeJs 即可。 NodeJs安装就不多说了,直接下一步下一步,默认配置即可.全局安装Vuenpm insatll -g vue 全局安装VueCli脚手架npm insatll -g @vue/cli 初始化创建项目vue create my-project # OR vue ui *vue ui 通过网页图像话创建项目,一切可视化操作 *vue create to-do-list 命令构建 to-do-list 项目上述命令运行之后就会在当前目录创建你的项目工程 to

服务器技巧合计 -- Nignx

有时候我们会遇到将不带www头的访问定向到www头去,对seo友好,方便爬虫的处理,在这里只说对nignx的做法if ($http_host !~ 'www'){ rewrite ^(/.*)$ https://www.$host$1 permanent;}强制跳转到https,实现安全证书if ($server_port !~ 443){ rewrite ^(/.*)$ https://$host$1 permanent;}

纯css画各种图形,基本矩形、多边形,爱心、钻石、阴阳八卦等

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是 firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的。原文:http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html1、正方形最终效果:CSS代码如下:#square { width: 100

js实现返回顶部效果的方法总结

当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个“返回顶部”的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。实现功能:当页面加载的时候,把返回顶部按钮定位到页面的右下角,当页面从顶部向下滑动不超过一定距离时,返回顶部按钮隐藏,当页面从顶部向下滑动超过该距离时,返回顶部按钮显示,当用户点击返回顶部按钮的时候,页面返回顶部。主要的几种实现方案1、纯js,无动画版本window.scrollTo(x-coord, y-coord); window.scrollTo(0,0);2、纯js,带动画版本生硬版:var scroll

网页预加载_骨架屏Skeleton Screen的实现

用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验Skeleton ScreenSkeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页。请求处理无论是PC端还是移动端,只要有数据请求都会出现一定的延迟时间,之前对于这段等待时间的处理也是各不相同。同步请求中页面会卡住,直到请求完成,用户期间无法进行任何操作,有一种死机的感觉,体验较差。

CSS中的focus-within伪类选择器

css中:focus-within是什么在CSS中 :focus-within 是一个伪类,现在已经被列入到CSS选择器中(CSS Level 4 selector)。CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。没看懂,可以看下面的例子:<div class="container" tabindex="0"> <label for="text">Enter text</label> <input id="text" type="text" /

js中for循环优化总结_如何提高程序的执行效率

在程序开发中,经常会使用到for循环的,但是很多人写的for循环效率都是比较低的,下面就举例说明,并总结优化for循环的方法,来提高我们程序的执行效率。1、取消循环终止判断,否则每循环一次都会执行一次判断for (var i = 0; i < arr.length; i++) { // do something... }这样每次循环都要去读取一次数组的长度。优化写法:var len= arr.length; for (var i=0; i < len; i++) { // do something... }这里声明了2个变量,len和i。其实可以使用一个就能解决,如

Html5本地存储和本地数据库

一个网站如何能在客户的浏览器存储更多的数据呢?在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cookie的限制也就逼迫网站存储数据尽量精简,想存储复杂的、关系型的用户数据就根本不可能了。但是进入Html5时代,这一切都不叫事...一、本地存储由来的背景      众所周知Html4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie。但是Cookie的这些限制,也就导致了C