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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本文实例为大家分享了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]

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

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

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

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

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

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]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html乱码原因?? 1. 不同编码内容混杂：HTML乱码是由于html编码问题照成（常见 gb2312与utf-8两种编码内容同时存在照成） 2. 未设置HTML编码：<meta http-equiv="Content-Type" content="tex...[2021/12/31]

在上次写完这篇文章 -- 巧用渐变实现高级感拉满的背景光动画 之后，文章下面的评论有同学留言，使用 CSS 可以实现极光吗？ 像是这样： emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起...[2021/12/24]

1.c 灞炴€х殑缁ф壙 CSS涓湁浜涘睘鎬ф槸鍙户鎵跨殑锛屼綍涓哄睘鎬х殑缁ф壙锛?/p> 涓€涓厓绱犲鏋滄病鏈夎缃煇浜涘睘鎬х殑鍊硷紝灏变細璺熼殢锛堢户鎵匡級鐖跺厓绱犵殑灞炴€у€笺€傚綋鐒讹紝涓€涓厓绱犲鏋滄湁璁剧疆鑷繁鐨勫睘鎬у€硷紝灏变細浣跨敤鑷繁鐨勩...[2021/12/24]

鍥犱负鍦ㄧ幇鍦ㄧ殑澶ч儴鍒嗛」鐩腑寰堝閮界敤鍒颁簡婊氬姩鏉★紝鏈夋椂鍊欑敤鍒版ā鎷熺殑婊氬姩鏉★紝鐜板湪璇翠笅婊氬姩鏉＄殑CSS涔熻兘瑙ｅ喅銆?/p> 姣斿缃戞槗閭鐨勬粴鍔ㄦ潯鏍峰瓙寰堝ソ鐪嬶紝灏辨槸鍒╃敤鐨凜SS鏉ヨ缃殑锛岃€屼笖鏄痺ebkit娴忚鍣ㄧ殑銆傚鍥炬墍绀猴細 ...[2021/12/20]

 box-shadow 属性可以设置一个或多个下拉阴影的框 可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 语法： box-shadow: h-shadow v-sha...[2021/12/20]

c 3渐变属性-Gradients CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gra...[2021/12/20]

背景 今天逛 CodePen，看到了这样一个非常有意思的效果： CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学习的点，下面我们一起来看看。 如何实现这样一个类似的效果？ 首先，想一想，如果让你去实...[2021/12/17]

本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式，通过本文，你可能可以学会： 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 <progre > 创建进度条 HTML 实现进度条的局...[2021/11/8]