文章库ARTICLE COLUMN

  • 你知道SVG Sprites是什么吗,还在用css sprite就太low了

    你知道SVG Sprites是什么吗,还在用css sprite就太low了

    摘要:它是基于,由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道,那么元素是什么呢单纯翻译的话,是符号的意思,然我的理解是元素用来定义一个图形模板对象,它可以用一个元素实例化。 showImg("https://segmentfault.com/img/bVbhAl9?w=...

    fevinfevin 评论0 收藏0
  • 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

    前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

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

    leo108leo108 评论0 收藏0
  • 前端开发学习笔记 - 1. Node.JS安装笔记

    前端开发学习笔记 - 1. Node.JS安装笔记

    摘要:安装笔记官网下载文件官网地址安装程序双击进行安装。点击下一步程序安装的一个好的习惯是,把程序安装到盘或者盘的目录下面。 Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome"s V8 JavaScript engine. Node.js uses an event-d...

    BryanBryan 评论0 收藏0
  • 【Leetcode】72.编辑距离

    【Leetcode】72.编辑距离

    摘要:题目给定两个单词和,计算出将转换成所使用的最少操作数。这个题目比较为主要是,状态转换比较复杂。 题目 给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 。你可以对一个单词进行如下三种操作: 插入一个字符 删除一...

    TZLLOGTZLLOG 评论0 收藏0
  • 【响应式布局】initial containing block、viewport以及相关尺寸

    【响应式布局】initial containing block、viewport以及相关尺寸

    摘要:影响着其中元素的尺寸和定位。在标准中,元素的称为。当的宽度高度使用百分数的值时,这个百分数的基准就是的尺寸。例子其中就溢出了的区域。造成以上不同的原因是,在桌面端的缩放和在移动端的缩放有不同的性质。这两个数值的单位是设备独立像素。 前...

    weknow619weknow619 评论0 收藏0
  • 前端进阶系列(五):flex布局

    前端进阶系列(五):flex布局

    摘要:容器扩展项目以填充可用空间,或缩小它们以防止溢出。容器属性属性决定主轴的方向即项目的排列方向。属性定义了项目在主轴上的对齐方式默认值。与交叉轴的起点位置对齐。负值对该属性无效。 以下内容主要摘抄自阮一峰老师的博客http://www.ruanyifeng....

    Harriet666Harriet666 评论0 收藏0
  • 无单位数字line-height

    无单位数字line-height

    摘要:当一个元素是使用不带单位的数字,声明的值会被继承,也就是说这个值会在子元素中用来与子元素本身的重新计算子元素的。所以我们通常想要的效果是使用不带单位的我们可以在父元素上设定一个无单位数字其子元素会默认继承。 首先我们来了解一下line-hei...

    leap_frogleap_frog 评论0 收藏0
  • css溢出机制探究

    css溢出机制探究

    摘要:为什么需要深入学习溢出机制在实际开发的过程中,内容溢出是经常见到的。溢出当一个盒子的内容子元素孙子元素等后裔超过盒子本身的大小的时候,就会出现溢出。这个时候属性决定如何处理溢出。 为什么需要深入学习CSS溢出机制? 在实际开发的过程中,内...

    wangbinkewangbinke 评论0 收藏0
  • 设置图片水平垂直居中

    设置图片水平垂直居中

    摘要:第一种作为元素背景图片第二种标签方式布局方式绝对定位设置垂直居中 第一种: 作为元素背景图片 #app{ width: 500px; height: 500px; background: #ccc url("../../../static/images/demo.png") no-repeat center ...

    fsmStudyfsmStudy 评论0 收藏0
  • tab 切换下划线跟随实现

    tab 切换下划线跟随实现

    摘要:代码大致如下点击跟随结合使用类即可实现点击跟随使用参考资料不可思议的光标下划线跟随效果不可思议的纯导航栏下划线跟随效果切换下划线跟随实现 showImg("https://segmentfault.com/img/bVbg4wM?w=699&h=91"); HTML 结构如下: 不可思议的CSS ...

    CODINGCODING 评论0 收藏0
  • Slog65_项目上线之ArthurSlog个人网站上线4

    Slog65_项目上线之ArthurSlog个人网站上线4

    摘要:掘金主页简书主页天下难事必作于易天下大事必作于细开发环境需要的信息和信息源开始编码服务端环境已经配置好了,现在启动自己编写的服务器先切换至自己编写的文件路径下启动服务器,现在用自己的电脑打开浏览器,输入域名正常情况下,可以看到正常显示...

    BarriorBarrior 评论0 收藏0
  • 前端进阶(12) - css 的弱化与 js 的强化

    前端进阶(12) - css 的弱化与 js 的强化

    摘要:的弱化与的强化的三要素在前端组件化的过程中,比如等组件化框架的运用,使的弱化与的强化成为了一种趋势,而在这个过程中,其实还有另一种趋势也在慢慢形成的弱化与的强化。使用对象都是采用的这种写法。 css 的弱化与 js 的强化 web 的三要素 html, ...

    JackwooJackwoo 评论0 收藏0
  • 从输入URL到页面展示

    从输入URL到页面展示

    摘要:本地服务器收到信息后,再去联系顶级域名服务器。顶级域名服务器收到请求后,如果自己无法解析,再返回下一级域名服务器的,进行这样一个迭代查询之后,一直到子域名服务器。布局完成后,将渲染树转换成屏幕上的像素,显示页面。 当我们输入 URL 并按...

    sushengsusheng 评论0 收藏0
  • 像素,css像素,物理像素,设备独立像素,分辨率大乱斗

    像素,css像素,物理像素,设备独立像素,分辨率大乱斗

    摘要:我们用小米举例,屏幕像素物理像素为,设备独立像素为,也就是说,一个设备独立像素就包含个物理像素,同时我们能得出。 本文主要阐述移动端布局中常遇到的一些基本概念,这些概念也适用于PC端,这些概念大概有:像素(pixel),ppi,分辨率,物理像素...

    LiveVideoStackLiveVideoStack 评论0 收藏0
  • vue中如何实现后台管理系统的权限控制

    vue中如何实现后台管理系统的权限控制

    摘要:二接口访问的权限控制接口权限就是对用户的校验。代码如下按扭权限指令至此为止,权限控制流程就已经完全结束了,在最后我们再看一下完整的权限控制流程图吧五路由控制完整流程图六参考文献手撸后台管理网站之权限控制手摸手,带你用撸后台之权限控制 ...

    VincentFFVincentFF 评论0 收藏0
  • CSS魔法堂:一起玩透伪元素和Content属性

    CSS魔法堂:一起玩透伪元素和Content属性

    摘要:前言继上篇魔法堂稍稍深入伪类选择器记录完伪类后,我自然而然要向伪元素伸出魔掌的啦。和的注意事项默认必须设置属性,否则一切都是无用功默认,就是和的内容无法被用户选中的伪元素和伪类结合使用形如。 前言  继上篇《CSS魔法堂:稍稍深入伪类选择...

    DevTalkingDevTalking 评论0 收藏0
  • CSS多种方式实现底部对齐

    CSS多种方式实现底部对齐

    摘要:我在项目中刚开始就是计算来实现的,这种方式实现起来就是感觉不爽,每推送一条数据过来就要进行计算。 CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果:showImg("https://segmentfault.com/img/bVbg8sb?w=328&h=372");showImg("h...

    klinsonklinson 评论0 收藏0
  • 前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader

    前端每日实战:84# 视频演示如何用纯 CSS 创作一个极品飞车 loader

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

    JinBJinB 评论0 收藏0
  • react组件间的信息交流数据传递图文讲解

    react组件间的信息交流数据传递图文讲解

    摘要:子组件请输入邮箱父组件,此处通过获取子组件的值用户邮箱兄弟组件传递信息我们可以通过给这两兄弟一个共同的父亲,然后结合上面的两种方法将老大的信息传给父亲子传父,再通过父亲传给老二信息实现交流父传子这里只写出了父组件代码实现到的数据传递 ...

    yvonneyvonne 评论0 收藏0
  • css图像拼合技术(精灵图)

    css图像拼合技术(精灵图)

    摘要:图像拼合技术图像拼合图像拼合技术就是单个图像的集合。有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。 CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合。 有很多...

    SoapEyeSoapEye 评论0 收藏0
  • JS 实现全屏预览  F11功能

    JS 实现全屏预览 F11功能

    摘要:按进入全屏模式全屏查看按关闭全屏模式全屏关闭记得一定要加上调用代码,调用代码,调用代码,说三遍调用代码只做个人备忘,不做任何发表,不做信息交流。尽管拿去用,不谢 老是不通过,没办法,只能是重新发布了,反正我就是杠上了,大大小小写过很多...

    miguel.jiangmiguel.jiang 评论0 收藏0
  • [CSS]《CSS揭秘》第七章——结构与布局

    [CSS]《CSS揭秘》第七章——结构与布局

    摘要:精确控制表格列宽请注意,为了确保这个技巧奏效,需要为这些表格元素指定一个宽度哪怕是。同样,为了让发挥作用,我们还需要为那一列指定宽度。 自适应内部元素 figure{ max-width: 300px; max-width: min-content;//这个关键字将解析为这个容...

    AndrmanAndrman 评论0 收藏0
  • CSS 图像拼合技术(雪碧图)

    CSS 图像拼合技术(雪碧图)

    摘要:图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。代码如下改变背景效果图持续更新,多多关照 1、css 图像拼合 图像拼合就是单个图像的集合...

    lindroidlindroid 评论0 收藏0
  • 16种水平居中垂直居中方法

    16种水平居中垂直居中方法

    摘要:原文链接水平居中若是行内元素给其父元素设置即可实现行内元素水平居中若是块级元素该元素设置即可若子元素包含属性为了让子元素水平居中则可让父元素宽度设置为并且配合作如下设置是中给属性新加的一个属性值它配合可以轻松实现水平居中 原文链接 水...

    jerryjerry 评论0 收藏0
  • 用纯css来实现一个优惠券

    用纯css来实现一个优惠券

    摘要:关于径向渐变的具体使用可以参考张鑫旭的文章径向渐变语法及辅助理解案例则那么怎样实现我们要的效果呢我们先看看径向渐变的语法径向渐变由它的中心定义。 查看原文可以有更好的排版效果哦 前言 我们在平时的网页中,经常会见到这样的优惠券或者其他的...

    awkjawkj 评论0 收藏0

热门文章

<