文章库ARTICLE COLUMN

  • 前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

    前端每日实战:8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

    摘要:效果预览按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg("https://segmentfault.com/img/bVbcWRr?w=500&h=500"); 效果预览 按下右侧的点击预览按钮...

    SnaiLiuSnaiLiu 评论0 收藏0
  • FCC 成都社区·前端周刊 第 10 期

    FCC 成都社区·前端周刊 第 10 期

    摘要:正式发布在过去的一周,正式发布,带来大量改进和修复。这是自开展以来的第七个主要版本,并将在年月成为下一个分支。以后,如果使用具有已知安全问题的代码,的用户会收到警告通知。将自动检查针对数据库的安装请求,并在代码包含漏洞时发出警告通知。...

    BigNerdCodingBigNerdCoding 评论0 收藏0
  • CSS盒模型深入

    CSS盒模型深入

    摘要:盒模型标准模型模型标准模型表示的宽度,模型表示的宽度。设置这两种模型可使用浏览器默认获取宽高只有通过内联样式设置的宽高才能获取到,用标签引入的获取不到。清除浮动使触发,内部浮动元素元素也参与高度计算。 CSS盒模型 标准模型IE模型 标准模...

    songjzsongjz 评论0 收藏0
  • 垂直居中---只需要两个小栗子

    垂直居中---只需要两个小栗子

    摘要:两个小栗子讲完了,你明白了么文章末尾,再送两个小栗子当一个里没有内容时高度为,当有内容比如文字时,就有了高度,难道是文字把撑开了其实不是,这个高度是由元素的决定的。代码很简单使用布局也可以实现居中红色框上下居中文字在红色框中居中 之前...

    dcr309duandcr309duan 评论0 收藏0
  • 变量命名规范

    变量命名规范

    摘要:函数的命名规范拼写准确比如我的与把函数未执行归咎于代码逻辑问题使用正常的时态特别是代码中状态的变量或者函数的命名,比如表示已经启动了,表示正在连接。 变量命名规范 前言 好的命名规范可以让你不用天天为取名字而苦恼、找bug时,更快的定位到b...

    luckluck 评论0 收藏0
  • 纯CSS实现元素垂直水平居中-非固定宽度

    纯CSS实现元素垂直水平居中-非固定宽度

    这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现,抑或不固定宽度,通过JS调整margin-left和margin-top的值,这俩种方法原理...

    shusenshusen 评论0 收藏0
  • 关于js节流函数throttle和防抖动debounce

    关于js节流函数throttle和防抖动debounce

    摘要:主要实现在于通过异步操作的事件间隔,对于前后两次调用方法打时间进行比较,用清空定时器的操作实现多余调用操作的舍弃。 废话不多说,直奔主题。 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化。最常见的应用尝尽就是在通过监听...

    lieepslieeps 评论0 收藏0
  • Tranform + Transitions + Animation

    Tranform + Transitions + Animation

    摘要:属性是定义元素距试图的距离,设置以后,其子元素会获得透视效果,需要注意的是该值只对转换有效,这也是很容易理解的。此外,还可以通过的属性值的方式设置,二者是有一定区别的,你可以认为,前者是把整个看成一个舞台,后者是每一个都是一个舞台。 ...

    wapeyangwapeyang 评论0 收藏0
  • Z-index 层叠上下文和层叠水平

    Z-index 层叠上下文和层叠水平

    摘要:还需要注意的一点是,具有层叠上下文的元素比普通元素要更靠近眼睛。需要记住的是,内部的层叠上下文及其子元素均受制于外部的层叠上下文,下面是层叠顺序,从远到近。定位元素与传统层叠上下文使用了或的定位元素,且的值是数字会产生叠上下文。 作者...

    SillyMonkeySillyMonkey 评论0 收藏0
  • 探秘 Node.js 10 新功能的背后:V8 release 6.6

    探秘 Node.js 10 新功能的背后:V8 release 6.6

    摘要:语言新特性现在返回源代码的所有内容,包括空格和注释。随着去年发布的新的字节码解释器,我们扩展了这个功能,以便在后台线程上将源代码编译为字节码。 每六周,我们都会创建一个 V8 的新分支,作为我们发布流程的一部分。每个版本都是在 Chrome Beta...

    LabradorsLabradors 评论0 收藏0
  • webApp 页面布局

    webApp 页面布局

    摘要:流式布局概念流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变。有些手机页面的宽度会被拉伸,但是高度不变,很不协调。弊端全局缩放,可能会造成出错。这两者适合在大项目中,因为可以配合或是,不适合单页面。 1. 流式布局 概...

    JasonZhangJasonZhang 评论0 收藏0
  • css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS

    css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS

    摘要:适用于分步骤操作的页面导航图实现结果如下上图对应下述代码,稍作修改可以生成下图。 适用于分步骤操作的页面导航图 实现结果如下 showImg("https://segmentfault.com/img/bV9z0i?w=1208&h=346"); 上图对应下述代码,稍作修改可以生成下图。showImg("...

    刘德刚刘德刚 评论0 收藏0
  • 前端学习路线

    前端学习路线

    摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站...

    2017111220171112 评论0 收藏0
  • 前端每日实战:5# 视频演示如何用 CSS 创作一个立体滑动 toggle 交互控件

    前端每日实战:5# 视频演示如何用 CSS 创作一个立体滑动 toggle 交互控件

    摘要:效果预览按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg("https://segmentfault.com/img/bVbbyv7?w=500&h=500"); 效果预览 按下右侧的点击预览按钮...

    hositionhosition 评论0 收藏0
  • 父元素随子元素宽度自动撑开问题, 父元素overflow: auto; 有滚动条时

    父元素随子元素宽度自动撑开问题, 父元素overflow: auto; 有滚动条时

    摘要:直接上代码这里我用了得到的效果这里本来想要的是里面的元素要随着它的子集的宽度变化而自动撑满但是得到的效果则是元素宽度与的宽度一致这里我分析是因为得到了它父元素的可视宽度于是想要的效果卒当然这里是可以用来计算最里面的宽度然后给赋值的我没...

    ixleiixlei 评论0 收藏0
  • Codepen 每日精选(2018-4-27)

    Codepen 每日精选(2018-4-27)

    摘要:按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 页面切换特效https://codepen.io/AlikinVV/p... 图片切换特效https://codepen.io/nathantayl... ...

    absonabson 评论0 收藏0
  • CSS选择器

    CSS选择器

    摘要:兄弟选择器和相邻选择器的区别是相邻选择器只能选择前置元素后相邻的一个匹配元素,兄弟选择器能够选择前置元素后同级的所有匹配元素。分组选择器选择所有的元素其基本结构是选择出用逗号分隔的所有匹配元素。 一、CSS基本选择器 CSS基本选择器包括了...

    BakerJBakerJ 评论0 收藏0
  • 前端面试题收集,持续更新中

    前端面试题收集,持续更新中

    摘要:对于所访问的每个元素,函数应该将该元素传递给所提供的回调函数。 HTML 在线阅读Github地址 题目列表 HTML HTML和XHTML的区别 Html的语义化 Doctype的文档类型 cookie、sessionSttorage、localStory区别 HTML全局属性(global attribute)有哪些? ...

    2json2json 评论0 收藏0
  • XBlog: Vue+Express+Mongodb的全栈可扩展的完整博客系统

    XBlog: Vue+Express+Mongodb的全栈可扩展的完整博客系统

    摘要:注册成功后会返回注册用户的此就是上面说到的,用于用户登陆的基础,请保管好。 地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明(Instructions) 本项目后台基于express、mongodb,前台基于Vue2.0全家桶、bootstrap、scss预编译...

    banana_pibanana_pi 评论0 收藏0
  • 网页打印实践及参考资料推荐

    网页打印实践及参考资料推荐

    摘要:难度系数简单关键词实践处理前截图处理后截图实践小结第一次接到网页要提供打印,可能会有些不知所措,我这里只说下遇到表格图像列表项内容在尾部被断开的问题处理。 难度系数:简单关键词:css print 实践 处理前截图:showImg("https://segmentfault...

    Charlie_JadeCharlie_Jade 评论0 收藏0
  • 浅谈前端优化的几个思路

    浅谈前端优化的几个思路

    摘要:浅谈前端优化的几个思路雪碧图页面中如果有很多图片小图标这样会有很多请求一个图就是一个请求建立连接进行三次握手这些都是耗费时间的如果页面很多可以考虑用精灵汽水雪碧也是这个单词技术做一张雪碧图将请求多个变成一次请求可以用来配置实现懒加载如...

    darrydarry 评论0 收藏0
  • CSS Variables学习笔记

    CSS Variables学习笔记

    摘要:注本文首发于个人博客学习笔记。最近看了下变量,又名自定义属性,跟大家分享一下我的学习笔记。使用自定义属性来设置变量名,并使用特定的来访问。二学习笔记声明调用声明方式变量声明的方式非常简单,如下,声明了一个名叫的变量。 注:本文首发于个...

    mudiyouyoumudiyouyou 评论0 收藏0
  • background-size: contain 与cover的区别,以及ie78的兼容写法

    background-size: contain 与cover的区别,以及ie78的兼容写法

    摘要:一与的区别作用都是将图片以相同宽高比缩放以适应整个容器的宽高。这就涉及到俺最开始说的了。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。增大或减小对象的尺寸边界以适应图片的尺寸。注意如果设置了会是属性失效 一:background-siz...

    ivydomivydom 评论0 收藏0
  • 页面div居中定位

    页面div居中定位

    摘要:在编写很多时候页面的时候我们都需要布局居中对齐的,这里引用一个小案例讲解一下水平垂直居中对齐预期效果实现过程代码提交登录样式偏移距离为容器的一半清理浏览器默认样式 在编写很多时候页面的时候我们都需要布局居中对齐的,这里引用一个小案例讲...

    dravenessdraveness 评论0 收藏0
  • 50weekly 高质量前端资源

    50weekly 高质量前端资源

    摘要:如何在浩瀚的互联网中,发现高质量的前端内容,成为了大多数前端学习者的困惑,也曾有这样的困惑。希望通过周篇高质量的前端文章,成就更优秀的自己,成为更优秀的前端工程师。目前由我和社区贡献者一起维护,每周五同步更新本周社区高质量前端资源。 ...

    tinnatinna 评论0 收藏0

热门文章

<