文章库ARTICLE COLUMN

  • 滑动效果的原理及实践一个滑动小插件

    滑动效果的原理及实践一个滑动小插件

    摘要:支持则认为是移动端,否则为端声明事件函数端和移动端这个函数是通用的。滑块的移动应该依据现在的位置计算。 本文转载自blog 转载请注明出处 目录 前言 基本原理 html结构 实践 小结 前言 移动端,滑动是很常见的需求。很多同学都用过swiper.js,本...

    JrainJrain 评论0 收藏0
  • flex属性详解

    flex属性详解

    摘要:在拜读了阮一峰的布局教程和有关属性的回答后整理成此文章,以便加深印象。属性是三个属性的简写形式。布局包括外部的容器和内部的项目,属性是项目的属性。 在拜读了阮一峰的flex布局教程和HaoyCn有关flex属性的回答后整理成此文章,以便加深印象。 f...

    468122151468122151 评论0 收藏0
  • 最近很火的百度MIP之 zblog改造

    最近很火的百度MIP之 zblog改造

    摘要:很多人都问过我,咖啡你的主题模板到底怎么改的。的改造非常简单。今天就免费给大家献上改造方案。好了,直接进入正题模板文件规范自己改,不多说。原文地址这是个技术文章,各位可以转载哈。 很多人都问过我,咖啡你的MIP主题模板到底怎么改的。我就...

    AnshiiiAnshiii 评论0 收藏0
  • CSS页面布局

    CSS页面布局

    摘要:实现三栏布局,中间自适应负值法放第一行首尾高度固定中间自适应的布局兼容头部中间置顶中间中间到底尾部针对设定的布局粘连置于底部方法一在上用负的粘连置于底部方法二在上用负的 实现三栏布局,中间自适应(margin负值法) middle left right body...

    leoperfectleoperfect 评论0 收藏0
  • 2种方法实现经典的左侧固定宽度200px,右侧自适应宽度的布局

    2种方法实现经典的左侧固定宽度200px,右侧自适应宽度的布局

    摘要:今天去面试前端人员,随即出了一个经典的布局问题,即如标题所示。可是结果令我很惊讶,超过一半的人都没答对,亦或是只答对一半在此记录下用两种方法,第一种普通的方法,第二种是利用布局。       今天去面试前端人员,随即出了一个经典的布局...

    raise_yangraise_yang 评论0 收藏0
  • 项目3种弹框模式

    项目3种弹框模式

    摘要:一需求二使用插件在里面使用完整例子不需要的选项就不要设置,详情看文档标题文本类型弹框显示时间点击确认按钮执行的操作点击取消按钮执行的操作解决在中使用时的报错三注意事项我在使用过程报错的几个地方解决添加这样代码选项报错原因版本修改跟 一...

    aaronaaron 评论0 收藏0
  • webpack1学习笔记

    webpack1学习笔记

    摘要:基本介绍引入文件打包文件预览选项参数基本配置创建项目创建并引入创建可参考官网配置模块化输出指定文件为详解和的种单一字符串,数组,对象根绝不同而不同数组和打包成对象多页面应用 基本介绍 引入文件 // a.js require("./b.js") require("style-l...

    LdhAndroidLdhAndroid 评论0 收藏0
  • CSS提高用户体验的那些事

    CSS提高用户体验的那些事

    1. 选择合适的鼠标光标 在有一些触摸屏上我们可能需要隐藏鼠标的光标,比如说播放器的屏幕上,这种情形下隐藏鼠标光标能带来性能方面的提升。 使用cursor: none;可以达到隐藏鼠标光标的效果。 对于一些旧的浏览器可能不支持这些新的光标关键字,可以通过使...

    浠ラ箍浠ラ箍 评论0 收藏0
  • 有关a标签的颜色、字体继承问题

    有关a标签的颜色、字体继承问题

    摘要:在中嵌套元素和元素,设置样式如下设置字体颜色不会被标签继承,因为标签有默认样式由于的层叠,元素继承自的样式被浏览器的元素的默认样式链接默认颜色为,字体带下划线给覆盖了。 在div中嵌套p元素和a元素,设置样式如下 this is paragraph ...

    sixgosixgo 评论0 收藏0
  • CSS形状之border-radius

    CSS形状之border-radius

    摘要:现将四个角指定为不同弯曲程度,结果如下其中可以写成以下形式此为新增的属性。相当于前面是水平弯曲长度,后面为竖直弯曲长度。其中是指弯曲的长度为矩形长度的等同于实例半圆形沿纵轴劈开的半椭圆四分之一椭圆技巧二形状 开发者常用border-radius来...

    cklljckllj 评论0 收藏0
  • 一列布局

    一列布局

    摘要:一一列布局一列布局多用于网站的首页,比如搜索,一列布局的结构简洁明了,主题突出,适合排列简单的内容,不适合多行内容,通常一列布局都是固定宽度的。页头主体内容页脚二单列宽度自适应布局。一列自适应布局在实际开发中不设置列的高度,让高度自适...

    lykopslykops 评论0 收藏0
  • 纯CSS实现网站常用的五角星评分和分数展示交互效果

    纯CSS实现网站常用的五角星评分和分数展示交互效果

    摘要:技术我们使用一些特殊的选择器,然后配合单选框以及复选框自带的一些特性,可以实现元素的显示隐藏效果。当接口返回的分数是分的时候,刚好占据一半的星星,星半,只要计算出百分比就行,只用管数据,用上数据驱动的特点来动态展示样式这个简直不要太容...

    TowersTowers 评论0 收藏0
  • 二列布局

    二列布局

    摘要:宽度自适应两列布局两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了。横向两列布局页头导航左上右上左下右上右下页脚 1、宽度自适应两列布局  两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动...

    MobServiceMobService 评论0 收藏0
  • SVG蒙版(mask)的基础使用教程

    SVG蒙版(mask)的基础使用教程

    摘要:接下来我先以为例,简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一,然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变,应用到彩色图层上就会产生透明度的渐变。 蒙版工作原理 设...

    Pines_ChengPines_Cheng 评论0 收藏0
  • safari Iframe 溢出 body

    safari Iframe 溢出 body

    摘要:移动端使用时浏览器中宽度溢出解决方案给添加夫元素并设置下面样式测试代码 移动端使用 Iframe 时, Safari 浏览器中 Iframe 宽度溢出 body 解决方案:给 Iframe 添加夫元素并设置下面样式style="overflow:auto;-webkit-overflow-scrolling:touch;" 测...

    NeverSayNeverNeverSayNever 评论0 收藏0
  • safari浏览器fixed后,被软键盘遮盖的问题—【未解决】

    safari浏览器fixed后,被软键盘遮盖的问题—【未解决】

    摘要:浏览器后,被软键盘遮盖的问题,已经有好多人问相关的问题,应该是问的角度不一样,还的再次提出咯。如上循环,问题无法解决。 safari浏览器fixed后,被软键盘遮盖的问题,已经有好多人问相关的问题,应该是问的角度不一样,还的再次提出咯。 问题描述...

    miyamiya 评论0 收藏0
  • flip你的动画

    flip你的动画

    摘要:如果你看到我的前一篇文章一篇文章说清浏览器解析和动画优化,理解本篇文章还是很简单的。,元素的终止状态。这会打断正在运行的动画,这是糟糕的。关键是确保你的预计算在用户响应的空闲时间执行,这样两个动画就不会冲突了。 在vue官方文档上看到vue...

    vibiuvibiu 评论0 收藏0
  • 有效解决 css sprite 图片使用 rem 单位边角缺失的问题

    有效解决 css sprite 图片使用 rem 单位边角缺失的问题

    摘要:起因在移动端使用布局时图片也需要用单位。例如原本提高倍写成这样浏览器解析就会准确多了。下面提到的办法就是的方案怎么做思路单位数值变大了,整体也会变得很大,需要缩小回原来的尺寸。本文同时发布在的博客 起因 showImg("https://segmentfault.c...

    tunnytunny 评论0 收藏0
  • 有关css重绘和回流的一个例子

    有关css重绘和回流的一个例子

    摘要:最近做了一个导航条动画,鼠标的时候会有一个可移动的下划线,结构大致如下使用了样式在页面生成的时候根据板块不同需要初始化的位置。按理说修改会导致页面的重绘和回流,但是实际上却没有达到预想的效果。 最近做了一个导航条动画,鼠标hover的时候...

    JellyBoolJellyBool 评论0 收藏0
  • css 单行文本溢出显示省略号

    css 单行文本溢出显示省略号

    摘要:有时候我们会遇到这样的情景,在一行显示过长的文字时会溢出,页面将变得很丑陋。这时候我们想要只显示一部分文字,将多余部分以省略号的形式显示。那么我们可以通过设置样式来达到目的。代码示例好了,就是这样 有时候我们会遇到这样的情景,在一行显...

    phoenixskyphoenixsky 评论0 收藏0
  • 响应式网站开发基础

    响应式网站开发基础

    摘要:搭建添加媒体查询标签添加标签嵌入标签嵌入因为性能的原因,应该避免使用间断点的选取弹性常见响应模式序号模式图解大体流动模型掉落列模型活动布局模型画布溢出模型有时一个网页同时结合几种模式,例如掉落列和画布溢出模型。 准备工作 远程调试 ch...

    fishfish 评论0 收藏0
  • Vue入门——Vue的核心

    Vue入门——Vue的核心

    代码部分请下载本文代码阅读,代码均能正常运行并有详细的注释。 本文代码下载地址 概述 无需置疑,Vue之所以能如此之火,主要受益于它是一个MVVM框架和它易学的文档,几乎所有觉得学习Vue有难度的开发者都是觉得组件脚手架等等不太好理解,但是这些都不是V...

    HackerShellHackerShell 评论0 收藏0
  • 浏览器渲染那些事之 Reflow、Repaint

    浏览器渲染那些事之 Reflow、Repaint

    摘要:原文链接浏览器渲染那些事之浏览器内核渲染引擎在各个浏览器厂商你追我赶的形势下,截止今日,产生了很多不同的浏览器,各个浏览器本质大同小异,核心部分基本相似,由渲染引擎和引擎组成。 原文链接 浏览器渲染那些事之 Reflow、Repaint 浏览器内核(...

    morganmorgan 评论0 收藏0
  • Javascript中的深复制

    Javascript中的深复制

    摘要:对一个对象或者数组这种引用类型的值进行复制可以分为浅复制和深复制,比如这样的一个对象很明显这个对象是存在两层的,不是基本类型值,而是另一个对象。上面讲的就是浅复制,在实际应用中存在很严重的问题。基于的做法是这样的浅复制深复制 对一个对...

    104828720104828720 评论0 收藏0
  • JS+CSS实现数字滚动

    JS+CSS实现数字滚动

    摘要:最近在实现一个显示颜色数值的动画效果时,尝试使用了书写模式及来实现文字的竖直方向的排列,并借助的过渡来实现动画效果。书写模式控制行内字符的旋转此时,效果如图然后我们将外层容器设置为,再添加一点即可实现数字的滚动效果。 最近在实现一个显...

    GalenceGalence 评论0 收藏0

热门文章

<