文章库ARTICLE COLUMN

  • 前端每日实战:85# 视频演示如何用纯 CSS 创作一个小球反弹的动画

    前端每日实战:85# 视频演示如何用纯 CSS 创作一个小球反弹的动画

    摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,只有个元素居中显示定义容器尺寸用伪元素画出小球定义沿轴即横向移动的动画效果定义沿轴即纵向移动的动画效果最后,把动画效果应用到小球上大功告成 showImg("https://segmentfault.com/...

    baoxlbaoxl 评论0 收藏0
  • css布局基础总结

    css布局基础总结

    摘要:想写出高效合理的布局,必须以深厚的基础为前提。现在布局方式主要分为三种传统布局方案等配合。弹性布局,实现方便,兼容性较好。在环境中的元素按照如下规则渲染和文档流一样,元素按照自己类型的布局特性从左到右,从上往下依次排列。 前端css布局...

    PrototypeZPrototypeZ 评论0 收藏0
  • css--图片整合(精灵图)

    css--图片整合(精灵图)

    摘要:通用代码如下图片整合运行结果总结精灵图可以通过浮动加背景图片来实现精灵图也可以通过也可以实现主要是后期的定位移动。 图片整合(精灵图) 精灵图的优点: 减少图片的字节 减少了网页的http请求,从而大大的提高了页面的性能 解决了网页设计师在...

    opengpsopengps 评论0 收藏0
  • Css Sprite(雪碧图、精灵图)<图像拼合技术>

    Css Sprite(雪碧图、精灵图)<图像拼合技术>

    摘要:一精灵图使用场景二优点减少图片的字节。减少网页的请求,从而大大的提高页面的性能。解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 一、精灵图使用场景: sho...

    n7thenn7then 评论0 收藏0
  • 在2018年你应该知道的9个关于CSS组件化的JS库

    在2018年你应该知道的9个关于CSS组件化的JS库

    摘要:解析时,样式组件将生成唯一的类名,并将注入。在星,由创建,被定义为组件样式的工具链。它具有可预测的组合,以避免的特殊性问题。将该项目定义为组件样式通过优雅灵感解决,占地面积小小于,以及出色的性能。 一个特别有趣的概念是在CSS中使用JS将C...

    DDreachDDreach 评论0 收藏0
  • 5分钟理解BFC原理

    5分钟理解BFC原理

    摘要:一概念即块级格式化上下文,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。通俗一点来讲,可以把理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。 一、BF...

    tulayangtulayang 评论0 收藏0
  • css--提示工具

    css--提示工具

    摘要:一提示工具上提示工具代码如下上提示工具提示文本运行结果二右提示工具代码如下提示工具右提示工具提示文本运行结果总结使用容器元素并添加类。在鼠标移动到上时显示提示信息。属性用于为提示框添加圆角。 一、提示工具 1、上提示工具 代码如下 ...

    xinhaipxinhaip 评论0 收藏0
  • 自定义滚动条

    自定义滚动条

    摘要:效果图 html↓ css↓ .test { display: inline-block; margin: 60px 40%; width: 280px; padding: 5px 4px; min-height: 20px; line-height: 20px; max-height: 72px; ...

    glumesglumes 评论0 收藏0
  • 开发一个自己的 CSS 框架(四)

    开发一个自己的 CSS 框架(四)

    摘要:首先我们安装以下框架这个框架有和两个版本。核心不大,只有个文件。在里面初始化了设置,而则存放了一些工具函数,例如。在项目跟目录下创建,这样就可以找到下面的了,或者自己写长路径。 这一节,我们来讲规矩,谈网格,做人可以不要脸,不讲规矩,...

    alogyalogy 评论0 收藏0
  • 两个viewport的故事-桌面版(译)

    两个viewport的故事-桌面版(译)

    摘要:它就是有浏览器窗口的宽度和高度桌面在移动浏览器上它是比较复杂的。第二篇文章将介绍这些概念在移动浏览器的应用,并重点说明和桌面浏览器的不同。 在这个系列文章中,我将说明viewports和重要元素的宽度是如何工作的,比如元素、window和 scrren的宽...

    junbaorjunbaor 评论0 收藏0
  • javascript 事件流  捕获与冒泡

    javascript 事件流 捕获与冒泡

    摘要:捕获型事件流事件的传播是从最不特定的事件目标到最特定的事件目标。鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发。 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行,事件是可以被 JavaScript 侦测到的...

    aboutUaboutU 评论0 收藏0
  • css--图片廊

    css--图片廊

    摘要:注意图片之间要有间距不然影响美观可以用来调。图片加透明度可以增加美观。 一、图片廊 1、以下是使用 CSS 创建图片廊: 标签如下 图片廊 body{ margin:0; } .box{ width:1300px; margin:0 auto; border:1px soli...

    JoyvenJoyven 评论0 收藏0
  • 前端每日实战:83# 视频演示如何用纯 CSS 创作一个小球上台阶的动画

    前端每日实战:83# 视频演示如何用纯 CSS 创作一个小球上台阶的动画

    摘要:用伪元素画出个小球增加让小球向上运动的动画效果在向上运动的同时向两侧运动,形成上台阶的动画效果最后,为上台阶的动作增加拟人效果大功告成 showImg("https://segmentfault.com/img/bVbdYQH?w=400&h=302"); 效果预览 按下右侧的点击预览按钮可...

    maxminmaxmin 评论0 收藏0
  • 《CSS世界》笔记一:流/元素/尺寸

    《CSS世界》笔记一:流/元素/尺寸

    摘要:一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局,传统设计,网页上的所有元素的尺寸一律使用作为单位。世界中,提出了流体布局的概念所谓流体布局,指的是利用元素流的特性实现的各类布局效果。 下一篇:《CSS世界》笔记二:盒模型四...

    hizengzenghizengzeng 评论0 收藏0
  • Javascript事件流

    Javascript事件流

    摘要:见下图更直观在事件流中,事件的目标在捕获阶段不会接受到事件,这意味着在捕获阶段,事件从到后就停止了。下一个阶段是目标阶段,于是事件在上发生,并在事件处理中被看成是冒泡阶段的一部分,然后,冒泡阶段发生,事件又传回。 CONTENTS DOM事件流 ...

    pcChaopcChao 评论0 收藏0
  • React Native 在 Airbnb(译文)

    React Native 在 Airbnb(译文)

    摘要:声明有助于保持我们的同步与底层状态的声明性质。值得注意的是,这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接,用于在本机和之间进行通信。 showImg("https://segmentfault.com/img/bVbd...

    icyfireicyfire 评论0 收藏0
  • 水平居中布局与滚动条跳动的千年难题

    水平居中布局与滚动条跳动的千年难题

    摘要:于是,问题来了,信息流页面,如新浪微博,是从上往下渲染的。,结构类似几个页面通过头部的水平导航刷新切换,结果有的页面有滚动条,有的没有。 绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~例如,妇女之友大淘...

    mist14mist14 评论0 收藏0
  • 原生JS动态加载JS、CSS文件及代码脚本

    原生JS动态加载JS、CSS文件及代码脚本

    摘要:属性共中状态初始状态加载中加载完成已加载并可与用户交互,但还需要加载图片等其他资源全部资源加载完成文档加载顺序解析结构加载外部脚本和样式表文件解析并执行脚本树构建完成加载外部资源文件图片等页面加载完成动态加载公共方法动态加载外部文件,...

    yagamiyagami 评论0 收藏0
  • 基于Vue实现关键词实时搜索高亮显示关键词

    基于Vue实现关键词实时搜索高亮显示关键词

    摘要:高亮显示通过实现对关键词的替换,通过添加实现关键词高亮显示匹配关键字正则高亮替换值在查询到结果后执行方法将查询出来的数据传递过来通过来将关键词替换成标签,同时用中的进行绑定。 最近在做移动real-time-search于实时搜索和关键词高亮显示的功...

    xushaojieaaaxushaojieaaa 评论0 收藏0
  • CSS图片廊

    CSS图片廊

    摘要:图片廊根据元素的浮动,将图片所在放在一行,设置悬浮样式代码如下图片廊图片描述运行结果如下图技术要点悬浮的时候改变图片的透明度悬浮后清除浮动影响持续更新,欢迎大家指教 CSS图片廊 根据元素的浮动,将图片所在div放在一行,设置悬浮样式hover ...

    hss01248hss01248 评论0 收藏0
  • 用纯css实现Tab切换

    用纯css实现Tab切换

    摘要:所以当我们思考能否用来实现时还应考虑到的结构,能不能构造出满足已存在的选择器的布局。用来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来,真正做一个组件该做的事,希望越来越好 我们今天用css来实现一个常见的tab切换效果 查看原文可...

    hizengzenghizengzeng 评论0 收藏0
  • 前端每日实战:81# 视频演示如何用纯 CSS 创作一个变色旋转动画

    前端每日实战:81# 视频演示如何用纯 CSS 创作一个变色旋转动画

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

    Dionysus_goDionysus_go 评论0 收藏0
  • 2018年值得期待11个Javascript动画库

    2018年值得期待11个Javascript动画库

    摘要:超过的,是一个动画库,可以处理属性,单个转换,或任何属性以及对象。在,是一个快速的动画引擎,具有与的相同的。在,这个功能和反应动画库只重。由和其他人使用,这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时,我发...

    skinnerskinner 评论0 收藏0
  • wepy 项目的初始化应用

    wepy 项目的初始化应用

    摘要:初始化项目安装脚手架切换至项目目录初始化项目开启实时编译小程序生命周期页面加载一个页面只会调用一次。页面初次渲染完成一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。组件路径,组件对应的方法路由的应用调起提示框 1.初始...

    whjinwhjin 评论0 收藏0
  • JS数组

    JS数组

    摘要:如果没有符合条件的成员,则返回返回查找到的该成员该方法与类似,对数组中的成员依次执行函数,直至找到第一个返回值为的成员,然后返回该成员的索引。 摘要 最近学习了JS数组的基础知识,在这里呢总结一下,包括js数组的属性与方法,js数组常常遇到...

    CarlCarl 评论0 收藏0

热门文章

<