CSS - 教程之家

65浏览

0评论

css中一些常用的font-size字体单位和line-height详解

px(pixel)像素相信大家对像素这个名词并不陌生,接下来来介绍下这个单位的一些小知识点:pixel 是 picture(图片)和element(元素)这两个词组成的.pixel不是绝对的自然长度单位...

2020-10-16

99浏览

0评论

element带选择表格将表头的复选框改成文字的实现代码

方法一：使用表格属性：header-cell-class-name 表格界面代码<el-table ref="multipleTable" :data="tableData" :header-cell-class-name="cellclass" style="widt...

2020-10-16

139浏览

0评论

浅析CSS中单位px、rem、em、vh、vw之间的区别

绝对长度pxpx是像素值，是一个固定的长度，比如我们的米，厘米一样。相对长度为什么我们需要相对长度rem em等？固定长度已经不能满足我们现在的需求了。举例：比如我们在缩小我们屏幕...

2020-10-16

111浏览

0评论

用CSS Grid布局制作一个响应式柱状图的实现

最新一段时间比较喜欢玩弄图表，出于好奇，我想找出比较好的用 CSS 制作图表的方案。开始学习网上开源图表库，它对我学习新的和不熟悉的前端技术很有帮助，比如这个：CSS Grid。今天...

2020-10-16

65浏览

0评论

CSS columns实现两端对齐布局的示例代码

一、兜兜转转一大圈兜兜转转一大圈，最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。例如，我们想要实现3列元素两端对齐，中间间隙是30px，CSS代码为：.conta...

2020-10-16

88浏览

0评论

CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解

windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条，故回头翻了一下CSS3，还真能不用插件实现自定义滚动条的样式，正合我意代码如下：/定义滚动条高宽及背景高宽...

2020-10-16

45浏览

0评论

CSS 3.0 结合video视频实现的创意开幕效果

给大家分享一个用CSS 3.0结合video视频实现的创意开幕，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...

2020-10-16

72浏览

0评论

利用css3实现进度条效果及动态添加百分比

项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。先贴代码：<!DOCTYPE html><html lang="en"><head...

2020-10-16

285浏览

0评论

CSS3实现歌词进度文字颜色填充变化动态效果的思路详解

播放音乐时，歌词会随歌曲的进度逐渐填充颜色，不是逐字改变颜色，而是从左向右横向逐个像素改变的，也就是说会出现一个字的左右两边是不同颜色的效果。这个效果通过CSS3可以实现。...

2020-10-16

94浏览

0评论

CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码

百度面试碰到的题，要实现如下布局效果其中中间这紫色的一栏的大小随字体的多少而变宽/变窄，且多出的文字自动省略为[...],右边的绿色栏要紧紧连着紫色这一栏。主要对紫色这一...

2020-10-16

211浏览

0评论

使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基...

2020-10-16

115浏览

0评论

css实现缕空遮罩层的示例代码

本文内容：页面镂空遮罩层、页面镂空遮罩引导层、图片镂空遮罩常规遮罩层<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...

2020-10-16

68浏览

0评论

CSS样式书写顺序和命名规范及注意事项

书写顺序的意义减少浏览器reflow（回流），提升浏览器渲染dom的性能①:解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构②:构建render树：D...

2020-10-16

70浏览

0评论

浅谈Flex布局与缩放比例计算

一、Flex 布局简介Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，也就是说，行内元素也可以设置成Flex 布...

2020-10-16

56浏览

0评论

css实现背景虚化效果的示例代码

是不是下面的效果，是的话那就继续往下看！代码演示（以上图效果为例）把主要模块写出来，其他详细内容的代码就省略啦HTML代码： <div class="login-container"> //这个div就是背景...

2020-10-16

150浏览

0评论

CSS3实现淘宝留白的方法

做一个淘宝的留白：当你在缩小浏览器页面的时候他的内容区并没有缩小，是留白的变小。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type...

2020-10-16

73浏览

0评论

css 布局之两端布局的实例代码（利用父级负的margin）

最近在进行开发的过程中，有遇到两端对齐的布局，是按照百分比来进行布局的，之前有用过flex布局，但是flex布局，使用两端布局的时候，会出现一切bug。比如，下面的是动态生成的时候，三列...

2020-10-16

63浏览

0评论

CSS通过letter-spacing属性控制字与字间隔

