文章库ARTICLE COLUMN

  • css之简易水波效果

    css之简易水波效果

    摘要:后期准备使用面向对象的写法完成,将水波的大小颜色范围过渡等效果进行开发者自定义,或许会加入更多的效果 css之水波效果 没事实现了一个小效果,贴上来分享分享 先看看效果showImg("https://segmentfault.com/img/bV9FNE?w=526&h=233"); 上代码 :...

    MiracleMiracle 评论0 收藏0
  • 一些居中方式的总结

    一些居中方式的总结

    摘要:居中水平居中对于子元素是行内元素或者时使用父元素宽度无论确定不确定均可实现相对于父元素水平居中。 居中 水平居中 对于子元素是行内元素(或者inline-block)时使用text-aling: center; ,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。 ...

    renweihubrenweihub 评论0 收藏0
  • 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

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

    huaixiaozhuaixiaoz 评论0 收藏0
  • 原生css变量声明

    原生css变量声明

    摘要:原生变量声明噫我为什么要用原生这个名词啊,管他呢。我发现了一个不得了的东西,接触前端都有一年多的时间了,今天才知道原生也可以变量声明这个黑科技啊。 原生css变量声明 噫~~~我为什么要用原生css这个名词啊,管他呢。我发现了一个不得了的东西,...

    ImfanImfan 评论0 收藏0
  • 基于Vue实现拖拽升级(九宫格拖拽)

    基于Vue实现拖拽升级(九宫格拖拽)

    摘要:前言在本文中将会用完成九宫格拖拽效果,同时介绍一下网格布局。到这里我们就把基于的九宫格拖拽实现了,有问题或者发现错误的请指正,谢谢大家珍惜淡定的心境,苦过后更加清 前言 在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局。具体代...

    RyanQRyanQ 评论0 收藏0
  • 前端每日实战: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

热门文章

<