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]

本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow()，实现对 HTML 元素及 SVG 元素的部分添加阴影效果，以实现一种酷炫的光影效果，用于各种不同的场景之中。通过本文，你可以学到： 如何利用 filter: drop-shadow() 对元素的部分内容添...[2021/11/8]

不到万不得已的时候千万别引入前端UI框架，因为HTML5和CSS3已经能实现绝大多数的功能，比如上期的《CSS实现最简洁的开关》 而很多人的思维还停留在web2.0时代，用各种库来做UI，导致网页臃肿。今天教大家用纯c 实现一个单选的折叠菜单，不需要JavaScript就能用。折叠菜单和...[2021/11/8]

前言 在敲打自己的个人博客时，在博客的详情页，对于不同的内容，我是想有不同的复制方式的。例如代码块我就想读者单击就可以复制，这样方便读者本地调试，而对于文字描述部分，希望可以不允许读者复制。作为一个坚定的能用CSS绝不上JS的极端份子，我最终找到了CSS3中的user-select。 兼容性 ...[2021/11/8]

单纯用c 实现切角+边框+投影+内容背景色渐变所有效果，因为UI没给背景切图，寻思这个理论上用c 就能实现。 看一下最终要实现的效果： 首先不谈内容紫蓝色渐变，一个单纯的四切角+黑色边框+轮廓投影，其实就直接用网上铺天盖地的background:linear-gradient 实现切...[2021/11/8]

前言： 这个也是我最近学习才发现的一个细节，就是常常会在一些网站，看到下面图中这样的一个小三角，以前没怎么学CSS，我一直以为它是个精灵图之类。😂 我是最近才开始认真学的前端，比纯小白稍微懂的稍微多一点点。 文章如若有那些不足之处，请及时指出，在此郑重感谢。 一、...[2021/11/8]

一、CSS作用域（样式分割）的使用 在vue中，让c 样式只在当前组件中生效：scoped 属性是 HTML5 中的新属性，是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。 二、scoped的实现原理 vue中的scoped属性的效果主要通过Po...[2021/11/8]

