巧妙运用CSS中的负值

巧妙运用CSS中的负值

写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢?

颜色表及html代码

颜色表及html代码

颜色表及html代码

纯 CSS 作品,没有图片和JavaScript,你能相信吗?

纯 CSS 作品,没有图片和JavaScript,你能相信吗?

纯 CSS 作品,没有图片和JavaScript,你能相信吗?

用什么linux命令能够显示一个文件目录或多个目录的体积大小?

用什么linux命令能够显示一个文件目录或多个目录的体积大小?

我不是深度的使用linux的程序员,但平时又少不了使用一两次。所以,很多常用的linux命令因为不常用,所以记不住,都需要查资料寻找用法。比如,如何在linux命令行里用命令显示文件目录的体积大小。

在使用SQLite3时遇到的几个坑

在使用SQLite3时遇到的几个坑

这是我在一个SQLite3数据库上执行exec时遇到的奇怪问题!

在每个浏览器中看起来都不一样的div

在每个浏览器中看起来都不一样的div

最近国外的一位网友发现了一个有趣的现象,有一个DIV,它在每种浏览器中的样子看起来都不一样,比如说firefox、edge、chrome、Safari、IE等。他给出的代码是这样的:

如何解决在安卓手机上安装MySQL遇到Permission denied的问题

如何解决在安卓手机上安装MySQL遇到Permission denied的问题

我试图在一个旧的安卓手机里安装使用MySQL的web server,运行在chroot环境中,底层系统运行的是Ubuntu 16.04,安装的很顺利,但在启动mysqld时,出现了错误,不能启动:

前端技术展示:一百种时钟

前端技术展示:一百种时钟

这里有100种使用css+js+html制作的时钟钟表手表等,有不少是使用纯css3或HTML5开发出来的,有些是使用SVG,JavaScript等技术制作的。

在手机上安装Ubuntu、PHP环境、CUPS、爱普生R330打印机驱动纪要

在手机上安装Ubuntu、PHP环境、CUPS、爱普生R330打印机驱动纪要

最终目标是在手机上安装打印机驱动,用手机通过type c(micro usb)口直连调用打印机。

使用UTM(Urchin Tracking Module)统计流量来源

使用UTM(Urchin Tracking Module)统计流量来源

UTM是 Urchin Tracking Module 的缩写,是 Google 用来追踪网址(URL)的格式。Urchin 其实是Google在2004年买下的一间软件公司,这个公司的产品 Urchin 软件随后也演变成今日的Google Analytics。

将图片卷成圆筒效果的两种技术方法

将图片卷成圆筒效果的两种技术方法

将图片卷成圆筒效果的两种技术方法

HTML特殊字符符号大全

HTML特殊字符符号大全

网页特殊符号有很多实用的地方哦,比如版权符号:© 商标注册符号: ® 关闭符号:×(这个我经常用)字体一般要设置大点。下面我们就来看下网页中有哪些特殊符号吧。

[译]Preload,Prefetch 和它们在 Chrome 之中的优先级

[译]Preload,Prefetch 和它们在 Chrome 之中的优先级

今天我们来深入研究一下 Chrome 的网络协议栈,来更清晰的描述早期网络加载(像 preload 和 prefetch)背后的工作原理,让你对其更加了解。

不可思议的CSS导航栏下划线跟随效果

不可思议的CSS导航栏下划线跟随效果

效果不错,就是有点僵硬,我们可以适当改变缓动函数以及加上一个动画延迟,就可以实现上述开头里的那个效果了。当然,这些都是锦上添花的点缀。

PHP开发常识:什么是Phar?

PHP开发常识:什么是Phar?

Phar能帮我们在打包和部署PHP应用上免去大量的麻烦,我推荐大家试试它。这篇文章只是介绍了Phar的一些主要概念,包括如何创建Phar,include文件,介绍stub文件的作用,如何访问Phar里的文件。

JavaScript异步剪贴板 API

JavaScript异步剪贴板 API

在过去的几年里我们只能使用 document.execCommand 来操作剪贴板。不过,这种操作剪贴板的操作是同步的,并且只能读取和写入 DOM。现在 Chrome 66 已经支持了新的 Async Clipboard API,作为 execCommand 替代品。

如何用JavaScript检测出当前浏览器是否是无头浏览器(headless browser)?

如何用JavaScript检测出当前浏览器是否是无头浏览器(headless browser)?

从chrome 59开始,谷歌发布了一款无头谷歌浏览器。它跟PhantomJS不同,它是基于正统的谷歌浏览器开发出来的,不是基于其它的框架,这让程序很难区分出它是正常浏览器还是无头浏览器。

CSS 选择器语法速查

CSS 选择器语法速查

CSS 选择器语法速查

PHP Composer 是什么技术?

PHP Composer 是什么技术?

Composer 是PHP的一个依赖管理工具。它能管理你的PHP项目所需要的所有依赖关系。也就是说,Composer 会将你的PHP项目需要的所有代码库、依赖项从网上全部拉取下来,放到一起进行管理。

