码云笔记前端博客

CSS 实现让body背景图片自适应全屏

最近在整公司登录页背景时,需要为body设置全屏背景图片,如何让body的背景图片自适应整个屏,让然使用background相关属性了。 简单介绍一下接下来要用到的background属性知识。 url(images/beijing.p...

阅读全文

2019年10月25日 104℃ 0条评论 10喜欢

CSS3 box-shadow属性设置阴影效果用法大全

CSS3 box-shadow 属性用来向边框添加一个或多个阴影效果,该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定,省略长度的值是 0。利用该属性我们几...

阅读全文

2019年10月23日 72℃ 0条评论 13喜欢

CSS Grid网格布局实例教程

针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。虽然这些年 js 发展的势头正劲,盖过了 css 的发展风头,但是 css 也是有很大进步的。弹性布局、网格...

阅读全文

2019年10月18日 197℃ 0条评论 14喜欢

你值得收藏的66个实用的css开发技巧之组件技巧

上篇我们介绍了css开发技巧之图形技巧,接下来我们看看组件技巧,这也是66个实用的css开发技巧的最后一篇,如果你能学到这里,我真的是很佩服你,不管做什么都要持之以恒,大佬是怎么练成的,就是不断...

阅读全文

2019年10月16日 86℃ 0条评论 14喜欢

你值得收藏的66个实用的css开发技巧之图形技巧

上面我们介绍了色彩技巧相关知识,本文将为大家带来的是你值得收藏的66个实用的css开发技巧之图形技巧。 Figure Skill图形技巧 使用div描绘各种图形 要点:<div>配合其伪元素(::before、::after)...

阅读全文

2019年10月14日 90℃ 1条评论 14喜欢

你值得收藏的66个实用的css开发技巧之色彩技巧

紧接上篇文章我们说了你值得收藏的66个实用的css开发技巧之行为技巧篇,接下来我们来看看Color Skill色彩技巧知识。 Color Skill:色彩技巧 使用color改变边框颜色 要点:border没有定义border-color时...

阅读全文

2019年10月11日 74℃ 0条评论 12喜欢

你值得收藏的66个实用的css开发技巧之行为技巧

在上篇文章《你值得收藏的66个实用的css开发技巧之布局技巧》我们讲了Layout Skill布局技巧知识,本篇文章接着为大家讲有关Behavior Skill行为技巧知识,赶紧搬好小板凳坐下学习起来。 Behavior Skill ...

阅读全文

2019年10月09日 101℃ 0条评论 16喜欢

你值得收藏的66个实用的css开发技巧之布局技巧

作为一枚前端开发人,写代码就像是我们在写作一样,同样的需要技巧。试想如果你的代码乱七八糟,没有头绪,还冗余,出现大量的无用代码,任何人看了都想对你有一种几天的感觉。所以一份良好的代码能让...

阅读全文

2019年10月07日 212℃ 0条评论 16喜欢

仅使用CSS实现带有“显示更多”按钮的多行截断文本

前几天,在办公室的讨论中出现了截断的文字,我想知道CSS是否能够实现该功能,能够正确地截断文本,即支持以下内容: 多行 “显示更多”按钮,点击时展开文本 text-overflow: ellipsis不支持多行,但...

阅读全文

2019年09月05日 253℃ 0条评论 6喜欢

用Sass创建一个可维护的图标系统

我最喜欢的向网站添加图标的方法之一是将它们作为数据URL背景图像包含::after在我的CSS中的伪元素(例如)中。该技术具有以下几个优点: 除CSS文件外,它们不需要任何其他HTTP请求。 使用该backgroun...

阅读全文

2019年09月03日 114℃ 0条评论 7喜欢

CSS3 SVG clip-path路径剪裁属性简介

clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍clip-path的: clip-path属性可以防止部分...

阅读全文

2019年08月28日 165℃ 0条评论 10喜欢

深入理解css行高line-height及其应用

行高的定义与图解 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就...

阅读全文

2019年08月27日 232℃ 0条评论 8喜欢

CSS伪元素有哪些?伪元素的妙用技巧

什么是伪元素? 「伪元素」之所以称作「伪」,除了英文从「Pseudo」翻译过来之外,就是因为它并不是真正网页里的元素,但行为与表现又和真正网页元素一样,也可以对其使用CSS操控。 跟伪元素类似的还...

阅读全文

2019年08月22日 243℃ 0条评论 12喜欢

常用的CSS 字体单位:px、em、rem 和 % 看这篇就够了

对于绘图和印刷而言,「单位」相当重要的,然而在网页排版里,单位也是同样具有重要性,在CSS3 普及以来,更添加了一些方便好用的单位( em、rem.. .等),这篇文章将整理这些常用的CSS 单位,希望能够...

阅读全文

2019年08月20日 288℃ 0条评论 6喜欢

详解CSS3 3D的perspective属性

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投到一个2D视平面上。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并且变...

阅读全文

2019年08月12日 323℃ 0条评论 8喜欢

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 472 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1036 个
  • 建站时间: 522 天
  • 访问总量: 8681299 次
  • 最近更新: 2019年11月18日