letter-spacing 属性：增加或减少字符间的空白（字符间距）。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔...

2020-10-16

132浏览

0评论

css实现朋友圈照片排列布局的代码

首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例；可以发现除1张图片，4张图片特殊外，其他数量图片均使用一行三列的方式排列；假设有如下HTML代码，这里imgList是一...

2020-10-16

124浏览

0评论

详解CSS3实现响应式手风琴效果

最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ):最终效果如下:全屏时:...

2020-10-16

80浏览

0评论

修复一个因为scrollbar占据空间导致的bug问题

背景这一个因为滚动条占据空间引起的bug, 查了一下资料，最后也解决了，顺便研究一下这个属性，做一下总结，分享给大家看看。正文昨天，测试提了个问题，现象是一个输入框的聚焦提...

2020-10-16

61浏览

0评论

CSS实现3D书本效果的示例代码

话不多说，先来看一下效果图源代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...

2020-10-16

78浏览

0评论

CSS中的float和margin的混合使用示例代码

在最近的学习中，在GitHub上找了一些布局练习，我发现了我自己对布局超级不熟悉（很难受）。在以前的学习中，感觉使用CSS就记住各个属性的功能就OK了，但是呢？真的很打脸。不说了，太伤心...

2020-10-16

57浏览

0评论

CSS3中引入多种自定义字体font-face

今天在HTML中发现了一个问题，提供给我们默认的字体有很多，但是除了那些“黑体”、“宋体”、“楷体”等支持中文字体之外，其余的都不知道中文字...

2020-10-16

61浏览

0评论

纯CSS实现左右拖拽改变布局大小

利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们...

2020-10-16

158浏览

0评论

CSS3+JavaScript实现炫酷呼吸效果的示例代码

用css3动画实现的一个简单炫酷效果,最终的效果图如下:页面结构(index.html):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...

2020-10-16

109浏览

0评论

详解如何简单实现CSS主题的切换

我最近在我的个人网站上添加了一个非常简单的配色方案（主题）切换器。您可以在网站的页脚中切换此简单的颜色切换器，以查看其实际效果。万一其他人希望将这样的功能添加到自己的...

2020-10-16

118浏览

0评论

CSS实现Skeleton Screen骨架屏效果

在加载网络数据时，为了提升用户体验，通常会使用一个转圈圈的loading动画，或者使用Skeleton Screen占位。相比与loading动画，Skeleton Screen的效果要更生动，实现起来来也很简单。...

2020-10-16

129浏览

0评论

解决CSS中子元素z-index与父元素兄弟节点的层级问题

1.问题的出现写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。元素的结构大致如下：<...

2020-10-16

111浏览

0评论

使用CSS text-emphasis对文字进行强调装饰的实现代码

一、引言在过去，想要对某部分文字进行强调，通常的做法是加粗，或者使用一个高亮的颜色，现在有了新的选择，就是使用 text-emphasis 属性进行强调装饰。text-emphasis 家族总共有4个...

2020-10-16

92浏览

0评论

flex布局实现每行固定数量+自适应布局

本文介绍了flex布局实现每行固定数量+自适应布局，分享给大家，具体如下：效果展示解析 <div class="template" v-for="(item,templateIndex) in 7"> <div @click="u...

2020-10-16

86浏览

0评论

基于Css Variable的主题切换完美解决方案(推荐)

当接到这个需求的时候，百度到业界关于主题切换的方案还挺多的，css链接替换、className更改、less.modifyVars、css in js等等，但每一种方案听起来都是又累又贵。有没有那种代...

2020-10-16

132浏览

0评论

CSS3新增布局之: flex详解

flex 基本概念flex布局（flex是flexible box的缩写），也称为弹性盒模型。将属性和属性值（display:flex; ）写在哪个标签样式中，谁就是容器；它的所有子元素自动成为容器成员，称为项目...

2020-10-16

57浏览

0评论

浅析CSS :is() 和 :where() 即将出现在浏览器中

现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的CSS :is() 和 :where() 伪类。Chrome的实施仍然落后。使用 :is() 减少重复你可以使用 :is() 伪类来删除选择器列...

2020-10-16

144浏览

0评论

CSS3 box-shadow属性实例详解

CSS3 --添加阴影（盒子阴影的使用）CSS3 - 给div或者文字添加阴影（盒子阴影、文本阴影的使用）CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影...