使用sudo运行复杂linux命令的方法

使用sudo运行复杂linux命令的方法

当使用sudo命令来运行一个linux命令时,我们希望这个linux命令能以root身份运行,但有时候都会遇到“permission denied”的错误,结果发现是linux命令中只有部分语句是按root用户运行的。

CSS实现图片无缝无限循环展示效果

CSS实现图片无缝无限循环展示效果

只是想练练手,看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明,这并不是很难。

CSS :focus-within 的作用和用法

CSS :focus-within 的作用和用法

:focus-within 是一个新的CSS伪类( pseudo-class),它跟 :focus 、 :hover 很相似。这个伪类的作用在使用了 :focus-within 的元素成为焦点或它的子元素成为焦点时显现。

针对表单域input元素属性值的CSS选择器使用技巧

针对表单域input元素属性值的CSS选择器使用技巧

pattern属性是HTML5里出现的新属性,它适用于type类型为text, search, tel, url, email, 和 password等的input元素上,配合:valid伪类,就能实现JavaScript里的正则表达式等效的校验算法。

JavaScript 2018: 有些东西你需要关注,有些你可以略过

JavaScript 2018: 有些东西你需要关注,有些你可以略过

在2018里,对于聪明的开发者们可以去熟悉的东西, Brown 给出了他对 JavaScript 生态系统中各个方面最前沿,至少也是很有用的预测。有两点需要说明的是: 首先,他基于所有 JavaScript于 标准的这些变化中,指出了一些好的可以去了解的,尽管里面所罗列的一些东西可能不是你所关注的。

JavaScript ES6 里最重要的5个特性

JavaScript ES6 里最重要的5个特性

从在过去的12个月里所从事的不同 JavaScript 相关项目中,我发现有 5 个 ES6 特性是不可或缺的,因为它们真正简化了 JavaScript 普通任务的完成方式。你心中的前 5 名可能和我的不一样,如果是的话,我希望你能在结尾的评论区分享它们。

用CSS里的 viewport-fit 标签应对iPhone X 的刘海

用CSS里的 viewport-fit 标签应对iPhone X 的刘海

iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿。移除这个白条儿也不难,给 body 设置一个 background-color 就可以搞定。或者,可以添加 viewport-fit=cover meta 标签,将整个网站扩展到整个屏幕。

使用CSS Shapes实现滚动环绕iPhone X刘海效果

使用CSS Shapes实现滚动环绕iPhone X刘海效果

初看起来,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

setTimeout延时0毫秒的作用

setTimeout延时0毫秒的作用

简单点可以这么说: js是单线程的,是基于事件循环的。setTimeout函数是异步的,异步的事件会加入一个队列,当同步的任务执行完之后,才会执行。

JavaScript中8个常见的陷阱

JavaScript中8个常见的陷阱

这里我们针对JavaScript初学者给出一些技巧和列出一些陷阱。如果你已经是一个砖家,也可以读一读。

现代JavaScript使用技巧:ES6中的简写语法

现代JavaScript使用技巧:ES6中的简写语法

ES6为一些已有的功能提供了非破坏性更新,这类更新中的大部分我们可以理解为语法糖,称之为语法糖,意味着,这类新语法能做的事情其实用ES5也可以做,只是会稍微复杂一些。本章我们将着重讨论这些语法糖,看完之后,可能你会对一些你很熟悉的ES6新语法有不一样的理解。

JavaScript箭头函数语法小结

JavaScript箭头函数语法小结

箭头函数的确与传统函数有不同之处,但仍存在共同的特点。

每个JavaScript程序员都需要知道的5个数组方法

每个JavaScript程序员都需要知道的5个数组方法

这篇文章将会向大家简要的介绍JavaScript里关于数组的最重要的5个方法,这5个方法是每个想要高效的进行JavaScript编程的程序员必须知道的。

七个Web前端程序员必须会用css技巧

七个Web前端程序员必须会用css技巧

这一点,我昨天在查资料写这篇文章—最全面的元素水平垂直居中方法汇总的时候就发现有个大牛也理解错了—-CSS布局奇淫技巧之–各种居中里面的第八点。

如何正确的简写 document.querySelectorAll

如何正确的简写 document.querySelectorAll

这里报错的原因是 querySelectorAll 所需的执行上下文必需是 document,而我们赋值到 $ 调用后上下文变成了全局 window。明白了这个道理后,我们再花不到四分之一柱香的时间,就改写了之前的版本,释出了正确的版本,这个版本里面,我们用正确的姿势去 alias。

Flexbox布局模式学习乐园

Flexbox布局模式学习乐园

Flexbox布局模式给网页布局提供了极大的方便,它更grid布局一样都是新出现的新型布局模式,为了让web开发者更容易的理解这种布局,本页内容提供了一个学习实验flexbox布局的场所,让大家更快更容易的了解flexbox布局的语法、用法和使用场景


京ICP备12002735号