经验首页
CSSCSS 高阶小技巧 - 角向渐变的妙用！
本文将介绍一个角向渐变的一个非常有意思的小技巧！ 我们尝试使用 CSS 绘制如下图形： 在之前，类似的图案，其实我们有尝试过，在 单标签实现复杂的棋盘布局 一文中，我们用单标签实现了这样一个棋盘布局： 那么，本文有什么特殊之处呢？让我们一探究竟。 快速实现网格布局 首先，上述的布...[2023/3/22]
巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画
本文将介绍一种基于 CSS 变量技巧，通过合理使用 CSS 变量，实现 CSS 动画 @keyframes 的复用。 CSS 变量 CSS 变量大家应该都比较熟悉了，已经不能算是新知识了，快速过一遍。 CSS 变量（CSS Variable），在之前也叫做 CSS 自定义属性，其使用方式如下...[2023/3/8]
CSS 瀹炵幇鍧楃骇鍏冪礌闈犲彸鐨勬柟娉昣CSS鏁欑▼_CSS
HTML 濡備笅锛?/p> <div cla ="parent"> <div cla ="block"></div> </div> 鎯宠鍧楃骇鍏冪礌灞呭彸寰€寰€璁剧疆 margi...[2023/3/8]
绾疌SS瀹炵幇浜嗕笅鍒掔嚎鐨勪氦浜掑姩鐢绘晥鏋淿CSS鏁欑▼_CSS
鑳屾櫙 鏈€杩戠湅鍒颁簡涓€涓壒鍒偒閰风殑缃戠珯涓婄殑涓€涓皬缁嗚妭锛屼笅鍒掔嚎鐨勫姩鐢汇€傜湅涓嬩粬鐨勫疄鐜版晥鏋溿€?/p> 浣嗘槸锛屽亣濡傛垜浠乏杈瑰苟娌℃湁瓒冲鐨勭┖闂村瓨鏀句竴鏉′笉鍙鐨勪笅鍒掔嚎鍛紵 鍍忚繖鏍枫€?/p> 鎬濊矾涓庡疄鐜?/h2> ...[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定义的数据浅析
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 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变化
一、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]
解决html页面运行时出现乱码问题
html乱码原因?? 1. 不同编码内容混杂：HTML乱码是由于html编码问题照成（常见 gb2312与utf-8两种编码内容同时存在照成） 2. 未设置HTML编码：<meta http-equiv="Content-Type" content="tex...[2021/12/31]
Amazing！！CSS 也能实现极光？
在上次写完这篇文章 -- 巧用渐变实现高级感拉满的背景光动画 之后，文章下面的评论有同学留言，使用 CSS 可以实现极光吗？ 像是这样： emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起...[2021/12/24]
CSS涓夊ぇ鐗规€х户鎵挎€с€佸眰鍙犳€у拰浼樺厛绾ц瑙CSS
1.c 灞炴€х殑缁ф壙 CSS涓湁浜涘睘鎬ф槸鍙户鎵跨殑锛屼綍涓哄睘鎬х殑缁ф壙锛?/p> 涓€涓厓绱犲鏋滄病鏈夎缃煇浜涘睘鎬х殑鍊硷紝灏变細璺熼殢锛堢户鎵匡級鐖跺厓绱犵殑灞炴€у€笺€傚綋鐒讹紝涓€涓厓绱犲鏋滄湁璁剧疆鑷繁鐨勫睘鎬у€硷紝灏变細浣跨敤鑷繁鐨勩...[2021/12/24]
浣跨敤CSS璁剧疆婊氬姩鏉℃牱寮廮CSS鏁欑▼_CSS
鍥犱负鍦ㄧ幇鍦ㄧ殑澶ч儴鍒嗛」鐩腑寰堝閮界敤鍒颁簡婊氬姩鏉★紝鏈夋椂鍊欑敤鍒版ā鎷熺殑婊氬姩鏉★紝鐜板湪璇翠笅婊氬姩鏉＄殑CSS涔熻兘瑙ｅ喅銆?/p> 姣斿缃戞槗閭鐨勬粴鍔ㄦ潯鏍峰瓙寰堝ソ鐪嬶紝灏辨槸鍒╃敤鐨凜SS鏉ヨ缃殑锛岃€屼笖鏄痺ebkit娴忚鍣ㄧ殑銆傚鍥炬墍绀猴細 ...[2021/12/20]
box-shadow(盒子阴影)
box-shadow 属性可以设置一个或多个下拉阴影的框 可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 语法： box-shadow: h-shadow v-sha...[2021/12/20]
gradients(渐变)
c 3渐变属性-Gradients CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gra...[2021/12/20]
利用 clip-path 实现动态区域裁剪
背景 今天逛 CodePen，看到了这样一个非常有意思的效果： CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学习的点，下面我们一起来看看。 如何实现这样一个类似的效果？ 首先，想一想，如果让你去实...[2021/12/17]
CSS浣跨敤浼被鎺у埗杈规闀垮害鐨勬柟娉昣CSS鏁欑▼_CSS
鍓嶈█锛?/p> 濡傚浘锛? trong> 鎴戜滑闇€瑕佸疄鐜颁竴涓竟妗嗛暱搴︽瘮瀹瑰櫒闀垮害灏忎竴浜涚殑杈规鏃讹紝浠ュ線澶у鏁伴兘鏄娇鐢╠iv宓屽銆傜幇鍦ㄥ彧闇€瑕佷娇鐢ㄤ吉绫诲氨鍙互瀹炵幇杩欎釜鏁堟灉锛屽苟涓斾娇鐢ㄨ捣鏉ュ緢鏂逛究銆?/p> 杩欓噷浣跨敤鐨勬槸寰俊灏...[2021/12/17]
鍦–SS涓娇鐢╳hen/else鐨勬柟娉昣CSS鏁欑▼_CSS
鐩綍when/else 璇硶鏇村鐢ㄦ硶缁勫悎浣跨敤鍐呰仈浣跨敤鏂扮殑濯掍綋鏌ヨ鍐欐硶鎬荤粨 澶у閮界煡閬揅SS宸茬粡鏈?code>@media銆?code>@support 鏌ヨ褰㈠紡鐨勬潯浠讹紝鍙互闈炲父鐏垫椿鍦伴€夋嫨瀵瑰簲鐨勬牱寮忥紝鐒惰€岃繕鏈変竴涓柊鐨勬彁璁彨鍋?when...[2021/12/17]
CSS宸х敤娓愬彉瀹炵幇楂樼骇鎰熻儗鏅厜鍔ㄧ敾 _CSS鏁欑▼_CSS
瀹炵幇 杩欎釜鏁堟灉鎯冲埄鐢?CSS 瀹屽叏澶嶅埗鏄瘮杈冨洶闅剧殑銆侰SS 妯℃嫙鍑烘潵鐨勫厜鏁堥槾褰辩浉瀵逛細 Low 涓€鐐癸紝鍙兘璇存槸灏介噺杩樺師銆?/p> 鍏跺疄姣忕粍鍏夐兘鍩烘湰鏄竴鏍风殑锛屾墍浠ユ垜浠彧闇€瑕佸疄鐜板叾涓竴缁勶紝灏卞嚑涔庤兘瀹炵幇浜嗘暣涓晥鏋溿€?...[2021/12/8]
CSS瀹炵幇浜旂甯哥敤鐨?D杞崲_CSS鏁欑▼_CSS
CSS 涓殑 2D 杞崲鍏佽鎴戜滑鍦ㄤ簩缁寸┖闂翠腑鎵ц涓€浜涘熀鏈殑鍙樻崲鎿嶄綔锛屼緥濡傜Щ鍔ㄣ€佹棆杞€佺缉鏀炬垨鎵洸绛夛紝鍙樻崲鍚庣殑鍏冪礌涓庣粷瀵瑰畾浣嶇殑鍏冪礌绫讳技锛屼笉浼氬奖鍝嶅懆鍥寸殑鍏冪礌锛屼絾鍙互鍜屽懆鍥寸殑鍏冪礌閲嶅彔锛屼笉鍚岀殑鏄紝杞崲鍚庣殑鍏冪礌鍦ㄩ〉...[2021/12/8]
瑙ｆ瀽div涓巗pan鍖哄埆涓庣敤娉昣Div+CSS鏁欑▼_CSS
鎺ヤ笅鏉ヤ簡瑙ｅ湪div+c 寮€鍙戠殑鏃跺€欏湪html缃戦〉鍒朵綔锛岀壒鍒槸鏍囩杩愮敤涓璬iv鍜宻pan鐨勫尯鍒強鐢ㄦ硶銆傛柊鎵嬪湪浣跨敤web鏍囧噯锛坉iv c 锛夊紑鍙戠綉椤电殑鏃跺€欙紝閬囧埌绗竴涓棶棰樻槸div涓巗pan鏈変粈涔堝尯鍒紝浠€涔堟椂鍊欑敤div锛屼粈涔堟椂鍊欑...[2021/12/8]
DIV CSS瀹炵幇缃戦〉鑳屾櫙鍗婇€忔槑鏁堟灉_Div+CSS鏁欑▼_CSS
涓€銆丏IV CSS鍗婇€忔槑鍩虹浠嬬粛 璁剧疆DIV鍗婇€忔槑CSS浠ｇ爜锛?/p> div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 璇存槑锛?/p> 1銆乫ilter锛氬win IE璁剧疆...[2021/12/8]
濡備綍瀹炵幇div 鍥剧墖鍦―IV鍐呮按骞冲眳涓璤Div+CSS鏁欑▼_CSS
div鍥剧墖灞呬腑鍥剧墖鍦―IV鍐呭眳涓紝璁╁浘鐗囦腑DIV鐩掑瓙閲屾按骞冲眳涓€?/p> 璁╁浘鐗囦腑DIV瀵硅薄鐩掑瓙鍐呮按骞冲眳涓紝鍜岃鏂囧瓧瀛椾綋鍦―IV鐩掑瓙鍐呮按骞冲眳涓瑿SS鐩稿悓銆?/p> CSS璁╁璞″唴瀹瑰眳涓牱寮忓崟璇嶄负锛?code>text-align...[2021/12/8]
浣跨敤 CSS 杞绘澗瀹炵幇涓€浜涢珮棰戝嚭鐜扮殑濂囧舰鎬姸鎸夐挳_CSS鏁欑▼_CSS
鑳屾櫙 鍦ㄧ兢閲屼細鏈夊悓瀛﹂棶鐩稿叧鐨勯棶棰橈紝鎬庝箞鏍蜂娇鐢?CSS 瀹炵幇涓€涓唴鍒囪鎸夐挳鍛€佹€庝箞鏍峰疄鐜颁竴涓甫绠ご鐨勬寜閽憿锛?/p> 鏈枃鍩轰簬涓€浜涢珮棰戝嚭鐜板湪璁捐绋夸腑鐨勶紝浣跨敤 CSS 瀹炵幇绋嶅井鏈夌偣闅惧害鍜屾妧宸ф€х殑鎸夐挳锛岃瑙ｄ娇鐢...[2021/12/8]
娴呰皥css瀹炵幇鑳屾櫙棰滆壊鍗婇€忔槑鐨勪袱绉嶆柟娉昣CSS
鍦ㄩ〉闈㈠竷灞€鏃讹紝涓轰簡缁欑敤鎴蜂笉涓€鏍风殑瑙嗚鏁堟灉锛岄渶瑕佽缃甦iv鐨勮儗鏅鑹蹭负鍗婇€忔槑鐘舵€侊紝浣犵煡閬撴€庝箞璁剧疆鍚楋紵 鎺ヤ笅鏉ワ紝灏卞拰澶у鑱婅亰濡備綍鐢ㄤ袱绉嶆柟寮忎娇div鐨勮儗鏅鑹插彉鎴愬崐閫忔槑锛屼互鍙婁袱绉嶆柟寮忕殑浼樺姡銆傛劅鍏磋叮鐨勬湅鍙嬪彲...[2021/12/8]