经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 CSS

现代 CSS 解决方案:accent-color 强调色

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。 简单而言,CSS accent-color 支持使用几行简单的 CSS 为表单元素着色,是的,只需几行...[2024/3/1]

现代 CSS 解决方案:文字颜色自动适配背景色!

在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色。 简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。 其核心功能就是,让我们能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B。 其功能能够涵盖: 精简 调暗 饱...[2024/1/10]

带圆角的虚线边框?CSS 不在话下

今天,我们来看这么一个非常常见的切图场景,我们需要一个带圆角的虚线边框,像是这样: 这个我们使用 CSS 还是可以轻松解决的,代码也很简单,核心代码: div { border-radius: 25px; border: 2px dashed #aaa; } 但是,原...[2023/12/15]

脚踏esbuild祥云,胸怀tsx利刃,身披scss羽衣,追寻前端的本质

本文所有内容,纯属个人观点,无意与任何人争论 前端技术的现状 我觉得前端技术发展到现在有两个最主要的特征 前端工具链为前端工程化提供了强有力的支持 这方面主要是webpack、rollup、esbuild等工具产生的价值,当然还有背后的Node.js。 这些工具让前端开发者可以更...[2023/11/17]

CSS 也能实现 if 判断?实现动态高度下的不同样式展现

最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器高度没有超过某一个值时,没有箭头图标。反之,箭头图标出现。 这个效果在很多场景都会...[2023/11/15]

深入解析css-笔记

前言 本文章是根据《深入解析CSS》一书所作的学习笔记,书中的知识点基本都概括在这。希望对您有帮助,另外本博客是通过word笔记文档导入,虽然后续对内容和代码相关进行了一些格式处理,但还是可能会有漏掉以及不完善的地方,还请见谅。   优先级与继承 样式冲突时: 1>2>...[2023/11/1]

CSS 还原拉斯维加斯球数字动画

我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 最近大家刷抖音,是否有刷到拉斯维加斯的新地标 「Sphere」: 场馆内部的视觉效果非常惊人,其中一个效果让我虎躯一震: 我的第一想法就是...[2023/10/19]

CSS 多行文本超链接下划线动效

先看效果 乍一看,是不是感觉很简单,仔细一瞅发现事情好像没有那么简单。 如果十分钟还没想出怎么实现,那就把简历上的“精通c ”改成“了解c ”……?? 大部分人第一感觉都是想着用border-bottom去做,但是仔细看一下这个是多行文本,下划线始终在最后一行肯定是不合适的,而且下划线运...[2023/10/11]

现代 CSS 解决方案:原生嵌套(Nesting)

现代 CSS 解决方案:原生嵌套(Nesting)

很早之前,就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?,彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而今天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的规范! CS...[2023/9/15]

tailwindcss -原子化 CSS 框架

原子化 CSS 框架 我记得很久之前有时候为了少写些c ,我们通常会有如下的样板代码 .block { display: block; } .flex { display:flex } .flex-center { align-items: center; justify-c...[2023/8/30]

震惊!CSS 也能实现碰撞检测?

本文,我们将一起学习,使用纯 CSS,实现如下所示的动画效果: 上面的动画效果,非常有意思,核心有两点: 小球随机做 X、Y 方向的直线运动,并且能够实现碰撞到边界的时候,实现反弹效果 小球在碰撞边界的瞬间,颜色发生随机的变化 嗯?很有意思的效果。看上去,我们好像使用 CSS 实现了...[2023/8/29]

Taro项目引入Tailwindcss

Taro项目引入Tailwindcss

前情 Tailwind CSS 是一个原子类 CSS 框架,它将基础的 CSS 全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性也不错。它的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类名,然后生成相应的样式代码并写入到一个静态 CSS 文件中...[2023/6/19]

CSS 图片加载提前占位 padding-top、padding-bottom

CSS 图片加载提前占位 padding-top、padding-bottom

今天聊一个图片加载提前占位的一个问题 ??,内容比较适合初学者。 起因 在响应式页面当中,图片加载之前是不知道图片高度的,加载成功图片完全撑开。如果不做提前占位会把下面的内容挤下去,页面出现抖动,就像下面效果一样: 假如图片是自适应的,宽度为屏幕宽度的30%,高度等比例缩放,这时候是无法...[2023/6/9]

前端开发如何更好的避免样式冲突?级联层(CSS@layer)

作者:vivo 互联网前端团队 - Zhang Jiqi 本文主要讲述了CSS中的级联层(CSS@layer),讨论了级联以及级联层的创建、嵌套、排序和浏览器支持情况。级联层可以用于避免样式冲突,提高代码可读性和可维护性。 一、什么是级联层(Cascade Layers)? 1.1 级联层...[2023/5/30]

现代 CSS 解决方案:CSS 原生支持的三角函数

在 CSS 中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如 : calc():用于计算任意长度、百分比或数值型数据,并将其作为 CSS 属性值。 min() 和 max():用于比较一组数值中的最大值或最小值,也可以与任意长度、百分比或数值型数据一同使用。 clam...[2023/5/29]

利用css var函数让你的组件样式输出规范样式API,可定制性更高;

我们平时在使用Elementui Antdesing这些UI库时,难免会碰到使用deep强行侵入式去修改组件内部样式的情况;   比如下列代码,我们需要把ant的分页样式进行高度自定义,就得使用deep去修改;   这种实现方式确实能够达到我们的目的,但在开发时确总觉得不太合...[2023/5/10]

css 利用 linear-gradient 实现条纹背景

css 利用 linear-gradient 实现条纹背景

1. 水平条纹背景 当给背景设置渐变效果时,默认的渐变方向是垂直由上到下的,效果如下: { background: linear-gradient(#aaa, #ddd); } 尝试拉近色标的距离,会发现渐变区域变小了: { background: linear-gradie...[2023/4/21]

使用canvas制作炫酷黑客帝国数字雨背景html+css+js

目录制作:1.定义canvas标签:2.开始js部分,先定义变量:3.初始化字符串数组,先给每条字符串位置,字符先不给:4.绘制每条字符串:5.更新字符串:6.设置动画过程:7.在窗口大小改变时,设置canvas画布能实时铺满屏幕:完整代码: 制作: 1.定义canvas标签: <ca...[2023/3/29]

CSS 高阶小技巧 - 角向渐变的妙用!

CSS 高阶小技巧 - 角向渐变的妙用!

本文将介绍一个角向渐变的一个非常有意思的小技巧! 我们尝试使用 CSS 绘制如下图形: 在之前,类似的图案,其实我们有尝试过,在 单标签实现复杂的棋盘布局 一文中,我们用单标签实现了这样一个棋盘布局: 那么,本文有什么特殊之处呢?让我们一探究竟。 快速实现网格布局 首先,上述的布...[2023/3/22]

巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画

本文将介绍一种基于 CSS 变量技巧,通过合理使用 CSS 变量,实现 CSS 动画 @keyframes 的复用。 CSS 变量 CSS 变量大家应该都比较熟悉了,已经不能算是新知识了,快速过一遍。 CSS 变量(CSS Variable),在之前也叫做 CSS 自定义属性,其使用方式如下...[2023/3/8]

CSS 3 所有的选择器整理(2023.2)

你知道的和你不知道的所有选择器。不包含尚未广泛实现的,也不包含已弃用的。 基本的选择器规则(Selector) 类型(Type)选择器 直接用标签匹配特定的元素 span { ... } p { ... } 类(Cla )选择器 以.开头,匹配含有这个 cla 的元素 .info...[2023/2/10]

CSS 奇思妙想之酷炫倒影

在 CSS 中,倒影是一种比较常见的效果。今天,我们就将尝试,使用 CSS 完成各类不同的倒影效果,话不多说,直接进入主题。 实现倒影的两种方式 首先,快速过一下在 CSS 中,实现倒影的 2 种方式。 使用 -webkit-box-reflect 正常而言,-webkit-box-refl...[2023/1/16]

Vue如何在CSS中使用data定义的数据浅析

Vue如何在CSS中使用data定义的数据浅析

1、考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢? 2、使用自定义属性: data- 通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS...[2022/5/9]

js+css实现飞机大战游戏

本文实例为大家分享了js+c 实现飞机大战游戏的具体代码,供大家参考,具体内容如下 用js和c 实现,c 中定义样式,js中定义了具体的实现事件,例如碰撞、子弹、飞机等。 main.c 文件(可根据需要定义): *{ ? ? margin: 0; ? ? padding: 0; ...[2022/5/9]

Vue+TailWindcss实现一个简单的闯关小游戏

目录游戏介绍实现技术本游特色技术实现初始化页面小方块设置主角移动自动索敌敌人移动胜利与失败编辑关卡移入移出变色点击设置保存关卡 游戏介绍 这是一款2d益智闯关游戏,玩家须躲避敌人与陷阱到达终点 拥有多个关卡 可进行关卡的自定义并留存数据 实现技术 vue tailw...[2022/4/11]

vue或css动画实现列表向上无缝滚动

本文实例为大家分享了vue或c 动画实现列表向上无缝滚动的具体代码,供大家参考,具体内容如下 方法一:vue的实现方法 <div id="publishMain" cla ="b_list"> ?<div id="publishMain1"> ? ?<...[2022/4/11]

前端综合笔记整理

前端综合笔记整理

前端需要学什么? HTML5、CSS3、JavaScript 集成开发环境 IDE(编写和运行) 前段开发环境 编写环境: 高手(记事本) 企业(Sublime、Webstorm、DW、Brackets) 运行环境: 浏览器(Chrome) 学完后能做什么?...[2022/1/17]

神奇的滤镜!巧妙实现内凹的平滑圆角

神奇的滤镜!巧妙实现内凹的平滑圆角

背景 某日,群友们在群里抛出这样一个问题,如何使用 CSS 实现如下的布局: 在 CSS 世界中,如果只是下述这种效果,还是非常容易实现的: 一旦涉及到圆角或者波浪效果,难度就会提升很多。 实现这种连续平滑的曲线其实是比较麻烦的,当然,也不是完全没有办法。本文,就会带大家看看,使用...[2022/1/17]

CSS文本样式

文本样式 文本缩进 属性名:text-indent 取值: 1、数字+px 2、数字+em(推荐:1em=当前标签font-size的大小)(推荐使用) <style> p{ /* text-indent: 32px; */ 第一种...[2022/1/17]

浏览器内核有几种?

什么是浏览器内核? 简单来说,浏览器内核是浏览器的核心,也称“渲染引擎”,用来解释网页语法并渲染到网页上,浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息 浏览器内核又可以分成两部分:渲染引擎和JS引擎 渲染引擎:负责获取网页的内容并显示,不同的浏览器内核对网页的解析渲染也不同 J...[2022/1/17]

CSS font-size字体

font字体 目标:能够使用字体和文本相关样式修改元素外观样式 字体大小 属性名:front-size 取值:数字+px 注意点:谷歌浏览器的默认值是16px,单位需要设置,否则是无效的。 <style> p{ font-size: 3...[2022/1/17]

px、em、rem三者的区别

px、em、rem三者的区别

概念 px、em、rem都是计量单位,都能表示尺寸,但是有所不同,其各有各的优缺点 px px像素(Pixel),像素px是相对于显示器屏幕分辨率而言的 px作为单位是固定不变的,不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。 em em的值不固定,会继承父元素的字体大小,...[2022/1/17]

rem自适应移动端布局

简介 在页面整体布局中,页面元素的尺寸大小(长度、宽度、内外边距等)和页面字体的大小也是重要的工作之一。 一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目。反之,一个不友好的页面尺寸和字体大小设置,则会增加页面的复杂性,增加用户对页面理解的复杂性;甚至在当下访问终端(iPhone、i...[2022/1/17]

CSS三大特性

C 三大特性 继承性 特性:子元素有默认继承父元素样式的特点 可以继承的常见属性有: 1、color 2、font-style、font-weight、font-size、font-family 3、text-indent、text-align 4、line-height 5.......[2022/1/17]

记录:浏览器渲染过程

网页内容的组成 doctype: 提供浏览器的html版本信息 head : html头部 meta: 元数据信息 charset: 声明当前文档所实用的字符编码 http-equiv: 客户端行为,如渲染模式,缓存等 name[keywords]: 搜索引擎关键字 name[des...[2022/1/17]

a标签如何禁止href跳转或链接?

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。 (1)阻止默认事件 阻止默认事件的发生有两个方法: return false e.prev...[2022/1/17]

【HTML】笔记(1)--- HTML的基本标签,实体符号,表格(单元格合并等)

楔子:     博主的就业方向是JAVA后端开发嘛,虽然是后端,但是对于一些前端的知识还是要掌握的,所以博主接下来的一段时间要浅学一下 HTMl,CSS,JavaScript,但小生心系后端,所以笔记的话可能会记得"粗糙"一些(手动狗头)。   1、HTML基...[2022/1/17]

【HTML】笔记(2)--- 背景颜色和背景图片;图片img标签;超链接/热链接;列表

1、背景颜色和背景图片: 代码: <!DOCTYPE html> <html> <head> <!-- 这行代码的作用是建议浏览器以“utf-8”字符集打开 注意:并不是设置当前页面的字符编码方式 --> <meta...[2022/1/17]

css3中transition属性详解

c 3中通过transition属性可以实现一些简单的动画过渡效果~ 1、语法 transition: property duration timing-function delay; transition 属性设置元素当过渡效果,是一个复合属性,包括四个简写属性: transiti...[2022/1/17]

【HTML】笔记(3)--- form表单;实现用户注册表单;下拉列表支持多选;file控件;readonly与disabled;maxlength

注意:文中代码的效果仅展示了在浏览器上的外观,并未展示效果,别问,问就是博主懒(硬气地说道)   1、form表单初步: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8...[2022/1/17]

【HTML】笔记(4)--- 元素的id属性;div和span

1、HTML中元素的id属性: 笔记: 1、在HTML文档当中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。 2、注意:表单提交数据的时候,只和name有关系,和id无关。 3、id有什么用?     &nbs...[2022/1/17]

【CSS】笔记(0)--- CSS概述;HTML引入CSS样式的三种方式;列表样式;绝对定位

楔子: 1、什么是CSS,有什么作用? 1)CSS(Cascading Style Sheet):层叠样式表语言。 2)CSS的作用是:     修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。 HTML还是主体,CSS依赖HTML。C...[2022/1/17]

采用css3的var实现动态主题切换

背景 因为是一个二期项目,需要在一期的基础上做一些风格的改变,但是苦于没有产品和UI,所以这个事情就落到了前端的头上,一开始只是想的统一一下按钮和标题的颜色(这里就用到了var),顺便做些颜色改动比较方便,后面直接要求做一个动态主题切换(当然只是颜色的切换),所以就顺便研究了一下利用var来实现...[2022/1/17]

web浏览器及网页概念

------------恢复内容开始------------ html简介 认识HTML后要能明白 (1)网页的基本组成是什么 (2)说出什么是HTML (3)常用的浏览器有哪些 (4)web标准的三大组成部分是什么 首先让我们了解有关网页的基本概念 什么是网页? 网站是指在因特网...[2022/1/3]

web标准

web标准 web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。 那么web标准为什么存在呢? 让Web的发展前景更广阔 内容能被更广泛的设备访问 更容易被搜索引擎搜索 降低网站流量费用 使网站更易于维护 ...[2022/1/3]

javaScript系列 [09]-javaScript和JSON (拓展)

本文输出JSON搜索和JSON转换相关的内容,是对前两篇文章的补充。 JSON搜索 在特定的开发场景中,如果服务器端返回的JSON数据异常复杂(可能超过上万行),那么必然就有对JSON文档进行搜索的需求。在对JSON文档进行搜索的时候,建议使用专业的JSON搜索类库和工具来实现,这可以极大的简化...[2022/1/1]

DOM规范 - MutationObserver接口观察DOM变化

DOM规范 - MutationObserver接口观察DOM变化

一、MutationObserver 接口说明 此接口可以在 DOM 被修改时异步执行回调。使用 MutationObserver 可以观察整个文档、DOM 树的一部分,或某个元素。此外还可以观察元素属性、子节点、文本,或者前三者任意组合的变化。 DOM3 中新引进 MutationObs...[2022/1/1]

canvas 实现渐变色填充的三角形

实现效果 效果一: 效果二: 实现思路 canvas实现 1. 绘制三角形 html <canvas id="triangle" width="30" height="30"> Your browser does not support the canv...[2021/12/31]

SSM框架——thymeleaf学习总结

本人关于thymeleaf的学习源自: https: www.bilibili.com/video/BV1qy4y117qi 1、thymeleaf的项目搭建   首先创建springboot项目,相关博客有详细的创建教程,下方仅本人推荐示例(视频中也有相关项目创建教程):   IDEA创建...[2021/12/31]

Flex布局详解

一、Flex布局是什么???  Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为flex布局: .box{ display: flex; } 行内元素也可以使用 Flex 布局: .b...[2021/12/31]

85
2
记录数:2495 页数:1/5012345678910下一页尾页
 友情链接:直通硅谷  直通硅谷 怎么样 mac软件下载
加载更多