文章库ARTICLE COLUMN

  • H5页面内使用JSON动画

    H5页面内使用JSON动画

    摘要:问题背景有一天我们的设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果写到这里我突然想到一个问题,这么复杂的动画为什么不使用。。。。 问题背景 有一天我们的UI设计师找...

    anonymoussfanonymoussf 评论0 收藏0
  • 移动端网页布局适配rem方案小结

    移动端网页布局适配rem方案小结

    摘要:当明确规定根元素的时,单位以该属性的初始值作参照。适配具体实现方案设计稿尺寸宽度为,如果设计稿是,下边会自动计算的值比如,具体的尺寸不用调整例如,不用调整,这是一个比例大小,对应的元素大小值会根据新的比如等于改变,从而按照比例适配。 ...

    2shou2shou 评论0 收藏0
  • 字蛛font-spider报错,<web font not found>,碰到的最新问题

    字蛛font-spider报错,<web font not found>,碰到的最新问题

    摘要:的问题没碰到但是我的却一直报错后来把样式表里的文件全部删除居然好用了然后逐类删除逐行删除发现问题在问题在于中的无法解析并找不到字体删除就可以执行了执行完毕再还原回来完美解决 @media的问题没碰到,但是我的却一直报错.后来把样式表里的文件全...

    starsfunstarsfun 评论0 收藏0
  • 深入理解css中的margin属性(最新浏览器支持)

    深入理解css中的margin属性(最新浏览器支持)

    摘要:竖直方向的外边距合并两个竖直方向的盒子相遇时,其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。 本文启发于博客园一篇2016年的深入理解css中的margin属性文章,根据当前浏览器(chrome 71.0.3578.98(正式版本) (6...

    bingobingo 评论0 收藏0
  • 创建自己的 CSS 网格系统【转载 | 译】

    创建自己的 CSS 网格系统【转载 | 译】

    摘要:为了防止这种情况,给提供的最小高度并使它们浮动。基本网格准备好了一些额外的列内容样式使我们的网格系统响应调整我们的网格以实现移动布局非常简单。注意本指南只是创建自己响应式网格系统的起点。 此文翻译自 Creating Your Own CSS Grid System |...

    gecko23gecko23 评论0 收藏0
  • css-媒体查询

    css-媒体查询

    摘要:媒体查询标签像素比像素比物理像素设备独立像素像素通常的设计稿检测像素比设计稿设备宽度设置该设备下的根元素的文字大小改变窗口大小时也要重新计算一次比如由竖屏切换到横屏相对于根元素字体的单位是根据父元素字体移动端必须加的东西视口可视宽度物...

    lwx12525lwx12525 评论0 收藏0
  • 《CSS揭秘》-背景与边框

    《CSS揭秘》-背景与边框

    摘要:给一个容器设置一层白色背景和一道半透明白色边框。思路实际是设置的背景会延伸到边框所在的区域的下层,可以通过属性调整背景的默认行为。优点边框样式十分灵活。缺点只适用于双层边框的场景边框不一定会贴合属性产生的圆角。 1.给一个容器设置一层白...

    tangr206tangr206 评论0 收藏0
  • 天天都在使用CSS,那么CSS的原理是什么呢?

    天天都在使用CSS,那么CSS的原理是什么呢?

    摘要:也有的元素被完全无视,比如的元素。对于每个元素,必须在所有中找到符合的并将对应的规则进行合并。这样做是为了减少无效匹配次数,从而匹配快性能更优。识别属性值,创建对象,并将对象存入解释器堆栈。数组中的每一项纪录了这个的,的值,权重层叠规...

    lijy91lijy91 评论0 收藏0
  • 记:原样输出文字,不做任何处理

    记:原样输出文字,不做任何处理

    摘要:在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符比如空格和换行符都会显示出来。紧跟在开始标签后的换行符也会被省略然后对使用样式换行,解决了此问题属性是用来设置如何处理元素中的空白 今天有个奇葩需求:让纯...

    aaronaaron 评论0 收藏0
  • 记一次雪花效果

    记一次雪花效果

    摘要:效果还行给大家先看一下效果。雪花旋转效果至于雪花的旋转我也做了一定的优化活动页活动页效果就不细细说了,我就把雪花效果添加进去活动页。 showImg("https://segmentfault.com/img/remote/1460000017978555?w=400&h=270"); 前言 最近,公司UI小姐姐...

    NeverSayNeverNeverSayNever 评论0 收藏0
  • 在安卓手机中rem单位border-radius:50%画圆变形的解决方案

    在安卓手机中rem单位border-radius:50%画圆变形的解决方案

    摘要:但是在安卓手机中会有变形的情况存在,渲染方面确实安卓手机干不过毕竟安卓版本众多,还有什么的线等等的坑,都是能完美运行,安卓总得找方法。当使用做单位,出来的圆是不会变形的,可能是安卓在计算过程中产生误差或者有什么其他因素造成的渲染问题。...

    RiverLiRiverLi 评论0 收藏0
  • css中的尺寸和单位

    css中的尺寸和单位

    摘要:前言本文主要介绍的尺寸和单位,专门查了加上自己的一些理解。比如等属性的类型分为绝对单位和相对单位相对单位相对单位代表以其他距离为尺寸的一种单位,包括,,,,。 前言 本文主要介绍css的尺寸和单位,专门查了mdn, 加上自己的一些理解。本文参...

    noONEnoONE 评论0 收藏0
  • 什么是Shadow DOM?

    什么是Shadow DOM?

    摘要:什么是几周前,我写了一篇关于究竟是什么的文章。回顾一下,文档对象模型是文档的表示。这些虽然当然与原始有关,但它们指的是截然不同的概念。在以后的文章中,我将对虚拟进行分析。 什么是Shadow DOM? 几周前,我写了一篇关于究竟是什么DOM的文章。...

    SimpleTriangleSimpleTriangle 评论0 收藏0
  • 前端基础入门四(JavaScript基础)

    前端基础入门四(JavaScript基础)

    摘要:学习目标掌握编程的基本思维掌握编程的基本语法我们先来学习基础,后续会讲解高级。语句基本语法当循环条件为时,执行循环体,当循环条件为时,结束循环。基础语法循环体循环条件代码示例初始化变量循环体自增循环条件语句和一般用来解决无法确认次数的...

    王军王军 评论0 收藏0
  • 使用clay.js绘制一棵圆形树

    使用clay.js绘制一棵圆形树

    摘要:需要说明目前,开发环境已经准备好了,因为绘制树图,我们需要模拟数据,你可以在这里下载数据我们要绘制一棵圆形树,一点点显示,你可以最终代码,查看效果然后在浏览器中打开即可查看效果。余下的就是绘制图形了。 作者:心叶时间:2019-01-23 17:55...

    FingerLiuFingerLiu 评论0 收藏0
  • Tooltip组件拆解

    Tooltip组件拆解

    摘要:的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件 在 packages/tooltip目录下。 这个组件核心部分是 showImg("https://segmentfault.com/img/bVbnFjF?w=332&h=214"); toolpic......

    miyamiya 评论0 收藏0
  • css隐藏移动端滚动条并且ios上平滑滚动

    css隐藏移动端滚动条并且ios上平滑滚动

    摘要:完整代码如下移动端隐藏滚动条解决方案解决上滑动不流畅推荐娃娃日用品美妆护肤娃娃日用品美妆护肤娃娃 HTML代码如下 移动端隐藏滚动条解决方案 * { padding: 0; margin: 0; } .par-type { ...

    wangzy2019wangzy2019 评论0 收藏0
  • leaflet 入门视频

    leaflet 入门视频

    摘要:优酷腾讯控件优酷腾讯控件优酷腾讯控件优酷腾讯控件属性优酷腾讯属性设置优酷腾讯设置和事件优酷腾讯更多内容,请关注公众号二维码 hello world 优酷 腾讯 leaflet 控件 zoom优酷 腾讯 leaflet 控件 scale优酷 腾讯 leaflet 控件 layers优酷 ...

    silvertheosilvertheo 评论0 收藏0
  • 通讯录式的吸顶效果

    通讯录式的吸顶效果

    摘要:在有滚动条时讨论才有意义,在没有滚动条时恒成立。单位,只读元素代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。当前元素顶部距离最近父元素顶部的距离和有没有滚动条没有关系。 通讯录式的吸顶效果,当前bar固定在顶部 sh...

    ForelaxForelax 评论0 收藏0
  • 第三方CSS安全吗?

    第三方CSS安全吗?

    摘要:不过真正的问题在于第三方内容是不是安全的。第三方的作用更接近于脚本而不是图像。结论第三方内容并不安全这些只是我所知道的一些技巧,我相信还会有更多类似的小技巧。第三方内容在其沙箱中具有很高的影响力。 原文:https://jakearchibald.com/201....

    walterrwuwalterrwu 评论0 收藏0
  • 我的一些开源项目(前端)

    我的一些开源项目(前端)

    摘要:于是,我决定厚着脸皮来宣传一下我的几个开源项目,虽然大多数都是一些比较简单的游戏,但是这可以让更多人看到我的项目,也可以让我自己知道哪里地方做得不好,并且加以改进。正文清技背单词使用开发的背单词应用,开发时间为一个月,目前是版本。 前...

    YuqiYuqi 评论0 收藏0
  • css新生陌生又常用的属性大全

    css新生陌生又常用的属性大全

    摘要:实现完整覆盖字体适配横竖屏切换伪元素选择器用法清除浮动用法写对话框使左右的对话框分开使内容居中用伪类写出小三角形分别给左右两边的小三角形定位左边对话框小三角形的边框样式右边对话框小三角形的边框样式吃了 vw,vh,vmin,vmax 实现完整覆盖 #ma...

    wall2flowerwall2flower 评论0 收藏0
  • 对网站的文件和资源进行优化

    对网站的文件和资源进行优化

    摘要:如何对网站的文件和资源进行优化文件合并文件最小化文件压缩托管缓存可能有些人不清楚是什么,可以用以前买米车票的经历来形象比喻年前,还没有火车票代售点一说,更是无从说起。 如何对网站的文件和资源进行优化 1.文件合并文件最小化/文件压缩2.CDN...

    APICloudAPICloud 评论0 收藏0
  • 中间自适应布局的5种解法

    中间自适应布局的5种解法

    摘要:前言在做页面时,我们往往会碰到页面布局相关的内容,面试时也经常会被问到,那么今天我就来总结一下关于页面布局的内容。问题如何实现三栏布局高度固定,左中右的结构假设高度已知,请写出三栏布局,其中左右宽度均为,中间自适应。 前言   在做页...

    keithxiaoykeithxiaoy 评论0 收藏0
  • 伪类与伪元素

    伪类与伪元素

    摘要:一伪类伪类包含两种状态伪类伪类和结构性伪类。状态伪类是基于元素当前状态进行选择的。二伪元素伪元素是对元素中的特定内容进行操作,而不是描述状态。 一、伪类 伪类包含两种:状态伪类(UI 伪类)和结构性伪类。 (1)状态伪类是基于元素当前状态进行...

    ChanceWongChanceWong 评论0 收藏0

热门文章

<