文章库ARTICLE COLUMN

  • 前端进阶系列(五):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
  • 前端每日实战: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

热门文章

<