文字溢出怎么展示，你的需求是什么？单行还是多行？截断，省略，自定义样式，自适应高度？在这里你都能找到答案。接下来我会由浅入深，从原理到实现，带你一步步揭开多行省略的面纱。我们先从最简单的单行溢出省略开始， 热身，单行省略 这是一个全宇宙统一的方案，没有太多的魔法 /* 原理：设置...[2021/11/8]

本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel，并且介绍如何更好地利用这个面板。通过 CSS Overview Panel，可能可以帮助我们： 更准确（高保真）的还原设计稿，辅助设计走查环节 更好的精简我们的 CSS 代码 ...[2021/10/25]

到国庆了，大家都急着给祖国母亲庆生。 每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款： emm，很不错。 那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢？ 有人认为是改变其中一张图的透明度，实际上不是的。仔细观察合成后...[2021/10/25]

1、CSS构造块 1.HTML的局限性 HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。 操作html属性不方便 HTML里面添加样式带来的是无尽的臃肿和繁琐 2.CSS网页的美容师 ...[2021/10/19]

1、html <div cla ="loginbody"> <div cla ="border_corner border_corner_left_top"></div> ...[2021/10/19]

前言 在日常小程序开发中，我们可能会有这样的需求，将按钮悬浮，不随着页面的滑动而改变位置，例如文章详情页的分享按钮，我想做成悬浮的样子，或者首页设置一个悬浮按钮来实现一些可扩展的功能，既美观又方便实用 实现悬浮按钮我将从两方面进行讲解，一个是实现图片按钮，另一个是将按钮进行悬浮。 图片按钮...[2021/10/11]

CSS 布局 - position 属性 position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。 position 属性 position 属性规定应用于元素的定位方法的类型。 有五个不同的位置值： ...[2021/9/27]

前言 我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动的角度,并且在下落的瞬间赋值给房子的transform:rotate(),但这是实在是太麻烦了,不会是最优解. 但其实只要一个属...[2021/9/27]

大家好，我卡颂。 在CSS中，我们通过selector（选择器）选择样式片段： .title { color: red; } 简而言之，选择器title对应样式color: red; 换个角度，我们也可以说：关键词.title对应数据color: red; ...[2021/9/14]

关键点 CSS resize 属性允许你控制一个元素的可调整大小性 配合 resize 实现子元素的动态宽度 HTML：   <div cla =''picA''> <div cla =''picB''> ...[2021/8/26]

本文将介绍一个非常有意思的功能，使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样： 思路 首先，要实现这样一个效果如果不要求可以拖拽，其实有非常多的办法。 将两张图片叠加在一起 改变上层图片的宽度，或者使用 mask， 改变 mask ...[2021/8/26]

导航栏的实现、固定顶部导航栏、二级菜单实现 效果图： 2018/11/16更新： 最近在使用这个导航栏的时候，发现页面在放大和缩小的情况下，导航栏的布局和显示都有些小问题，所以重新改了一下c 部分的代码，重新贴上来 新的代码实现（优化布局）： <html>...[2021/8/26]

目录一、概述二、矩阵1、矩阵的定义2、矩阵的基本运算3、向量4、矩阵与向量三、矩阵变换1、矩阵缩放2、矩阵的旋转四、c 中的矩阵变换1、scale2、rotate3、skew4、translate5、matrix3d6、2D变换的矩阵形式 一、概述 c 中transform属性中的transla...[2021/8/26]

最近在学习层叠上下文，学习的过程中对z-index为0和为auto有什么区别产生了疑问，于是去百度查了一下资料。发现了一些问题，结合自己的实践（实验？）整理出了这篇笔记。 勘误 查资料时发现有一种说法是z-index为0是会创建新的层叠上下文，0会在auto上面。后半句话是错误的，z-ind...[2021/8/16]

目录一、华为CSS技术介绍二、H3C IRF2技术介绍三、华为CSS和H3C IRF2对比总结 一、华为CSS技术介绍 CSS是Cluster Switch System的简称，又被称为集群交换机系统（简称为CSS或集群）。是将几台交换机通过专用的集群线缆链接起来，对外呈现为一台逻辑交换机。 ...[2021/8/16]

一个常见的开发需要，我们希望折叠元素的一部分，直到需要它为止。一些常见的框架（如 Bootstrap 和 JQuery）提供了转换效果。然而，CSS Transition 在转换高度方面给予了我们很大的灵活性。因此，您不必在项目中加入其他框架。 下面我们看看，如何使用 CSS Transitio...[2021/8/5]

c 实现两栏布局，左侧固定宽，右侧自适应的7种方法，代码如下所示：  1、利用 calc 计算宽度的方法 c 代码: .box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;b...[2021/8/4]

从QQtabBar看BEM 首先BEM是什么意思？ BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论，是一种 CSS命名规范 weui-primary_loading__dot：库名-组件_状态__元素名 ...[2021/8/4]

本文主要介绍了纯html+c 实现打字效果，具有一定的参考价值，感兴趣的可以了解一下 效果图 分析   可以将动画看做三个不同的层次： 最底层的文字 中间挡住文字的背景 最上层的光标 文字是静止的，而中间的背景和最上层的光标是动...[2021/8/4]

每次滚动到元素时，都显示加载动画，如何添加？ 元素添加初始参数 以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。 添加初始数据，默认透明度0、左右分别移动100px。 左侧容器 .item-leftContainer { opacity: 0; ...[2021/8/4]

一、什么是两列布局 两列布局分为两种，一种是左侧定宽、右侧自适应，另一种是两列都自适应（即左侧宽度由子元素决定，右侧补齐剩余空间）。在c 面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下面将分别介绍实现方式。 二、左侧定宽、右侧自适应如何实现？ 1.双inline-block ...[2021/8/4]

效果 代码中的图片可以自己换的 下拉菜单HTML代码 <header cla ="header"> <div cla ="header_left"> <img s...[2021/8/4]

效果图 代码 - 以蓝色和黄色的环为例 <div cla ="container"> <div cla ="ring blue"></div> <div cla =&quo...[2021/8/4]

这是 Element UI loading 组件的效果图，看起来很酷，我们来实现一下！ 分析 动画由两部分组成： 蓝色的弧线由点伸展成一个圆，又从圆收缩成一个点。 圆的父节点带着圆旋转 代码 html <svg viewBox="25 2...[2021/8/4]

这次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏： 这样一个布局如何实现呢？下面介绍几种方法 一、伪元素拼接 假设有这样一个 HTML 结构 <nav cla ="tab"> <a cla ="tab-ite...[2021/8/4]

顶部菜单栏中放置搜索框是一个常见的场景，但如果搜索功能使用的不那么频繁，同时菜单栏中内容本来就比较拥挤，再放一个完整的搜索框在那就显得不那么美观。因此也有一个挺常见的做法是，只放一个搜索图标，需要时再显示整个搜索框，如下图所示： 实现思路 起始状态时搜索框没有显示，鼠标移入后从右侧滑入...[2021/7/19]

前言 Q：如果多个规则匹配同一个元素，而且部分声明之间有冲突，那么我们如何知道哪个规则胜出呢？ A：用户代理会计算每个规则中选择符的特指度，然后将其依附到规则中的每个声明上。如果两个或多个属性声明有冲突，特指度最高的声明胜出。而为了计算特指度，用户代理必须把规则“打散&rdquo...[2021/7/19]

本文主要介绍了html+c 实现环绕倒影加载特效，具体如下： 先看效果（完整代码在底部）： 实现（可一步一步边看效果边编写）： ※先初始化（直接复制）： *{ margin: 0; padding: 0; ...[2021/7/12]

一. overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 /*c 样式*/ <style type="text/c ">...[2021/7/5]

浮动的定义 设置元素脱离正常的文档流，使元素向左或向右靠近。父元素的边缘，或者其他设置了浮动的元素的边缘 浮动解决的问题 1.解决文字包围图片的问题 2.解决间隔问题 3.可以向左，或者向右排版 将文字排版到图片左端 不采用浮动时： 采用浮动时： 采用的属性 ...[2021/6/28]