2020-10-16

58浏览

0评论

CSS3为背景图设置遮罩并解决遮罩样式继承问题

工作中很多时候需要对图片背景作处理,比如设置通透性，模糊处理等等但是如果对背景图所在标签直接设置这些效果的话，这些样式会被子标签继承。例1: 给背景所在标签设置模糊效果...

2020-10-16

105浏览

0评论

CSS实现背景渐变和自动全屏的代码

CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题：
在设置了背景颜色渐变后好不容易调成了全屏覆盖
但按下了F11的时候崩溃的世界开始了
所以这篇文章...

2020-10-16

145浏览

0评论

基于CSS3的animation属性实现微信拍一拍动画效果

看到最近流行的微信拍一拍功能，复习下CSS3的animation,所以写下这个盒子晃动的动画，把qq的窗口抖动也加上吧@-webkit-keyframes shake { 0% { -webkit-transform: t...

2020-10-16

95浏览

0评论

css伪类右下角点击出现对号角标表示选中的示例代码

效果：css:.s_type { border: none; border-radius: 5px; background-color: #f3f3f3; padding: 7px 0; color: #606266; margin: 5px 2.5% 5px 0; widt...

2020-10-16

169浏览

0评论

如何利用vw+rem进行移动端布局

你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹简单介绍下rem布局方案rem是css中的长度单位，1rem=根元素htm...

2020-10-16

75浏览

0评论

CSS如何匹配到多个class的示例代码

css匹配到多个class 如下html标签li,class有open样式。我的需求是只有当open,active同时存在时，修改背景色为白色<li id="menu_268098" title="账户信息查询" class="open">...

2020-10-16

140浏览

0评论

使用CSS和Java来构建管理仪表盘布局的实例代码

您将要创造的在这个新教程中，我们将使用CSS和JavaScript来创建响应式管理仪表板布局。要构建它，我们将从WordPress仪表板中借鉴一些想法，例如其可折叠的侧边栏菜单。在整个教...

2020-10-16

93浏览

0评论

使用CSS的clip-path属性实现不规则图形的显示

clip-pathCSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。例子div { width: 200px; height: 200px; background: #6c00af; -webkit-clip-pa...

2020-10-16

91浏览

0评论

一文汇总 CSS 两列布局和三列布局的具体使用

前言随着大前端的发展，UI 框架层出不穷，让我们前端开发对 CSS 的能力要求变得没那么高或者没那么严苛，起码重要性是比不上 JS 编程的。但是，基础的 CSS 依然需要我们熟练掌握，今...

2020-10-16

104浏览

0评论

CSS规范BEM CSS和OOCSS的示例代码详解

前言在项目开发中，由于每个人的代码习惯不同，编写出来的css代码不够结构化，整洁度和语义化欠缺。BEM CSS和OOCSS的思想大家在日常编码中一定有所用到，只是没有系统的了解和完全...

2020-10-16

72浏览

0评论

CSS实现导航固定的、左右滑动的滚动条制作方法

如上效果的导航，导航是固定在顶部的，可以左右滑动点击更多选项的。这种制作相当简单，本文只是提几点注意：固定位置菜单固定在顶部不动，使用 position:fixed; top:0; left:0;。同...

2020-10-16

96浏览

0评论

Flex移动布局中单行和双行布局的区别及使用详解

这里是单行布局使用ul>li 来布局<ul class="local-nav"> <li> <a href="#"> <span class="local-nav-icon-icon1"></span> 攻略景点...

2020-10-16

109浏览

0评论

css 实现动态二级菜单

动态实现简单的二级菜单当鼠标放到一级标签上时，鼠标会变成小手的形状展示二级菜单，源码如下，复制即可直接使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...

2020-10-16

92浏览

0评论

纯CSS实现选中商品后右下角显示√号功能

推荐文章：css伪类右下角点击出现对号角标表示选中的示例代码：https://www.freexyz.cn/css/731762.html效果解析：1、利用伪元素选择器，来增加内容。
2、利用较宽的border实现&ra...

2020-10-16

143浏览

0评论

完美解决webpack打包css背景图片路径问题

在vue组件的style标签内部有如下一段使用背景图片的css代码background-image: url("../assets/img/icon_add.png");在webpack中css-loader的解析配置如下{ test: /\....

2020-10-16

热门文章