CSS
css多个元素一行排列的方法
1、弹性盒子模型（FlexBox），不考虑兼容性问题的情况下，建议新手直接使用这种模式，简单，最重要的是元素不会浮动，不会影响后面的元素的布局，比如下面代码中的我在底层这个div的显示没有任何影响。 <html> <head> <style> #tasklist{ background-color: ......
你也许不再需要使用 CSS Media Queries（媒体查询）了
你也许不再需要使用 CSS Media Queries（媒体查询）了 最近，CSS 引入了一项新功能：Container Queries。它可以替代 Media Queries 并实现 Media Queries 无法胜任的任务。 超越 Media Queries 的功能 让我们想象一个场景：在网页 ......
html+css3+anime.js实现线条来回滑动且渐隐动画
效果： 代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=devic ......
html+css3+anime.js实现文字故障动画
记录一个很酷的动画，效果如图： 是基于html+css3+anime.js实现的，看了眼代码，其实是默认文字的div中定位了几个相同的文字块，利用clip-path这个属性去裁剪展示其中的一部分，用于展示故障的效果，动画则是使用anime.js去循环改变X与Y轴的位置，同时调整绘制的颜色，demo代 ......
CSS-04
定位 将盒子定在一固定位置 组成 定位模式+边偏移 定位模式 static-静态定位(标准流)（相当于无定位） relative-相对 absolute-绝对（脱标） fixed-固定（脱标） 相对定位 相对位置 position: relative; top: 100px; 相对自己的位置移动 ......
css设置backgroud：url(),无效
react项目中，使用styled-components编写样式，给元素添加背景图不生效。 background直接设置十六进制颜色或者颜色的英文名称都是可行的，但是使用url无作用，那就是url问题了，于是我想换一种思路，能不能把图片import进来，放进url里，避免错误的路径呢，于是 哎嘿，好 ......
CSS 还原拉斯维加斯球数字动画
我的小册 《CSS 技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的 CSS 内容，可以猛击 - LINK。 最近大家刷抖音，是否有刷到拉斯维加斯的新地标 「Sphere」： 场馆内部的视觉效果非常惊人，其中一个效果让我虎躯一震： 我的第一想法就是，这个看起来用 CSS 也可以实现嘛？还有 ......
CSS:@keyframes和animation
一、@keyframes定义动画 通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% ......
2前端开发css
form表单 '''获取前端用户数据并发送给后端服务器''' <from action = ""></from> #需要再form标签内部编写获取用户数据标签 #1属性action 控制数据的提交地址 方式1：写全路径 action = "http://www.aa7a.cn/user.php" 方 ......
CSS-03
去掉li前面的项目符号：list-style：none 圆角边框 border-radius: 12px;可以是px或百分比 若将正方形改为圆形，则：border-radius: 50%;或者将其设为宽度的一半。 盒子阴影 box-shadow: 8px 10px 10px 10px rgba(0, ......
CSS - 放大缩小淡入淡出效果
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Zoom in and out Animation</title> <style> @-webkit-keyframes zoomIn { f ......
[学习笔记] 有关CSS响应式设计的单位
em 和 rem 单位：em 和 rem 是相对于元素的字体大小计算的单位。em 单位是相对于父元素的字体大小，而 rem 单位是相对于根元素（通常是 <html> 元素）的字体大小。em 和 rem 单位可以用于实现相对于字体大小的自适应布局。 vw 和 vh 单位：vw 和 vh 是视口宽度和视 ......
26个CSS超实用技巧
1.文字溢出显示省略号 单行文字： 一定要设置宽度 p{ • width:200px; • overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文字溢出显示省略号p{display:-webkit-bo ......
Tailwind CSS 速查
Tailwind CSS 提供了大量的实用程序类，这些类名都是使用缩写的方式，以更简洁地表述其含义。以下是一些常用的 Tailwind CSS 缩写及其对应的意义： 布局 w: width max-w: max-width h: height max-h: max-height m: margin ......
什么？？？CSS也能原子化！
原子化CSS是一种CSS的架构方法，倾向于使用用途单一且简单的CSS，通常是根据视觉效果进行类的命名，不同于BEM规则的CSS，原子的意思就是将CSS进行拆分，每个样式都有一个唯一的CSS规则 ......
web前端html+css页面内容的六种隐藏方式
一、使用透明度 语法：opacity:0 注意：元素消失，但是还会占据空间，只是视觉看不出来 <style> .box{ width: 100px; height: 100px; background-color: aquamarine; opacity: 0; }</style><div clas ......
前端 ( HTML + JS + CSS )
以下大多都摘自菜鸟教程：https://www.runoob.com/ HTML 简介 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup t ......
CSS制作逼真的波浪效果
效果 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta http-equiv="X-UA-Compatible" co ......
css 10-13
1.背影样式 backgroud-color 背景颜色 backgroud-color :red backgroud-image 背景图片 backgroud-image backgroud-position 背景图片位置 backgroud-position top left right bott ......
css-图片和文字小模块
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ......
CSS实现滚动条隐藏
使用伪元素：::-webkit-scrollbar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial- ......
CSS-02
Emmet语法 提高编写速度 HTML 生成标签：标签名+tab建 多个相同标签：div*3（生成3组） 父子关系：ul>li div>span 兄弟关系：div+p 有class或id的标签名：p.nav或p#nav 有顺序的类名：.demo$5 生成的标签内有内容：div{内容} CSS tex ......
【前端开发】前端使用Tailwind CSS写样式效率翻倍
vite+Vue项目配置教程 配置地址：https://tailwind.nodejs.cn/docs/guides/vite 中文文档：https://tailwind.nodejs.cn/docs/installation 说明：使用Tailwind CSS可省略写繁琐的css代码，通过用cla ......
CSS：盒子模型
盒子是什么？ 盒子可以理解为我们日常使用的快递盒，里面有个电视机，整个快递盒放到一个房间的左上角。我们用俯视角看，快递盒里面电视所占的空间，就叫内容区（content），电视与盒子四面之间的空间（padding），盒子的四个面（border），盒子外面与其他盒子或者墙壁距离就是外边距（margin） ......
CSS高度单位
line-height属性的细节 （子元素 继承 父元素 系数）与大多数CSS属性不同，line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。 语法line-height: normal | <number> | <length> | <percentage>n ......
html5+css3
一、HTML 1、浏览器内核又可以分成两部分： 渲染引擎（layout engineer）和 JS引擎（rendering engine） 后来的JS的发展独立出来， 常用5大浏览器 分别是：IE（edge）、Chrome、Firefox、Safari、opera。 浏览器内核有那些？ 分别被使用在 ......
【前端css】全局修改css让网页置灰，去掉色彩
html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -ms-filter: grayscale(100%); -o-filte ......
【vue2】实现css动效逐个顺序展示的效果（简陋版）
效果（进入预约里程碑模块后，小人从第一个台阶逐个闪烁出现在当前预约等级之前的台阶并消失，最终停留在当前预约等级的台阶上）： 虽然很low但是！就是这么设计的！于是在原本静态的代码上稍加了些修改（为什么，为什么，想问天问大地） 首先是台阶部分的代码： <div :class="$style.reser ......
Week8 HTML,CSS,JavaScript 课堂笔记
Routers 为了将数据从一个地方路送到到另一个地方，我们需要做出路由决策。也就是说，需要有人对数据如何从A点传输到B点进行编程 您可以想象数据如何从A点到B点采取多条路径，这样当路由器拥塞时，数据可以通过另一条路径流动 TCP/IP是两种允许计算机通过互联网在它们之间传输数据的协议 IP或互联网 ......