udp
1024
jadx批量反编译
自定义Toast
Tableau 技巧
pxc集群
华为云应用魔方
turtle
javafx
Executor
增强现实
毛球修剪器方案
nodejs
业界资讯
B+树
运算符重载
二元操作符
集成测试
一卡通数据分析
期末考试
css3
2024/4/11 13:25:37
微信小程序-wxParse解析单条html及多数据循环
wxParse-微信小程序富文本解析组件：https://github.com/icindy/wxParse
支持Html及markdown转wxml可视化
一、基本使用
1、下载wxParse文件夹，并引入到自己项目中 2、分别在相应的文件中引入以下文件
let WxParse require("../../utils/wxPars…
element-修改表格边框颜色
问题：修改element表格边框颜色后，发现边框颜色重叠，粗细不一致 解决：
.el-table--border,
.el-table--group {border-color: #C6CAD6;
}.el-table--border:after,
.el-table--group:after,
.el-table:before {background-color: …
Sticky footer布局
本文章从https://www.jb51.net/css/649287.html参考 上图所显示的效果就是sticky Footer，当页面主题内容不够长时，footer定位在窗口的底部，当页面主题内容超出窗口后，footer显示在页面的最底部 1、flex布局方式 html代码ÿ…
element-ui限制一张图片上传
需求描述：在做图片上传组件的时候 有时候需求回要求只能上传一张图片 bug：element-ui在上传完一张图片后上传按钮还会存在 虽然可以用自带的limt属性加以限制 但是上传按钮依然会存在 且存入数组的值依然会增加
解决：可以判断上传后数组的l…
css文本超出自动换行超出3行字段显示省略号 百试百灵
关键属性代码 width: 200px !important; //限制文本宽度word-wrap: break-word; //自动换行word-break: break-all; //自动换行（兼容字母）overflow: hidden; //超出隐藏text-overflow: ellipsis; //溢出显示省略号display: -webkit-box;-w…
Warning: icon should have ‘type‘ prop or ‘component‘ or ‘children‘解决方法
首先报错翻译 [ant-design/icons]应该有一个component或者children
通过排查发现 当icon为""或者null时 就会报这个错 方法如下 将icon " " 中间加个空格就好了
大体意思就是在给 icon 这个组件传值时不能穿空，就算多一个空格符也好…
尚优选项目流程布局参数
尚优选PC端项目流程
一、项目开篇
二、登录注册布局搭建
html
<div id"wrap"><!--头部开始--><header id"header"><!--头部上半部--><div class"headTop"><!--头部上半部版心--><div class"hea…
CSS3.0总结（1）
属性 1.盒子阴影
box-shadow:水平偏移 垂直偏移 模糊程度 模糊大小 颜色 inset（盒子内）
ps：这里注意水平偏移和垂直偏移可以给负数，其他属性值不可以。
2、文本阴影
text-shadow:水平偏移 垂直偏移 模糊程度 颜色
ps…
Swiper插件的使用
Swiper插件的使用
一、使用版本与下载地址
使用版本：swiper3官网地址：Swiper3|Swiper中文网下载地址：下载Swiper - Swiper3|Swiper中文网官方API文档：中文api - Swiper3|Swiper中文网
二、初始化建立项目中的Swiper 获取文件&a…
28.CSS创意文本动画悬停效果|
效果 (源码网盘地址在最后) 关注公众号《大迁世界》，查看更多视频教程！
源码
index.html
<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=…
用canvas画一个炫酷的粒子动画倒计时
前言
😆 这是一篇踩在活动尾声的文章，主要是之前在摸鱼社群里有人发了个粒子动画的特效视频，想着研究研究写一篇文章出来看看，结果这一下子就研究了半个多月。
😂 下面就把研究成果通过文字的形式展现出来吧…
小程序自定义的拍照组件横屏拍照改变方向解决方案
自定义的拍照组件横屏拍照改变方向
本人最近在做一个涉及到拍照的小程序，由于微信原生的拍照组件不能个性化定制，所以就自己改装了一个拍照组件 但是发现，正常竖向拍照的时候可以用， 但是横向拍照，所得的结果还是横…
前端学习，html5css实战总结
文章目录开始学习HTML标签HTML 学习h2标签HTML 学习p标签删除HTML的注释HTML注释语句学习HTML用占位符文本填补空白删除HTML标签HTML 更换文本的颜色使用CSS选择器定义标签使用一个CSS Class去给标签定义StyleHTML 为多个元素使用CSS类定义样式HTML 设置标签的字体大小HTML 设置…
vue动画transition
一、动画生命周期
在进入/离开的过渡中，会有 6 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用…
“人工” 智能社交配对 | Mixlab CP盲盒大大大放送
快来 MixLab认领 一个男 / 女朋友规则√√√ 转发这篇文章到朋友圈帅气小编Chauncy会将前一个转发的男生和后一个转发的女生进行互推Chauncy也单身，来撩MixLab CP盲盒活动将持续三天 | 正在进行时文末小编爆照~ 也可以来领走！跨专业 无尽寻爱今天MixLa…
工具的重要性就不需要我强调了吧？！~
前两天自从在视频号分享了“新一代图像编辑器”后，有好多小伙伴问我网站，这次索性将链接放在了文章下方，供大家试玩。安利两款自动抠图网站效果大家可自行比对 1 Trace它的母网站主要是做自定义贴纸，但很多需要顾客制作个性贴图&…
popper.js源码初识研究总结
第一阶段 实现popper能够定位到盒子的上下左右
1 首先获取 当前tooltip元素所在的位置的父级哪个是定位属性 relative/absolute
2 计算出当前tooltip父级定位元素的 getBoundingClientRect 和 refrence的getBoundingClientRect getBoundingClientRect能计算当前盒子的宽高 to…
点击按钮控制滚动条滚动
<div class"tags">// 左侧按钮<el-link :underline"false" click"leftClick" :disabled"showLeftIcon"><div class"backColor" style"float:left;margin: 8px 0"><i class"el-icon-arr…
CSS设置checkbox/radio样式
CSS设置checkbox/radio样式
使用背景图修改样式 注意：借用label来实现input功能及样式
Html：
<input class"checkbox-square" type"checkbox" id"word" />
<label for"word"> </label>
//…
背景图长宽100%，也能显示不全？
前言
前两天进行业务开发时，用到一个「券样式」的背景图(background-image)，即下图的「返利￥1.30」：
容器的宽度会根据文字内容自适应，代码如下： css:
.coupon-like {padding: 8rpx 10rpx;background-s…
css object-fit, object-position img 标签适应宽高
在弹性布局泛滥成灾的今天, "未知比例图片, 适应未知比例盒子"的需求已经屡见不鲜 常用的方法
常用的方法是用 css 的背景图
div {width: 500px;height: 600px;background-image: url(cat.jpg);background-size: cover;background-position: 50% 50%;
}background-…
css 强制不换行超出显示省略号，自动换行超出显示省略号
强制不换行
white-space:nowrap;
自动换行
word-wrap:break-word;
强制英文单词断行
word-break:break-all;
*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。
超出显示省略号
text-overflow:ellipsis;
overflow:hidden;
内容超过…
CSS的四种导入方式、三种基本选择器、层次选择器 2022-1-23
一、CSS的四种导入方式
HTML里面写的style为内部样式表，CSS里面写的叫外部样式表
内部样式外部样式行内样式 HTML:
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>Title</title>…
elementui的上传功能-上传图片加参数
elementui的上传功能-上传图片加参数
<el-form class"up-code"><el-form-item><el-uploadclass"upload-demo upload-flex"action"#"ref"upload":on-preview"handlePreview":on-remove"handleRemove&qu…
20个首页流行布局样式,你喜欢哪个?
作者：Niemvuilaptrinh 译者：前端小智 来源：Niemvuilaptrinh 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大…
25.iPhone 14动态岛效果
效果 (源码网盘地址在最后) 关注公众号《大迁世界》，查看更多视频教程！
源码
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Dynamic Island Effect | Html CSS</title><…
30.快速的CSS动画效果
效果 (源码网盘地址在最后) 关注公众号《大迁世界》，查看更多视频教程！
源码
index.html
<!doctype html>
<html><head><meta charset="utf-8"><title>Glowing Dots Animation</title><link rel="stylesheet"…
33.丰富多彩的发光液体碗动画特效
效果 (源码网盘地址在最后) 源码
index.html
<!DOCTYPE html>
<html>
<head>
<title>Colorful Glowing Liquid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<bo…
35.CSS指纹扫描器动画效果
效果 (源码网盘地址在最后) 源码
index.html
<!DOCTYPE html>
<html>
<head>
<title>Scanning Fingerprint Animation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>…
36.滑动式产品卡UI设计
效果 (源码网盘地址在最后) 源码
index.html
<!DOCTYPE html>
<html>
<head>
<title>Product Card UI Design</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<bod…
37.圆形导航菜单魔法指示器
效果 (源码网盘地址在最后) 源码
index.html
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Radial Menu with Magic Indicator</title><link rel="stylesheet" href="style.css">
&…
【CSS】基础笔记——第四天
▉ 浮动（float） ▊ CSS布局的三种机制
网页布局的核心——用CSS摆放盒子
CSS提供三种机制来设置盒子的摆放位置——普通流（标准流）、浮动、定位
❶ 普通流——块级元素自上而下、行内元素自左到右的HTML布局
❷ 浮动——让盒子…
【CSS】基础笔记——第五天
▋ CSS属性书写顺序
❶ 布局定位属性：display / position / float / clear / visibility / overflow…
❷ 自身属性：width / height / margin / padding / border / background…
❸ 文本属性：color / font / text-decoration / text-alig…
【CSS3】CSS3新特性——新增选择器
▊ 属性选择器
根据属性进行选择。
E[attr]选择具有arrt属性的E元素E[attr"val"]选择具有arrt属性且属性值等于val的E元素E[attr^"val"]选择具有arrt属性、且属性值以val开头的E元素E[attr$"val"]选择具有arrt属性、且属性值以val结尾的E元素E…
微信 H5 开发，几个常见兼容性的坑
最近给公司写了微信 h5 业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题…
啥？css 也有状态管理
CSS用于交互的方式无非就那么几种：伪类：:hover、:link、:active ...动画：animation过渡动画：transition这些交互方式组合起来，真的可以玩出一些花样，例如我们本文的主题，CSS的状态管理ÿ…
10万人排队内测的APP，mmhmm~2亿融资？ | MixLab人工智能
mmhmm这是一款有趣的工具，从发音开始：“嗯哼~~” 嘴角上扬，音调拐弯。简单来说，它可以让你在开视频时：随意切换背景且，能让你完美的置身于背景之中。应用场景：视频内容创作、演讲、教师讲课、在…
MixTime 黑设会之原力觉醒
在大家的翘首盼望下，MixLab 终于在1月9日迎来了2021年第一次线下聚会，之后我们也将围绕 #人工智能交叉领域的最新进展/知识# 进行常态化分享。MixTime 黑设会HackerDesigner Community Offline Meetup虽然线下活动刚刚启动，工作蛙就已经收到了…
css学习 什么是CSS 、对于CSS的初步学习理解 2022-1-21
如何学习
CSS是什么CSS怎么用CSS选择器（重点难点）美化网页（文字、阴影、超链接、列表、渐变…）盒子模型浮动定位网页动画（特效效果）
什么是CSS
Cascading Style Sheet 层叠级联样式表 CSS：表…
【CSS】基础笔记——第三天
▉ CSS盒子模型 ▊ 盒子模型（Box Model）
盒子模型的四个组成部分：外边距（margin），边框（border），内边距（padding），内容（co…
单行和多行显示省略号
单行： overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 在scss中 /*! autoprefixer: off / -webkit…
震惊！！！一眼就能看懂的CSS页面布局方式！！！！
代码复制都可以直接使用！有帮助记得点赞互粉加收藏！
1.理解盒子模型 border-sizing(怪异盒子)：内容宽高margin外边距左右 content-box(标准盒子)：内容宽高margin外边距左右padding内边距左右border边框 一个盒子由外到内可以分成…
CSS面试题汇总（一）
1. 实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
参考答案：
<div style"height:1px;overflow:hidden;background:red"></div>2. 介绍一下标准的 CSS 的盒子模型？低版…
百度云节日期间全程为您服务
尊敬的百度云用户，"劳动节"假期将至，4月29日至5月1日期间，百度云服务依然在您身边7*24守候，可以通过百度云管理控制台右上方“工单”按钮或电话4008777818随时与我们联络。技术类问题与新用户实名认证需求，我…
body min-width 防止页面被过度压缩
在打开控制台，或控制页面宽度等操作，很容易导致页面dom被压缩，从而导致dom元素被换行这样不符合预期的显示，可以通过
//全局css样式
html
body
$app{height: 100%;margin: 0;padding: 0;min-width: 1300px;
}
//min-width设置页面…
css常用指南，浮动、清除浮动、展示栏实例
清除浮动方式一
.parent{border: 1px solid red;
}
.div1{width: 100px;height: 100px;background-color: pink;float: left;
}
.div2{width: 200px;height: 200px;background-color: greenyellow;float: left;
}
/* 清除浮动方式1 */
.clean_float{clear: both;
}<!DOCTY…
css常用指南，css添加的方式，元素选择器， 关系选择器，属性选择器、列表样式
<html><head><meta charset"utf-8"><title></title><link rel"stylesheet" href"css/index.css"/></head><style>span{color: red;background-color: yellow;}</style><body>怎样在…
css3的box-sizing
box-sizing: content-box|border-box|inherit; border-box可以将盒子内的border内减 <!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>Document</title>
</head>
<style type"text…
CSS选择器：基础选择器
筛选具有相似特征的元素
分类： 1、基础选择器 2、扩展选择器
基础择器 1、id选择器 选择具体的id属性值的元素 语法：#id 属性值{}
2、元素选择器 选择具有相同标签名称的元素 语法：标签名称{} 注意：id选择器的优先级要高于元素…
移动WEB开发之rem适配布局
rem适配布局
我们来看几个问题：
页面布局文字能否随着屏幕大小变化而变化？流式布局和flex布局主要针对于宽度布局，那高度如何设置？怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
一、rem 基础
rem 单位
r…
前端基础复习笔记----02web三大核心技术？HTML基本结构和属性？HTML初始代码？HTML注释？标题与段落？
1. web三大核心技术？ HTML CSS JavaScript
2. HTML基本结构和属性？ HTML ： 超文本 标记 语言 超文本 : 文本内容 非文本内容 ( 图片、视频、音频等 ) 标记 : <单词> 语言 : 编程语言 标记也叫做标签： …
2020 前端VUE面试(杭州)
前两天一个朋友来杭州找工作了,我整理了下他的面试题
先说下他的情况: 19年毕业,差不多一年工作经验,前端。刚开始找了一周,面试寥寥,我让他改成两年工作经验,实习一年工作一年。
不是想骗什么,主要是现在疫情原因,工作不好找,他写了一年工作经验,都没人理他。这个东西也不是简…
修改Element-ui组件的样式无效？
框架vue2.0，使用element中自有些组件样式不合心意，但是在style中改不过来？ 1，想将某个组件样式全局统一，通过控制台f12查看组件类名，在App.vue的style里面，写入要修改的样式，style不…
最详细完整的flex弹性布局
初了解 在学习弹性布局之前首先就要明白其概念 flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性 任何一个容器都可以指定为flex布局
.box{display: flex;
}Webkit 内核的浏览器，必须加上-webkit前缀。
.box{disp…
div弹出框加遮罩完整版，复制粘贴就能用
先上效果，后面的代码为了让样式复制不那么麻烦，我尽量多写在行内 其中js是依赖jquery1.8x ,请自行加入 上一版本比较复杂，结合了js ，ajax请求和诸多交互的js代码
点击了解上一版本 这版本是js只管弹出窗体以及遮罩
/*** 点击弹…
netcore 启用EnableRewind倒带解决只能读取一次body的问题
使用以下方法：
Current.Request.EnableRewind();
Stream reqStream Current.Request.Body;
byte[] buffer new byte[Current.Request.ContentLength.Value];
reqStream.Read(buffer, 0, buffer.Length);
inputString Encoding.UTF8.GetString(buffer);
Current.…
5.3 CSS3 2D转换
5.3 CSS3 2D转换
2D转换方法：对元素进行旋转、缩放、移动、拉伸 主要使用transform属性，它的不同的取值采用不同的函数，就可以完成不同的效果。 rotate（deg）；函数，旋转效果。 transform&#x…
css3过渡运用（特定标签，特定div块，特定属性。。。）
div{width: 100px;height: 30px;line-height: 30px;/* 文本垂直居中 */border-radius: 5px;/* 圆角边框 */color: #000;/* 文字的颜色（初始状态） */background-color: silver;/* 背景的颜色（初始状态） */transition: all 1s linea…
css3设置图片自适应缩放
object-fit: cover;
<div class"theImg"><img src"../assets/img/img1.jpg">
</div>
<style>
.theImg{width: 200px;height: 200px;
}
.theImg>img{width: 100%;height: 100%;object-fit: cover;
}
</style>
面试题：说说display：none和visibility:hidden区别；visibility:hidden和opacity:0的区别
display：none和visibility:hidden区别
如果一个属性设置display:none那他在页面上显示的空间也会没有，他会直接操作DOM，所用的成本比较大 如果一个属性设置display:visibility他在页面上的空间不会消失，不会操作dom，可…
CSS3 3D转换中用perspective实现不同角度查看元素
perspective 多角度查看元素
开发工具与关键技术：DreamWeaver perspective属性
作者:听民谣的老猫
撰写时间：2019/2/1 14:15我们经常会以九宫图的方式去展现一些照片: 上面是九宫图最普遍的一种展现方式了，看多了?看腻了?
试试换不…
css3练习——动画练习
用css3动画，仿照千寻浏览器气球的动画效果 <!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta h…
css3练习——三维动画
用css3动画制造正方体 html
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wi…
弹窗显示时背景滚动处理
项目中存在的问题： position：fixed的弹窗显示时，背景的内容仍然可滚动？ 以往的解决方案: 采取js的方式将overflow：hidden；
根本原因是： position：fixed是相对根元素(html)ÿ…
react中多行文本溢出省略
{width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */-webkit-line-clamp: 2;
}
CSS3实现三栏布局 左右固定 中间自适应 /圣杯布局/双飞翼布局
CSS3实现三栏布局 左右固定 中间自适应 /圣杯布局/双飞翼布局
圣杯布局/双飞翼布局：中间一栏先加载和渲染，两侧内容固定，中间内容随着宽度自适应,一般用于pc端网页
双飞翼实现步骤：
1、先写出3个<div>盒子
<div clas…
CSS 标题文字超出时如何用省略号显示
1.把超出的文字先隐藏
overflow:hidden; 2.必须设置让文字一行显示 white-space: nowrap; //强制不换行3.溢出的文字用省略号代替 text-overflow: ellipsis;
CSS基础篇---CSS的引入方式(6)
CSS分为三种样式表:
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式) 内部样式表: 就是将 CSS代码写到HTML中
理论上: style标签可以放在HTML文档的任何地方,但一般会放在文档head标签中
优点: 方便控制当前整个页面中的元素样式设置 且 代码样式清晰
缺…
educoder答案-CSS样式规则-太原理工大学
太原理工大学 Web程序设计基础2021秋答案 educoder
本实训项目为廖丽娟老师团队自己编写的实训项目，此账号超前更新答案，助力各校友学好web 第1关：CSS基础知识
B D C A B 第2关：初识CSS
<!DOCTYPE html>
<html>&…
定位（相对定位、绝对定位、固定定位、z-index） 2022-2-11
一、定位
1.1相对定位position: relative;
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留 top:-20px;left: 20px;bottom: -10px;right: 20px;<!DOCTYPE html>
<html lang&qu…
css:overflow-x: overlay对火狐浏览器无效
前面我们使用了overflow-x: overlay设置了滚动天不占位置
css：overlay使滚动条不占据位置_1111111111-CSDN博客_css滚动条不占位置
但是后来发现这个设置对狐火浏览器无效，根本就不显示滚动条了。
解决方案是再加一个overflow: auto设置，保…
媒体查询自适应大小屏幕(更换布局)
大屏幕下： 小屏幕下：（按钮换行）
<div class"search-box"><div class"form-box"><a-form-item label"111" class"fromItemClass"><a-selectref"select&quo…
html+css制作圣诞树
圣诞节到来，看到网上多种多样的圣诞树，作为程序员也想用代码制作一棵圣诞树出来，于是用htmlcss做了一个圣诞树的网页送给朋友
html代码
<!DOCTYPE html>
<html lang"en"><head><meta charset"utf-8&qu…
鼠标悬停在HTML-TABLE的某一行上 改变这一行的背景颜色
主要CSS代码: #table1 tbody tr:hover {background-color: yellow;}
解释: ID为table1的table里的tbody里的tr的hover时,背景颜色改为:yellow 黄色...
主要是: tr:hover{ background-color: yellow; } 这一段... 完整代码:
<style>#table1 tbody tr:hover {backgrou…
前端进阶Html+css10----定位的参照对象（高频面试题）
1.relative的参照对象 1）元素按照标准流进行排布； 2）定位参照对象是元素自己原来的位置，可以通过left、right、top、bottom来进行位置调整；
2.absolute（子绝父相） 1）元素脱离标准流…
BFC盒模型触发条件、布局和使用场景
BFC 的触发条件：
html根元素 <html>float 不为 none绝对定位元素 也就是 position 为 absolute 和 fixed行内快元素 display 为 inline-blockdisplay 为 table-cell inline-block flex inline-flex grid inline-grid table-caption(表格标题)overflow 不为 v…
css的gap设置元素之间的间隔
在felx布局中可以使用gap来设置元素之间的间隔；
.box{width: 800px;height: auto;border: 1px solid green;display: flex;flex-wrap: wrap;gap: 100px;
} .inner{width: 200px;height: 200px;background-color: skyblue;
}
<div class"box"><…
标准盒子模型,与怪异盒子模型详解
目录
简介：
1. 标准盒子模型
2. 怪异盒子模型
3. 标准盒子模型与怪异盒子模型的差异
4. 如何设置盒子模型
5. 怪异盒子模型在实际开发中的应用
6. 总结 简介：
盒子模型是前端开发中的一个基本概念，它定义了Web页面上的每个元素&#…
vue2.0+Vant-ui的日期选择器type
前段时间搞了个公众号，我用的Vant-ui，Vant官方网站，毕竟是有赞团队开发的，项目需求有个地方用到日历，这个组件：
<van-datetime-pickerv-model"currentDate":type"dateType"cancel&…
微信小程序开发实战-第四周
第四周
什么是“剥夺“函数return能力
使用回调函数的方式无法return
点赞数据提交
在page\classic\classic.js中定义onLike函数
onLike: function (event) {console.log(event)let behavior event.detail.behavior}拿到当前like组件的状态
向服务器提交状态数据&#x…
HTML5和css3新特性
css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation) 背景和边框 //背景：background-size：规定背景图片的尺寸（cover：填充；100% 100%…
js防抖(debounce) 和 节流(throttling)
一.防抖(debounce)
1.1 防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。 1.2 防抖的应用场景 用户在输入框中连续输入一串字符时，可以通过防抖策略…
css object-position/object-fit
自己在项目里使用过，这里不过多的总结，解释详细示例，解释。 移步张鑫旭博客object-fit
//值
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { ob…
css :nth-child(n)
1、nth-child(2n)
这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。2、nth-child(2n-1)
这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。3、nth-child(n3)
这个表示选择列表中的标签从第3个开始到最后。4、nth-child(-…
弹性布局justify-content:space-between；最后一行元素宽度不足时左对齐的几种处理方式
弹性布局justify-content:space-between；最后一行元素宽度不足时左对齐的几种方法
1.列数或总数固定不变（添加占位空元素） 想要的效果： 每一页固定十个元素，最后一页数量不足十时，从左到右从上到下依次排列…
一步步做一个Google 网页
一步步做一个Google 网页
做一个Google 图标
其实谷歌很用心的在做每一个Google图标。然而我太懒，搞了个简单的。
h1{
font-size:100px;
color:#5f5f61;
background-color:white;
}
.google {text-align: center;
vertical-align:center;
text-transform:capital…
4-vue实现年入35万第四步学习：vue列表渲染
2020【前端VUE框架】最新最全实战课程，VUE分享免费拿不谢！学习目标：
提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习 重磅来袭：3个月掌握 vue 入门知识到实战学代码。 学习内容…
5-vue实现年入35万第五步学习：vue模板语法
2020【前端VUE框架】最新最全实战课程，VUE分享免费拿不谢！学习目标：
提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习 重磅来袭：3个月掌握 vue 入门知识到实战学代码。 学习内容…
8,vue实现年入35万,vue内联样式核心知识点，进阶打怪。
2020【前端VUE框架】最新最全实战课程，VUE56节分享，免费拿不谢！Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。内容包括Vue.js概述、Vue.js的安装、定义页面、渲视图、路由、发送HTTP请求、表单的绑定和提交、打包、…
第16节，我都知道现在的盖房子都是按模块进行的，那我们搞前端vue开发又是怎样的呢，嘘，小声点别暴露了。
2021【前端VUE框架】vue实现年入35万,16-vue-model与插槽前言
大家好，我是贪吃蛇学院，很高兴认识大家，今天我们来学习进阶第16节：vue-model与插槽的知识点哈。
那么本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其…
Java学习路线，有模有样的，实现高薪的路上从不缺你。
Java教学视频，请大家点击观看，谢谢： Java学习路线，好的学习路线和好的方法，能让我们少走些弯路好了，从今天开始给大家发放福利，祝大家拿高薪快乐，玩妹子快乐，和我一起666…
前端基础 - CSS3新特性
前端基础 - CSS3新特性转换（transform）平移旋转缩放倾斜过渡 (transition)动画 (animation)转换（transform）
平移
2D:transform:translate(X,Y) 3D:transform:translate(X,Y,Z)
旋转
缩放
倾斜
过渡 (transition)
transiti…
前端面试题CSS-两盒子水平垂直居中
让子盒子在父盒子里水平垂直居中
只要回答一个就好了
1.定位
父盒子设置：
position：relative；
子盒子-已知宽高：
position：absolute；top：50%；left：50%；mar…
前端面试题CSS-盒子模型
三种盒子模型
1.标准盒子模型
css对应的属性：box-sizing：content-box
设置的元素大小是内容的大小，不是盒子的大小
盒子的大小 content padding border margin 2.IE盒子模型（怪异盒子模型 ）
css对应的属性&am…
亚像素像素值_你好亚像素世界
亚像素像素值Since IE9 and Firefox(v.?) we now have subpixel rendering of fonts. This is cool and all but imagine this: 从IE9和Firefox(v。？)开始，我们现在有了fonts的亚像素渲染。 这很酷，但所有人都可以想象一下： you …
好用的三维绘图软件CREO用来绘制圆角和倒角
圆角共有四个功能键，分别绘制在四个角上，对尺寸修改以后这个椭圆角的十字虚线会偏斜，用约束里面的水平即可修正。 这个是倒角，与圆角的表现手法类似。
【嵌入式软件实习】找实习和电话面试记录与总结
前言
前一段时间就是非常想找实习，这次是接到了一家还算是比较大的公司的面试通知和实习offer。做一下简单的记录给在找实习的大家一个参考吧。 主要内容为：
三连即可提高学习效率0.0 🧑🏻作者简介：一个学嵌入式的年…
css：overlay使滚动条不占据位置
原始代码：
overflow-x: auto;
原始效果：
滚动条占了高度，位于表格的下方。 改动后的代码：
overflow-x: overlay;
滚动条叠加在表格之上，不过因为滚动条没有设置透明度，所以会遮挡住数据，我…
标题：电商后台管理系统——角色列表
标题：电商后台管理系统——角色列表 A.添加角色列表路由 添加角色列表子组件（power/Roles.vue），并添加对应的规则 B.添加面包屑导航 在Roles.vue中添加面包屑组件展示导航路径
<template><div><!-- 面包屑导航区域…
标题：电商后台管理系统——商品分类
标题：电商后台管理系统——商品分类
A.创建子级路由 创建categories子级路由组件并设置路由规则 B.添加组件基本布局 在Cate.vue组件中添加面包屑导航以及卡片视图中的添加分类按钮
<template><div><h3>商品分类</h3><!-- 面包屑导航 …
标题：电商后台管理系统——登录功能
标题：电商后台管理系统——登录功能
实现登录功能 A.登录状态保持 1.如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态 2.如果客户端和服务器跨域了，建议使用token进行维持登录状态。 涉及知识点：【跨域解决…
锚伪类link、hover、active、visited
锚点伪类
锚点链接的伪类主要针对于我们a标签样式进行设置，下面给出四个标签作用
link标签：未被访问过的链接hover 应用于鼠标悬停到的元素active 应用于被激活的元素visited 应用于被访问过的链接
代码片：
<!DOCTYPE html>
<ht…
active、hover、focus
伪类
active：元素激活时使用方法和用在a标签时相同 例: div.cd : avtive
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"…
css中float用法
float浮动
指将指定元素悬浮于所在整体之上，即将垂直排列的元素转换为水平同行显示平时写出的HTML是具有先后顺序的，对于这个顺序我们称之为标准流而浮动则是脱离标准流的另一个独立标准下面给出float定义：
float:left 左浮动
float:righ…
金字塔效果加css3动画
动画效果实现
六芒星：sum 为 0；animation执行时间为 .1s 螺旋丸：sum 为 0；animation执行时间为 .2s 俯视螺旋桨：sum 为 5~10效果最佳；animation执行时间为 .1s; 保护伞：sum 为 5~10效果最佳&am…
下拉框，单选，多选的数据回显
当输入框（包括下拉框，单选和多选）提交数据之后，前端传到后端，控制器验证数据，不符合回显数据时 ，怎么将之前的下拉框，单选和多选所做的选择一并回显？方法比较多ÿ…
【CSS3】CSS3新特性——3D转换
▊ 透视（perspective）
视距是眼睛到屏幕的距离——近大远小透视写在被观察元素的父盒子上z是物体到屏幕的距离（z可以是负值）通常都是给父盒子加perspective固定视角，然后修改子元素的translateZ
▊ 3D移动ÿ…
css设置宽度与高度比例，实现高度为宽度的百分之多少
自适应网站，因文章内容上传图片宽高比例不统一，列表页调用图片展示不整齐。 css设置宽度与高度比例举例： html
<div class"banner"><div></div>css
.banner{width:100%;padding-bottom:100%;position:relative…
一句话学会用简单css3绘制各种三角形（也可类比梯形）
首先贴出代码，其中border的四个边分别对应四块内容，并将正方形均等分割。
先放总结：取消对位隐两边。
.power-box-connect{width: 0;height: 0;border-top: 60px solid blueviolet;border-left: 60px solid yellowgreen;border-right: 60px…
前端基础复习--20 文字阴影？盒子阴影？mask遮照？倒影？filter:blur()模糊？calc计算？
1. text-shadow: 文字的阴影 x y blur（模糊程度） color 注：阴影的默认颜色是跟文字样色相同 注：通过逗号的方式进行分割，可以设置多阴影
2. box-shadow：盒子阴影是针对容器的 x y …
web前端网页单位、像素、px、rpx、em、rem、vw、vh、vm、%
文章目录 前言背景1、px2、rpx3、em4、rem5、vw6、vh7、vm8、% 前言背景 随着Web的发展，对新的适配解决方案需求也会继续增大，对网页的要求更高。网页设计单位涉及到布局效果，不同的页面布局和设备需要采用不同的单位。而且现在都是要求响应式…
三、动画 -变形transform
目录： 1.变形transform定义 2.具体描述 3.用途 4.练习 一、变形transform定义 变形就是指通过CSS来改变元素的形状或位置
变形不会影响到页面的布局transform 用来设置元素的变形效果设置具体的值用translate()函数 二、具体描述 - 平移：translateX() 沿…
![[100天挑战100个前端效果]第九天---小球滑动效果(完美还原牛顿第一定律！)](https://img-blog.csdnimg.cn/20210328171028533.gif#pic_center)
[100天挑战100个前端效果]第九天---小球滑动效果(完美还原牛顿第一定律！)
小球滑动效果让我们先来看看实现的效果html代码css代码今日份知识总结让我们先来看看实现的效果 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" conten…
![[100天挑战100个前端效果]第十天---漂浮对话框(那一天我看了44次日落)](https://img-blog.csdnimg.cn/20210329095029205.gif#pic_center)
[100天挑战100个前端效果]第十天---漂浮对话框(那一天我看了44次日落)
漂浮对话框先让我们来看看效果html代码css代码今日份知识总结先让我们来看看效果 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge&…
前端基础复习--疑问之等高布局用margin-bottom和padding-bottom的原理
转载自https://www.jianshu.com/p/a75a27e8d1d6
浏览器兼容最好最简便的应该是 padding补偿法。
首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding- bottom的正值相抵消的负值，父容器设置超出隐藏.
这个布局技…
点击一下counter增加1的做法代码
<template><div class"hello">我是哈蜜瓜<h1>{{ msg }}</h1><div click"counter">counter: {{ counter }} </div></div>
</template><script>
export default {name: HelloWorld,props: {msg: Str…
CSS3的新特性---选择器
提示：最重要的放到开头: 新增的CSS3特性是有兼容性问题的, IE9才支持哈 文章目录一、新增属性选择器二、新增结构伪类选择器三、新增伪元素选择器四、新增过渡一、新增属性选择器
１）利用属性选择器可以不用借助 类或ｉ&#x…
居家两个字的代码写法错误版本
<view class"zhanshi"><text class"henglie">居家</text>
</view>.zhanshi {height: 120rpx;background-color: pink;align-items: center;
}.henglie {font-size: 32rpx;text-align: center;}.zhanshi {height: 120rpx;backgrou…
前端基础复习--13pre 与 code ? map 与 area ?embed 与 object ?audio 与 video ？ 文字注解？
1. pre 与 code ? 针对网页中的程序代码的显示效果。两者一起用的 -----markdown是什么？？？？？
2. map 与 area ? ⭐️给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。 …
CSS实现白天/夜晚模式切换
目录 功能介绍
示例
原理
代码
优化
总结 功能介绍 在网页设计和用户体验中，模式切换功能是一种常见的需求。模式切换可以为用户提供不同的界面外观和布局方案，以适应其个人偏好或特定环境。在这篇博客中，我们将探索如何使用纯CSS实现一…
CSS 使背景色透明但是文字颜色不变
在前端开发过程中，要求实现背景色透明度0.1，但是文字颜色要求按给定颜色设置。
如果直接设置背景opacity值为0.1，会使文字的颜色发生改变。 .bkPart {width: 30%;background: rgb(255, 255, 255);opacity: 0.1;border: 1px solid rgb(0, 0, …
js+css实现简单的弹框动画
效果图 只是一个简单的演示demo，但是可以后面可以优化样式啥的 刚开始元素的display为none，然后，为了给元素展示时添加一个动画，首先要添加样式类名show，让它覆盖display:none，变得可见。然后，添…
实现一个底部留白的效果 - 真正不占据空间的属性；
实现一个底部留白的效果 - 真正不占据空间的属性;
当页面的内容不足以撑起一整页时，可用此方法补充留白的区域展示，不会影响其布局，完全自适应，并且兼容性较好 实现的效果如下： 使用absolute与clip进行剪裁实现&…
css:单行/多行文本超出隐藏
单行超出隐藏： overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 250px;//必须设置宽度效果： 多行超出： display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;width: 100px;//必…
javascript（js与css交互）
（1）CSS样式有三种类型：行内样式、内部样式和外部样式
（2）JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。
/*1 行内样式
通过element.style.attr（元素.style.属性…
JavaScript运行环境判断
是否运行在浏览器
var inBrowser typeof window ! undefined;前置条件获取UserAgent var UA inBrowser && window.navigator.userAgent.toLowerCase();是否运行在IE浏览器
var isIE UA && /msie|trident/.test(UA);是否运行在ie9
var isIE9 UA &&am…
微信小程序开发实战-第一周
微信小程序实战
1.开发准备
1.1 特性 全新的小程序开发模式-组件式开发 组件不仅有复用功能，还有很强的代码分离性 flex布局与ES6 良好的小程序开发结 了解项目需求
1.2 小程序开发准备工作
注册微信小程序账号
https://mp.weixin.qq.com/cgi-bin/wx?tok…
CSS学习笔记(五) 过渡与动画
这篇文章，我们将会介绍在 CSS3 中加入的 过渡 与 动画 效果 1、过渡
通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，使得元素在样式转换时添加过渡效果
（1）属性名称
可以使用 transition-property 规定…
CSS 常用样式总结
宽高计算
height:calc（100% - 100px）渐变属性
background: linear-gradient(90deg, #fd6f7d 0%, #f93c47 100%);
box-shadow: 0px 1px 3px 0px rgba(250, 72, 84, 0.5);
CSS 基本知识点梳理
1.介绍下CSS的盒子模型？
通过box-sizing设置 box-sizing:context-box 标准盒子模型：宽度内容的宽度（content） border padding margin box-sizing:border-box 怪异盒模型：宽度内容宽度（contentborderpadd…
CSS 常见的兼容性问题
1.浏览器私有前缀
五大浏览器内核
1.Gecko内核 -moz- 火狐浏览器
2.Webkit -webkit- 谷歌内核 safari 买去
3.Trident -ms- IE内核
4.Presto内核 -o- 只有opera 采用
5.blink内核 -webkit- 谷歌采用标准写法
-moz-animation: ;
-o-animation: ;
-webkit-animation: ;…
CSS中网格布局grid的一些常见属性
作用于父容器
作用于父容器解释取值grid-template-rows占据几行、每行的高像素、fr，用空格分开；repeat()grid-template-columns占据几列，每列的宽像素、fr，用空格分开；repeat()grid-template-areas划分区域grid-templ…
CSS中弹性布局flex的一些常见属性
作用于父容器解释取值flex-direction主轴方向row、row-reverse、column、column-reverseflex-wrap换行nowrap、wrap、wrap-reverseflex-flowflex-direction、flex-wrap的复合写法justify-content主轴的对齐方式flex-start、center、flex-end、space-between、space-around、spa…
2021 新春快乐，万事大吉！
ONES 春节假期通知新春佳节到！感谢大家一直以来对 ONES 的认可与支持，祝大家牛年阖家幸福，万事大吉！根据国务院节假日安排，ONES 将于「2月11日~2月17日」放假。期间我们的值班人员将一如既往为您提供服务：/…
2020 中秋、国庆快乐！
「中秋」与「国庆」相遇，明月之下，山河锦绣，万事圆满！ONES 专注企业级研发管理工具及解决方案，为团队打造高效协作环境，保障项目圆满交付。ONES 中秋礼盒致敬城市中的奋斗者，为团队「充电赋能」…
![CSS：知识技术点[不定时更新]](https://img-blog.csdnimg.cn/de237a00fdb34b0184cfcef57ad59fcd.png)
CSS：知识技术点[不定时更新]
基础用法
1.CSS计算属性
width: calc(50% - 154px); 2.文本（包括单词）强制换行
word-break: break-all;
word-wrap: break-word;3.使用flex布局后，子类不设置宽度，出现数字单词汉字混合的文本的时候，不让子类的文…
浅谈CSS常用属性（2）-z-index属性
目录
1. z-index的作用
2. 使用要求
3. z-index:auto 与 z-index:0 的异同
4. z-index 相同的层叠关系（处于同一平面的定位元素） 1. z-index的作用 CSS，又称层叠样式表，而z-index就是用来设置定位元素的层叠顺序。 2. 使用要求…
获取html元素相对屏幕的位置
1. 写在前面
Javascript 由三部分构成，ECMAScript，DOM和BOM。
ECMAScript(核心) 描述了JS的语法和基本对象
Bom:(browser object model）；浏览器对象模型，提供一些属性和方法可以操作浏览器，浏览器可…
媒体查询神器：掌握 CSS3 变革性技术
媒体查询是 CSS3 中的一项重要功能，它使得我们可以针对不同设备和屏幕尺寸应用不同的样式。本文将深入介绍媒体查询的使用方法，以及如何利用媒体查询优化响应式设计。 什么是媒体查询？
媒体查询是 CSS3 的一项新特性，允许我们根据…
css常见定位、居中方案_css定位居中
一、 定位分类
1、静态定位
position:static;（默认，具备标准流条件）
2、相对定位
position:relative;
通过 top 或者 bottom 来设置 Y 轴位置
通过 left 或者 right 来设置 X 轴位置
特点：
相对定位不会脱离文档流相对于自…
一文学会 6 种移动端 1px 问题解决方案(完整版)
前言在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。本文默认你已经对视口、物理像素、逻辑像素、设备像…
CSS:文字渐变色/文字任意方向渐变色/图片纹理文字等效果
直接上代码： 纵向渐变文字： <p class"tt">嗷嗷嗷嗷嗷</p>/******************************************/<style>.tt{background-image: linear-gradient(red,green);//背景色渐变，默认从上到下-webkit-backgroun…
你在休息，钱在工作_富爸爸_新浪博客
▲三项炼金术—-理财学习理论篇！ 如何将300元变成100万元呢？这个看似“白日做梦”的想法，通过投资理财你完全可以实现。 我们耳熟能详的亿万富翁，无一不是精明的投资家，如股神巴菲特、金融炼金师索罗斯等，不…
CSS复学 -＞（个人学习记录笔记）
文章目录CSSCSS：页面美化和布局控制1. 概念： Cascading Style Sheets 层叠样式表2. 好处：3. CSS的使用：CSS与html结合方式1. 内联样式2. 内部样式3. 外部样式注意：4. css语法：5. 选择器：筛选具有…
3分钟入门：Flex 布局
flex 布局原理
全称 flexible box，弹性布局。
如何开启：为元素添加 display: flex。
开启 flex 布局的元素，称为 flex 容器（flex container），其子元素成为容器成员，称为 flex 项目。
flex 布…
Ae 入门系列之一：软件界面与工作流程
Adobe After Efftects（简称为 Ae ）可以帮助用户高效且精确地创建无数引人注目的动态图形和震撼人心的视觉效果。利用与其他 Adobe 软件紧密集成和高度灵活的二维和三维合成，并且提供数百种预设的效果和动画，可为影视特效、产品广告…
css 颜色渐变线条 中间向两边 中间粗两边细
css 颜色渐变线条 中间向两边 中间粗两边细 参考： https://segmentfault.com/q/1010000006961164 <div class"hr-line-div"></div>.hr-line-div{margin:0 auto;height: 1rem;width: 20rem;background: radial-gradient(red 24%, white 100%);…
CSS---常见布局技巧
1. margin负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. CSS三角强化 1. margin负值运用 经过边框盒子变色: 例子:
标签:hover {
border: 1px solid 颜色;
} 2. 文字围绕浮动元素巧妙运用
利用浮动元素不会压住文字的特性
首先 准备一个大盒子 里面拥有文字 …
vue2知识点：Vue封装的过度与动画
文章目录3.25Vue封装的过度与动画3.25.1知识点总结3.25.2案例本人其他相关文章链接3.25Vue封装的过度与动画
3.25.1知识点总结 3.25.2案例 注意点1：最好有css动画基础，再练习这块，但我只是了解所以原封不动拷贝看效果就是，当了解…
逻辑(css3)_强制不换行
需求 如上图做一个跑马灯数据，时间、地点、姓名、提示文本字数都不是固定的。
逻辑思想
个人想法是给四个文本均设置宽度，不然会出现不能左对齐的现象。
此时四个文本均左对齐， 垂直排列样式也比较好看，但是出现一个缺点&#…
18.神奇导航菜单指示器
效果 源码
<!DOCTYPE html>
<html>
<head>
<title>Magic Menu Indicator | 03</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><div class="navig…
两种风格的纯CSS3加载动画
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>加载动画</title><style>.loader {w…
css3的text（文本）
以下是一些使用 CSS3 文本样式属性的示例，以演示如何自定义文本的外观。你可以根据需要自行调整这些示例的值和属性： 改变字体 p { font-family: "Arial", sans-serif; } 这将改变段落文本的字体为 Arial。 字体大小和颜色: h1 { font-size: …
CSS3表格和表单样式
在传统网页中，表格主要用于网页布局，因此也成为网页编辑的主要工具；在标准化网页设计中，表格的主要功能是显示数据，也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果，如表格和表单的…
教你零基础制作3D盒子相册（送给那个她~）
3D立体相册？ 是的，相信大家或多或少的会在一些地方看到某些程序员用代码给自己女朋友写3D立体相册，那么你会不会也想自己手动敲出那些炫酷的代码呢？ 那你是找对地方了。废话不多说，今天为大家分享利用html实现…
filter: blur() 高斯模糊效果
比较喜欢的效果实例：<div class"lbg"><img src"../../assets/01.jpg" class"test-img"></div>.lbg{/* 设置相对定位 */position: relative;/* 宽度120%，-10%让元素集中 */left: -10%;/* 为了实现椭圆效…
“深入理解事件处理器、表单综合案例和组件通信“
目录 引言1. Vue的事件处理器2. Vue的表单综合案例3. Vue的组件通信总结 引言
Vue.js是一款流行的JavaScript框架，广泛应用于现代Web开发中。在Vue的世界里，事件处理器、表单综合案例和组件通信是三个重要的主题。本文将深入探讨这些主题，并…
小方块万能居中方法(任何分辨率下都能居中)
不说废话直接看代码都是干货
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wi…
CSS3 文字边框 -webkit-text-stroke 镂空的字体制作
CSS边框的一个不足就是只有矩形的元素才能使用。
-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。
而且，配合使用color: transparent属性，还可以创建镂空的字体！
-webkit-text-fill-co…
H5 CSS3 实现文字图片同行居中
H5页面上常用到用户信息栏，用户头像和用户名称同行显示，一般图片高度会比文字高很多。这时候需要文字在整行中居中显示。查了网上的很多方法，都是不靠谱的。比如：设置div的line-height和height相同高度等。 这里实际使用了下述方法…
31.带图标的动画导航菜单
效果 (源码网盘地址在最后) 关注公众号《大迁世界》，查看更多视频教程！
源码
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-w…
29.无穷大动画特效
效果 (源码网盘地址在最后) 关注公众号《大迁世界》，查看更多视频教程！
源码
index.html
<!doctype html>
<html>
<head><meta charset="utf-8"><title>CSS Infinity Dots Animation Effects</title><link rel="st…
![[100天挑战100个前端效果]第十五天---3d堆叠图片UI布局特效(深夜打开,图片效果超级加倍！)](https://img-blog.csdnimg.cn/20210407092532362.gif#pic_center)
[100天挑战100个前端效果]第十五天---3d堆叠图片UI布局特效(深夜打开,图片效果超级加倍！)
3d堆叠图片UI布局特效让我们先来看看实现的效果html代码css代码今日的知识总结和设计分析让我们先来看看实现的效果 html代码
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" co…
![[100天挑战100个前端效果]第十七天---橡皮筋弹跳动画(支棱起来了！~)](https://img-blog.csdnimg.cn/20210410105532431.gif#pic_center)
[100天挑战100个前端效果]第十七天---橡皮筋弹跳动画(支棱起来了！~)
橡皮经弹跳动画让我们先来看看实现的效果html代码css代码今日份的知识总结让我们先来看看实现的效果 html代码
<!DOCTYPE html>
<html lang"zh-Hans">
<head><meta charset"UTF-8"><meta name"viewport" content&qu…
![[100天挑战100个前端效果]第十八天---动态搜索框](https://img-blog.csdnimg.cn/20210412091417470.gif#pic_center)
[100天挑战100个前端效果]第十八天---动态搜索框
动态搜索框先让我们来看看实现的效果html代码css代码今日份知识总结先让我们来看看实现的效果 html代码
<!DOCTYPE html>
<html lang"zh-Hans"><head><meta charset"UTF-8"><meta name"viewport" content"widt…
css3中的content字符编码
content有5中属性
content:""; // 为空
content:attr(title); // 可以获取标签属性值 也可以获取自定义属性值 比如 css是 div:after{content:attr(gaga)}则可以获取到了123
content:"我是谁"; // 填写字符串比如
// css是div:after{content:"我是…
每天10个前端小知识 【Day 14】
前端面试基础知识题
1. CSSOM树和DOM树是同时解析的吗？
浏览器会下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM…
es6之前继承如何实现
es6 之前并没有给我们提供extends 继承。我们可以通过 构造函数原型对象模拟实现继承，被称为组合继承
1. call（）
调用这个函数，并且修改函数运行时的 this指向
fun.call（thisArg，arg1，arg2&a…
CSS3 position sticky固定定位失败的原因
CSS3 position sticky固定定位失败的原因
正确的写法： <div class"sticky">position: sticky; 基于用户的滚动位置来定位</div>错误的写法：
<p class"sticky">position: sticky; 基于用户的滚动位置来定位</…
web前端开发基础入门html5+css3+js学习笔记（一）
目录 1.第一个前端程序2.前端工具的选择与安装3.VSCode开发者工具快捷键4.HTML5简介与基础骨架4.1 HTML5的DOCTYPE声明4.2 HTML5基本骨架4.2.1 html标签4.2.2 head标签4.2.3 body标签4.2.4 title标签4.2.5 meta标签 5.标签之标题5.1 快捷键5.1 标题标签位置摆放 6.标签之段落、…
flex布局采坑记录
文章目录1、父元素display:flex布局下的子元素宽度无效1、父元素display:flex布局下的子元素宽度无效
因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多…
Node 第三方模块 Joi
JavaScript对象的规则描述语言和验证器 上面是旧版的用法，现在已经升级了，新版的用法如下： 博客中验证的代码：
html 模拟携程网首页
目录目录架构css/index.css/index.htmljs/index.jscss/normalize.css目录架构 css/index.css
font-face {font-family: icomoon;src: url(../fonts/icomoon.eot?8ahhy7);src: url(../fonts/icomoon.eot?8ahhy7#iefix) format(embedded-opentype),url(../fonts/icomoon.ttf?…
display: flex 在同一行的表示
.item {border-bottom: 1px solid #EAEAEA;height: 108.69565217391305rpx;display: flex;align-items: center;
}
onmouseenter与mouseover的区别
// mouseenter 和 mouseover的区别var box1 document.getElementById(box1);var i 0;// 触发子元素的mouseover，会冒泡到父元素上// box1.onmouseover function () {// i;// console.log(i);// }// // 此事件不触发事件冒泡box1.onmouseenter function () …
CSS3 多媒体查询、网格布局
一、CSS3多媒体查询：
CSS3 多媒体查询继承了CSS2多媒体类型的所有思想，取代了查找设备的类型。CSS3根据设置自适应显示。
多媒体查询语法：
media not|only mediatype and (expressions)
{
CSS 代码...; }
not: not是用来排除掉某些特定…
h5手机端如何快速的兼容富文本内容
最近客户需要修改一个手机端合同签约样子，但是他们的合同内容是后端加载过来的，为了保留他们原有的功能，尽可能的让手机端的样子和PC端一致，我使用了css中的transform属性，因为他们合同的正常显示的宽度大概是900px&am…
说说em/px/rem/vh/vw的区别?
一，相关介绍
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性
从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、…
CSS 选择器-认识并应用选择器
CSS选择器是用来定位HTML或XML文档中的元素的模式。以下是一些常见的CSS选择器，以及对应的样例代码：
标签选择器：选择所有指定标签的元素。
示例代码：
p {font-size: 16px;
}类选择器：选择所有指定类名的元素。
示…
元素见缝插针等常见问题总结
元素见缝插针问题：
元素都给浮动后，排列多行时，给了hover:margin-top:-10px;
则一行中最后一个元素触发hover时会导致本该排列在第二行的第一个元素见缝插针挤在第一行最后一个元素下的一点10px空间
原因：
位置空出࿰…
高度塌陷问题以及BFC
高度塌陷产生的条件：
1、父元素不设高；
2、所有子元素浮动
由于子元素浮动脱离文档流，父元素高度变为0；会影响其他元素布局
解决方法；
1、给父元素添加overflow:hidden属性；（BFC原理&#…
CSS3.0（过渡、动画、弹性盒、响应式）总结（2）
过渡属性
transition:属性 时间 延迟时间 效果
property duration delay timing-function
过渡属性谁变给谁加，使用复合写法只需要写时间即可生效，属性默认是all 动画属性
定义动画：
keyframs 动画名｛from{} 50%{} to{}&…
CSS3常用的新功能总结
CSS3常用的新功能包括圆角、阴渐变、2D变换、3D旋转、动画、viewpor和媒体查询。
圆角、阴影
border-redius
对一个元素实现圆角效果，是通过border-redius完成的。属性为两种方式：
一个属性值，表示设置所有四个角的半径为相同值ÿ…
如何批量制作九宫格效果的视频
如何批量制作九宫格效果的视频，首先我们在手机上安装应用程序“王者剪辑app”，启动软件并进入一键剪辑中的“特效应用”功能，
批量导入或导入一个视频，接着选择“九宫窗景视角”效果类型，
然后点击界面右上角的对勾…
微信小程序搜索框的代码写法
<view><view class"search"><image class"search_img" src"../image/icon/search.png"></image><input placeholder"搜索,发现更多好物"></input></view>
</view>.search {margin: 2…
【开发小技巧】用HTML与CSS如何创建悬停折角纸叠效果？
折角折叠效果，在网站实际运用中也是非常多，当你将鼠标悬停在上面时，就会在某些网站上看到它的折角。在这里，我们仅用HTML与CSS来实现折角效果。 以下内容将具体讲解如何创建这个效果。在本文中，我们将文章分为两部分&a…
使用HTML制作简单的搜索功能（可实现百度搜索）
实现代码：
<!DOCTYPE html>
<html><head><meta charset"utf-8"><title></title><style type"text/css">form .text {display: inline-block;border: 0;width: 260px;height: 35px;font-size: 14px;…
HTML5+CSS3小实例：悬停放大图片的旅游画廊
实例：悬停放大图片的旅游画廊
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=&…
clip-path图片裁剪
CSS clip-path 属性 属性定义及使用说明 clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
CSS3 剪贴路径（Clip-path）在线生成器 | 踏得网 语法：clip: clip-source|basi…
html-网站菜单-点击显示导航栏
一、效果图
1.点击显示菜单栏，点击x号关闭； 2.点击一级菜单，展开显示二级，并且加号变为减号； 3.点击其他一级导航，自动收起展开的导航。 二、代码实现
<!DOCTYPE html>
<html><head>&…
JavaWeb-CSS
一、什么是CSS
CSS（Cascading Style Sheets，层叠样式表）能够对网页中元素的位置排版进行精确的控制，拥有对网页对象和模型样式的编辑能力，简单来说就是页面美化。 CSS样式代码中的注释需要使用/**/。
二、CSS的引入方…
h5和css3新特性
一、HTML5 的新特性
1.新增语义化标签
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 **IE9 以上版本的浏览器**才支持，如果不考虑兼容性问题，可…
前端学习（14）解决父级边框塌陷的问题
clear
clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动的元素
clear:none; 解决方案：
增加父级元素的高度
#father{border:1px #000 solid;height:800px;
}增加一个空的div标签，清除浮动
<div…
前端小tip（1）：使用css将图片遮罩并在遮罩上显示内容，并添加动画缓入
效果图 如图，当鼠标悬浮在图片上时，显示遮罩并展示具体内容 全部代码
<!DOCTYPE html>
<html lang"zh-cn"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEe…
七、CSS3新特性一
文章目录一、CSS3的概念和优势二、渐进增强和优雅降级三、CSS3选择器3.1 属性选择器3.2 结构伪类选择器3.3 其他伪类选择器四、css3属性前缀五、CSS3字体模块六、字体图标七、文本阴影八、盒子阴影一、CSS3的概念和优势
css3是css技术的升级版本，css3语言开发是朝着…
el-checkbox 对勾颜色调整
对勾默认是白色 改的时候一直在试着改color人，其实不对。我用的是element ui 的复选框
/* 对勾颜色调整 */
.el-checkbox__inner::after{/* 是改这里的颜色 */border: 2px solid #1F7DFD; border-left: 0;border-top: 0;}
DIY可视化支持动画效果animate.css生成uniapp源码
Animate.css是一款有趣的、跨浏览器的、简单高效的css3库，里面封装了若干种简单的常见动画，适合快速使用，同时也方便进行按需修改。 DIY可视化通过界面快速集成动画库，方便大家选择。DIY可视化支持动画效果animate.css生成uniapp源…
css布局两边固定中间自适应
原文链接：css布局两边固定中间自适应的五种方法
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…
网络视频的防盗与破解
网络视频（Web 视频）是指利用 HTML5 技术在浏览器中播放的视频，这类视频资源通常可以被随意下载，某些行业（比如教培行业）如果希望保护自己的视频资源不被下载，就需要对视频做防盗链处理。
防盗链需要着重加强两个方面的安全性：网络传输和客户端。
网络传输安全
网络传…
【前端】3.总结一下前端css样式规范
总结一下前端css样式规范前端样式CSS 规范分类的命名方法统一语义理解和命名模块（.m-）、元件（.u-）功能（.f-）皮肤（.s-）状态（.z-）sass 规范当前选择器的样式属性…
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型
（1）网页标签分类：
行内元素：块级元素：有宽高，可以设置大小，同时不会让其他块元素默认占据当前行
（2）内边距： 内容和边线之间存在空白区域&#x…
CSS优先级CSS盒子模型
1、CSS继承
文字相关的样式可以被继承【作用在父元素上面，子元素可以继承】布局相关的样式不可以被继承【可以通过inherit值进行继承】
2、CSS优先级
书写了相同样式时，后写的样式优先级较高当内部样式和外部样式有相同的样式时，后写的样式…
一个模板化C++队列类的代码
下面代码是关于一个模板化C队列类的代码。
#include #include #define default_value 16 using namespace std;
template< class T > class Queue { public: {delete [] values;} bool enQueue( T ); T deQueue(); bool isEmpty(); bool isFull(); private: int size; …
如何批量制作动态旋转视频效果
如何批量制作动态旋转视频效果，首先我们在手机上安装应用程序“王者剪辑app”，启动软件并进入一键剪辑中的“特效应用”功能，
批量导入或导入一个视频，
接着选择“太极选择”或“扭转乾坤”效果类型，然后点击界面右…
CSS基础：盒子模型和浮动
盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装HTML元素。
它包括：外边距（margin），边框（bord…
【基础篇】一文掌握css的盒子模型(margin、padding)
1、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素…
css3横向无限公告消息滚动功能
html部分 {{item}}css部分 .boxingeds{ display: flex; flex-wrap: wrap; width: 150%; position: relative; left: 1000rpx; padding: 30rpx 0; position: absolute; top: 23%; z-index: 2; -webkit-animation: myfirst 30s linear 2s infinite; .textname{ display: inlin…
js调整已有元素位置（顺序）
$(content).prependTo(selector)
content为要插入的内容（可包含 HTML 标签）
比如：
<div class"list"><div class"r1">1</div><div class"r2">2</div><div class"r3&…
JS----轮播图案例
轮播图案例
分析：
点击左右箭头 滑动轮播图鼠标不在轮播图内时 每隔2秒自动滑动轮播图鼠标移入时 停止自动滑动轮播图点击小圆圈 显示对应的轮播图
鼠标移入、移出显示或隐藏左右箭头： // 获取左右箭头的元素let arrow_l this.document.querySelecto…
这么简单的 CSS 动效，快来瞧瞧
前言
这几天逛网站浏览网页的时候，看到一个不错的CSS效果，便想来实现一下。整个效果实现起来比较简单，但是并不缺少交互感，因此来分享一下这个CSS效果。
效果展示 HTML 搭建
HTML部分一如既往地简单，认清楚它的布局…
【JavaWeb】CSS基础知识：引入方式 + 选择器
CSS引入
CSS的引入有三种，三种的优缺点各不相同。
行内样式表 <!-- 行内样式表 --><!-- 相当于标签的一个属性 --><!-- 只对当前标签生效 --><!-- 优先级较高，会覆盖其他样式 --><p style"color: blue;">这是…
css使用伪元素时遇到的层级问题
css使用伪元素时遇到的层级问题
有时使用伪元素就会出现伪元素影响了元素内部的布局结构；这时可以给被影响元素加上 transform-style: preserve-3d;，伪元素加上 transform: translateZ(-1px); // Z轴方向位移-1px 这样就可以了，代码如下 <…
重排、重绘--性能优化问题
重绘：某些元素的外观被改变，例如：元素的填充颜色重排（回流）：重新生成布局，重新排列元素。减少重排、重绘优化性能，其中减少重排尤为重要。重新绘制受到此次重排影响的部分࿰…
CSS 解决 transition 过度效果宽高缩放，子元素无效(小技巧)
被设置过度动画的元素可设置
overflow: hidden;
但这也有局限性
1、元素不能有 border 边框，否则高宽为0，但border依然存在。可以在为0时，设置 border:none ；
2、只能在元素内部设置 overflow: auto 或其它值；
px-%-em-rem-vw-vh有什么区别？
px-%-em-rem-vw-vh有什么区别？1.背景介绍px 和 %em 和 remvw / vh3.常见问题1.背景介绍
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从…
【CSS】多个图片在同一行显示
⭐请看下面的代码，可以使多个图片在同一行展示
核心代码
display: flex; /*就是可以把多个图片放在一行展示，发不下的话再换行*/
🏳️🌈🏳️🌈🏳️🌈🏳️&…
CSS高级----动画
过渡 使用过渡就是为了让过程不那么僵硬，过程更 “ 滑~ ” 一点
语法：
transition: 属性 时间(秒[s] 或者 毫秒[ms]为单位);演示：
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"&…
CSS高级----转换
2D转换 平移转换
语法：
/* X轴正向为右，Y轴正向为下 */
transform: translate(水平移动距离, 垂直移动距离);translate()如果只给出一个值, 表示x轴方向移动距离 单独设置某个方向的移动距离:translateX() & translateY() 用于未知元素宽高水平垂…
记录-做一个文件拖动到文件夹的效果
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 在我的电脑中，回想一下我们想要把一个文件拖动到另一个文件夹是什么样子的呢 1:鼠标抓起文件 2:拖动文件到文件夹上方 3:文件夹高亮，表示到达指定位置 4:松开鼠标将文件夹放入文…
【前端】3.CSS基础知识
系列文章链接 1.背景知识与学习路线 2.HTML基础知识 3.CSS基础知识 4.JavaScript基础知识 文章目录 1. 基本概念1.1 CSS 定义1.2 CSS 用途1.3 CSS 支持的属性举例 2. CSS 基础语法2.1 demo2.2 选择器2.3 CSS创建2.3.1 外部样式表2.3.2 内部样式表2.3.3 内联样式 3. 总结3.1 CSS…
移动端1px像素问题
1px 问题
border-image 需要单独准备图片，而且圆角不是很好处理，但是可以应对大部分场景。 基于 media查询判断不同的设备像素比给定不同的 border-image：
.border_1px {border-bottom: 1px solid #000;
}
media only screen and (-webkit-…
css布局——flex布局知识点总结
文章目录 学习网址推荐align-items、justify-content合并使用左右分布和垂直end flex-directionrowrow-reversecolumncolumn-reserse横向逆转并水平start垂直列并从末尾排列逆向垂直列并左右排列水平居中，垂直end，横向逆向 order、align-selforder改变排…
css中的grid高频布局
1.需求
1.一个父级容器内有n个子元素; 2.每个子元素最小宽度是100px； 3.每个子元素最大宽度根据屏幕宽度自适应； 4.每个子元素的宽度保持同宽； 5.每个元素之间有间隔，每一行的两边不留间隙，每一列的上下不留间隙&…
css中flex布局的一些基本属性
flex最基本的是有主轴和坐标轴两个轴： 下面是如何控制下级盒子在主轴和交叉轴位置的属性：
flex-direction（弹性方向，控制主轴的方向）:row(主轴横向行)，column（主轴纵向列）
justify…
面试：CSS让一个元素水平垂直居中
水平居中 对于 行内元素 : text-align: center; 对于确定宽度的块级元素： （1）width和margin实现。margin: 0 auto; （2）绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative 对…
css :nth-child(an + b) 的坑
css 的 nth-child 已经不是什么新概念了 作用就是匹配其父元素的"某个"子元素 注: 第一个子元素的序号为 1
其实它还可以匹配"某些"子元素, 如:
:nth-child(odd) { /* 序号为奇数的子元素 */ }
:nth-child(even) { /* 序号为偶数的子元素 */ }再拓展一下…
引入OrbitControls.js：Uncaught TypeError: THREE.Spherical is not a constructor
在学习three.js鼠标操作事件时，引入OrbitControls.js后却发生错误，经过尝试后发现是引入的OrbitControls.js和three.js版本不匹配导致的。 问题： 初始化OrbitControls时控制台报错Uncaught TypeError: THREE.Spherical is not a constructor …
css常用的样式属性
CSS（层叠样式表）是用于网页排版的标记语言， 利用 CSS 可以控制网页中各个元素的布局、颜色、字体、边框等各种样式，下面是一些常用的 CSS 样式属性：
background-color：设置背景颜色color：设置文…
狂神说Java CSS3讲解综合代码
狂神说Java CSS3讲解综合代码
<!DOCTYPE html>
<html lang"en" xmlns"http://www.w3.org/1999/html">
<head><meta charset"UTF-8"><title>狂神说CSS3学习总结</title><!-- css样式生效的优先级是&a…
HTML5、CSS3和JavaScript的基础知识以及从入门到精通的学习路径
摘要： HTML5、CSS3和JavaScript是现代Web开发的核心技术，掌握它们对于想要从事Web开发的人来说至关重要。本文将介绍HTML5、CSS3和JavaScript的基础知识以及从入门到精通的学习路径。通过深入理解这三种技术的特性和用法，并结合实践项目&…
CSS设计指南 笔记3
CSS设计指南 笔记3
3 定位元素
盒模型：浏览器为页面中的每个HTML元素生成的矩形盒子，都要按照可见版式模型（visual formatting model）在页面上排布
可见页面版式的三个属性控制：position、display、float
position…
css 选择器有哪些？优先级？哪些属性可以继承？
简版
css 选择器非常多,可以分为基础选择器 复合选择器,伪类选择器;伪元素选择器基础选择器: id 选择器 ，class 类选择器，标签选择器，复合选择器: 后代选择器，子代选择器，并集选择器,交集选择器
一、选择器
CSS 选择…
你有一份礼品请查收！(点开拿奖)→
恭喜以上名单获奖作者，快来抱走你的 Cocos 周边礼品吧！扫描下方二维码，领取礼品！Cocos Store 挑战赛第二期即将启动！伙伴们请尽情发挥自己的聪明才智，将作品朝我们砸过来吧！源码分区指定主题端午…
swiper、vant组件的基本使用方式以及$nextTick()的使用
swiper swiper是轮播图插件
swiper的安装 npm i swiper5.4.5 --save ps：(生产依赖是要放在服务器上的)
swiper官网Swiper演示 - Swiper中文网收录了Swiper的40多个在线示例（swiper demos），Swiper是纯javascript打造的滑动特效插…
一个好看美观的登录注册界面的实现
序言：之前介绍那个博客，然后自己搞了这个界面。最近有人和我要，把代码给大家贴出来，提供参考。 首先是这个界面哈
<!DOCTYPE html>
<html lang"en">
<head><script src"../static/lib/jquer…
翻转卡片动画｜CSDN创作打卡
1. 翻转卡片动画页面效果 2. 设计思路
HTML 标签选择： 使用一个 <div></div> 标签为父级盒子，其内嵌套了两个 <div></div> 标签，分别为卡片的正面和背面，卡片上的内容被放置在 <p></p> 标签…
JS高级----面向对象
面向对象 面向对象是一种编程思想。 主要是把事物给对象化，包括其属性和行为。总体来说面向对象的底层还是面向过程，面向过程抽象成类，然后封装，方便使用就是面向对象。 构造函数： 构造函数是专门用于创建对象的函数&a…
弹窗背景图设置，关闭按钮
弹窗
<divv-show"BackImg"class"BackgroundImg"
><imgclass"closeImg"src"../../../../assets/close.png"click"()>{ BackImg BackImg?false:true }">//右上角x号<div><span class"texttit…
js实现弹幕(分辨率问题已解决部分)
目前代码还是有一些bug，主要是调整浏览器大小的时候会出现文字运动停顿等问题，后续有时间在解决，不同文字长度速度不同而产生的文字堆叠问题已经解决，原理就是追击原理，代码如下，看效果可以直接拷贝到vscod…
vue实例化发生了什么？从生命周期函数角度
vue实例化发生了什么？
本文将从生命周期钩子函数角度出发，介绍vue实例化过程中发生的那些事儿…
const app new Vue({el:"#app,data:{message:hello,lifePeriod},methods:{init(){console.log(这是一个方法!)}}
})vue实例化类似于创建一个对象,里…
父子组件生命周期顺序
父子组件生命周期顺序
1.渲染：（同步引入（顺序同上）父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted （异步引…
标题：电商后台管理系统——权限列表
标题：电商后台管理系统——权限列表 A.添加权限列表路由 创建权限管理组件（Rights.vue），并在router.js添加对应的路由规则//主页中已完成 B.添加面包屑导航
<template>
<div><!-- 面包屑导航区域 el-breadcrumb--…
网页设计与制作的期末复习-css部分
1.CSS层叠样式表 注释：/* */2.继承 继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。
<html><head><title>CSS的继承性…
基于uni-app小程序轮播图中间变大切换手机震动效果
酸狗先带你看下效果图： 直接看代码：
WXML：
<template><view><view class""><!-- 背景附加高斯模糊 --><image :src"gbImage" mode"widthFix" class"GaussianBlur"&g…
视觉特效·AI视频抠图·换脸
好学的ace我最近在学习blender里的VFX，秀下我的学习成果~~视觉特效 Visual effects, 简称VFX合成真人拍摄的镜头和计算机生成图像，以创造虚拟的真实场景。绿幕 影视剧拍摄技术VFX的素材最常用的是绿幕视频。通过拍摄实景绿幕，然后通过把绿幕视…
拼图·面部表情捕捉 | design-ai-lab
今天在翻看次世文化的作品时，发现这张图还蛮有意思的，又让我想起了前阵子在弄的漫画生成。shadow无界引用我超喜欢程序猿的一句diss用语： Talk is cheap , show me the code我抽空把拼图插件进行了更新，重新实现了布局引擎&…
flex: 0 0 100%；
flex: 0 0 100%;
flex: 0 0 100%; 是一个用于设置flex项的flex-grow、flex-shrink和flex-basis属性的缩写flex-grow：指定了flex项在剩余空间中的放大比例，默认为0，表示不放大。在这个例子中，设置为0表示不允许flex项在水平方向上…
这个 CSS 属性冷门但贼好用
大家好，我是恺哥。这个系列以后每次会介绍一个冷门但贼好用的 CSS 属性。对于数字来说，每个数字的宽度都不一定是相等的。比如说对于 1 和 2 来说，从 1 变成 2 的时候宽度一定会发生变化。如果此时周围有元素的话，就会造成元素位置…
Tue Aug 11 2020 11:34:00 GMT+0800 (中国标准时间)进行显示格式化
把标准时间用new Date声明一下，然后用原生拼接就可以了。 代码如下： const value new Date();getYear value.getFullYear() - (value.getMonth() 1) - value.getDate() value.getHours() : value.getMinutes() : value.getSeconds(); 今天…
HTML5 学习笔记（九）--- CSS3补充
一、UI伪类选择器
名称作用E:focus当E元素获得焦点时的样式，通常用于文本框元素。E:enabled当E元素处于可用状态时的样式。E:disabled当E元素处于不可用状态时的样式。E:checked当E元素被选中时的样式，适用于单选框或多选框。E::selection当E元素处于被…
阿里矢量图标库 - Font class 方式使用说明
目录
一、下载
二、引入
方式一
方式二
方式三
三、使用
效果 1
效果 2
效果 3
效果 4
效果 5
效果 6
效果 7
四、iconfont 冲突 一、下载
官网：iconfont-阿里巴巴矢量图标库
1、先登录，将所需图标添加到购物车。 2、选择“下载代码”。…
#vue# @click=“”实现点击切换不同的图片
一、需求：
鼠标点击图片时，显示另一张图片，再次点击，显示原来的图片
二、效果：
原先的图片： 点击以后，切换另外一张图片： 再次点击，换为之前的图片： 三、步…
css计量单位_CSS中的度量单位
css计量单位CSS | 测量单位 (CSS | Measurement Units) The distance measurement in CSS is a number immediately followed by a length unit. CSS supports several length measurement units. They are, CSS中的距离测量是一个数字，紧跟一个长度单位。 CSS支持多…
HTML5学习笔记三
HTML5学习笔记三
一、3D转换
特点：近大远小 遮挡不可见
三维坐标系： x轴----向右是正值 向左是负值； y轴----向下是正值，上面是负值； z轴----向屏幕外是正值，向里面是负值。
最常用到的功能是ÿ…
CSS3——元素选择器
一 新增属性选择器attvalattvalattval 二 伪类选择器和伪元素选择器伪类选择器linkvisited hoveractive 伪元素选择器first-linefirst-letterbeforeafter 三 结构性伪类选择器rootnotemptytarget UI元素伪类选择器enableddisabledchecked 一、 新增属性选择器： …
开发网页表白ZR，技术人是怎么做的
开发网页给女朋友表白，技术人是怎么做的 文章目录开发网页给女朋友表白，技术人是怎么做的确定布局导航栏设计侧面导航栏设计主体部分设计插入视频图卡片堆积布局细节添加图片若隐若现效果图片pop说明图像模型的构建背景音乐细碎功能完整代码【无素材】流…
CSS transition巧妙运用实现动态列表的效果
CSS实现动态列表的效果效果展示要求思路分析猜想猜想出错解决办法代码HTML代码CSS代码效果展示 要求
现要求使用CSS实现如下的页面效果：
列表初始状态仅显示第一个条目内容；鼠标移动到列表区域后将自动展开内部条目；鼠标移出该区域后&#…
wxss文件关键字汇总（持续更新）
文本和文字样式设置 设置文本或字体的属性需要使用到wxss，与css有所不同。我们利用class和style来进行设置。 text-decoration: overline;
/*下划线underline */text-decoration-color: chartreuse;
/*下划线颜色*/line-height: 30px;
/*行间距*/white-space: normal;…
css样式常用知识整理
CSS 速查fontCSS 外边距 —— 围绕在元素边框的空白区域# linear-gradient() ——创建一个线性渐变的 "图像"# transform ——旋转 元素# rotate() [旋转]# 边框 (border) —— 围绕元素内…
在不断实验中寻找可能 | 伊藤穰一与他的自然人工智能
伊藤穰一，是世界最顶级跨学科实验室MIT Media LAB的前主任。《时代》周刊曾这样描述他：“退学三次，无学位，做过DJ，喜爱游戏魔兽世界。”YES! MIT Media LAB的前总监：三次辍学、没高学历，但有着创…
新时代创意布局不完全指南
依稀记得，某年广东语文高考作文的相关描述 -- “有时，常识虽易知而难行，有时，常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。CSS 更新之快，只能不断鞭策自己持续学习，一直呆在…
【vue】- 简易版筛选组件可展开/收起
仅做记录，未整理格式 css部分未完全，每个筛选条件为固定宽度
实现效果
单行筛选条件时不触发更多按钮，且做占位处理 多行筛选条件时默认收起 同时设定最大/最小宽度并监听该组件宽度变化
filter.vue组件
<template><div :cla…
前端面试题CSS-经典布局
CSS经典布局有：圣杯布局，双飞翼布局（左右固定中间自适应）
圣杯布局
结构是一体的,中间部分在最前面
<div class"container"><div class"center"></div><div class"left"&g…
vue2.x源码 数据驱动视图
数据驱动视图版本从生命周期入手Watcher整体流程版本
Vue.js v2.6.14
从生命周期入手 created生命周期执行完之后执行vm.$mount
先执行beforeMountupdateComponent更新组件接口vm._update执行diff算法vm._render()执行组件render方法，在编译阶段把组件中的templ…
第22节，socket初识和安装(2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习)
本节讲解的内容是：socket初识和安装。请看下面的视频课程 2021【前端VUE框架】最新/最全/最细实战课程，VUE56节分享，免费拿不谢！vue学习目标：
提示：2021【前端VUE框架】最新/最全/最细实战课程，…
18，我轻轻的尝一口这香浓的诱惑，谈谈我搞vue实现年入35万过程第十八步,vue-devtools调试工具
2021【前端VUE框架】第18节，我轻轻的尝一口这香浓的诱惑，谈谈我搞vue实现年入35万过程,vue-devtools学习目标：
提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习 重磅来袭：3个月掌握 vue …
17，故事的小黄花 从出生那年就飘着，vue-cli知识点晃到了现在。
学习目标：
提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习 重磅来袭：3个月掌握 vue 入门知识到实战学代码。 学习内容：
提示：本节第17节内容：vue-cli知识点 学习本节视频需…
11,你听说过vue过渡动画了嘛？没有吧? 众里寻他千百度，百度不一定全面？
2020【前端VUE框架】最新最全实战课程，VUE56节分享，免费拿不谢！vue过度动画的使用方法整理
vue.js css 脸书
发布于 2020-11-19
transition
props
name： - string，用于自动生成 CSS 过渡类名。例如：na…
【CSS3】CSS3新特性——2D转换
▊ 什么是转换（transform）？
转换可以理解为变形，可以实现元素的移动（translate）、旋转（rotate）、缩放（scale）等效果
▍ 移动（translate&#…
CSS面试题汇总（三）
往期点这里：↓ CSS面试题汇总（一） CSS面试题汇总（二）
21. li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
参考答案：浏览器的默认行为是把 inline 元素间的空白…
HTML5实现头像的上传
HTML5实现头像的上传
这是利用form-data给后台传输数据，来实现头像的上传加载！
html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content&quo…
正则表达式（2）-- 括号总结，预定义类，替换
1. 括号总结
大括号 ：量词符，里面表示重复次数中括号 ：字符集合，匹配方括号中的任意字符小括号 ：表示优先级
可以在线测试：https://c.runoob.com/ 菜鸟工具
2. 预定义类
预定义类指的是某些常见模式的简…
build打包空白页
只需要更改三处
1.config文件—index.js—build里 更改为 assetsPublicPath: ‘/’，
build文件内webpack.prod.conf.js，在output：增加 publicPath: ‘./’,
3.build文件内—utils.js， 增加 publicPath:’…/…/’,
更改3处&am…
vue项目中实现价格被横线划掉，折扣价效果
效果图 代码
横线划掉效果就是用到了css的一句代码：text-decoration: line-through; 其他颜色大小是自己改的。
<p class"usa">￥499.00<spanstyle"text-decoration: line-through;font-size: 12px;color: #ccc;">&…
HTML CSS3变形移动、旋转、缩放、3d 、动画 拉伸布局等笔记
变形移动 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style type&qu…
CSS：filter（滤镜）修饰父元素背景，影响子元素问题解决
问题： 父元素作为背景，设置了filter的高斯模糊效果，影响到了子元素的文字↓↓↓↓↓↓↓↓↓↓
<div class"cell"><p>嗷嗷嗷嗷嗷嗷嗷嗷啊</p>
</div>
/******************************/
<style>.ce…
CSS之filter属性和calc函数
目录 1. 有哪些属性值 和 作用
blur
opacity
grayscale
2. calc函数 1. 有哪些属性值 和 作用
blur
作用：设置模糊度 .box1 {width: 200px;height: 200px;background-color: pink;/* 1. blur属性值测试 */filter: blur(10px);} opacity
设置透明度【直接写op…
vue给路由添加滚动条达到路由内滚动
前言
在我们制作网站不止一级路由时，可能会要在子路由里面单独设置一个滚动条。而不是由网页自带的滚动条进行滑动。不然可能会出现这种效果
网页自带滚动条滑动 如果用网页自带的浏览器的话就是整个页面向下滑动，如果用户想切换到另一个子路由模块的话…
CSS新增的:where和:is伪类函数是什么？
来自博客：https://blog.zhangbing.site/2021/04/14/css-where-is-pseudo-class-functions/ 什么是 :is 与 :where？
:is() 和 :where() 都是伪类函数，可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组（id&#…
面试题：说一说重排（回流）和重绘以及如何避免重排来提高性能
基本概念
重绘：当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。
回流：当渲染树render tree中…
移动端1个像素边框线sass实现
1.定义一个像素方法
// _border_1px.scss文件
// 参数说明：
// $pos：边框线位置（上边框线：before；下边框线：after）
// $color：边框颜色
mixin border_1px($pos:before, $color:#ccc…
如何在Shadow DOM/Web组件中覆盖CSS
Web组件（Web Components）的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。
影子DOM&#x…
HTML datalist了解一下，如何仅使用它创建自动完成输入女神小例子
小技巧系列 本文教你如何仅使用HTML创建自动完成输入，选择你心中的女神。 HTML datalist 要实现这个功能，首先要创建一个标签和输入框。 <label for"goddess">你的女神是谁？</label>
<input type"text" i…
微信H5开发-大多数前端都会遇到的几个兼容性的坑
点击上方“小生方勤”，选择“设为星标”第一时间关注技术干货！最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。…
HTMLCSS案例—咖啡店（定位+布局+CSS3）
HTML&CSS案例—咖啡店该案例是从最终效果到实现的过程一，分析页面布局二，做整体布局1. 创建一个站点文件夹，再加上子文件夹2. 先初步输入代码，4部分4< div >,广告后面加三， 再前面的基础上将内容的结构再丰富…
px，rem，rpx的区别和换算
假如我们在css里面设定下面的css html{font-size:14px} 那么后面的CSS里面的rem值则是以这个14来换算。
例如设定一个div宽度为3rem,高度为2.5rem. 则它换算成px为width:42px.height:35px
同理，假如一个设计稿为宽度42px,高度为35px 则换成rem，则是…
学习笔记~1.5 CSS3新特性
1.5 CSS3新特性
笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入…
2020 CSS清除浮动
CSS清除浮动
1、在浮动的板块上加
overflow: hidden;2、在浮动的板块上加
clear:both;3、在浮动的上一部分板块加
.clearfix：before,.clearfix：after {content: "";display:table；
}
.clearfix:after{clear:both;
}
.clearfix …
前端基础复习——等高布局、圣杯布局、双飞翼布局的实现原理
等高布局： - 假等高:
原理：利用内外边距相抵消，注意父元素设置"overflow:hidden"，列变宽，其他列等高变化
优点：结构简单，兼容所有浏览器
缺点：伪等高，需要合…
css实现气泡对话框
实现气泡聊天框 我介绍两个方法： 第一种：利用旋转，首先设置一个小正方形利用transform属性将其旋转45度，当我们把一个长方形方框和旋转后的小正方形置于一起就可以都得到理想效果 效果图如下: 如上图所示，露出来的…
菜单栏隐藏 | CSDN创作打卡
1. 菜单栏隐藏页面效果 2. 设计思路 页面效果：默认状态下，菜单栏正常显示；当鼠标移入时，除了鼠标选中的菜单外，其他菜单虚化，达到突出选中菜单显示的效果。 技术实现：HTML 部分选用无序列表标签…
前端基础复习--11css添加省略号？css精灵？css圆角？
1..css添加省略号 width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
2..css sprit css精灵 利用背景定位来做 例如left/right -500px 3..css圆角 border-radius:20px 20px是圆的…
浅谈CSS常用属性（5）-float属性
1. 什么是 float 属性 float 属性可以让标签浮起来，块级标签页可以堆叠。 2. float属性的常用属性值 1）left 块级标签向左堆叠 2）center 向页面中间堆叠 3）right 向右堆叠 4）none 默认值，块级标签不堆叠 3.…
vue+elemenUI项目，仿照京东商城，完成电商网站的订单中心
效果展示： 页面布局
<el-tabs class"orders"><el-menu default-active"1" class"el-menu-demo" mode"horizontal" select"handleSelect"active-text-color"#ff5001"><el-menu-item i…
css实现渐变色字体
.gradient{background-image: linear-gradient(#F38989 ,#C51212);background-clip: text;-webkit-background-clip: text;color: transparent;
}
css动画（详解带图）
css动画过渡过渡 （transition）的作用常用属性实例动画动画的简介设置关键帧动画常用属性实例变形变形(transform)的简介常用属性(transform)Z轴平移实例旋转旋转(transform)的简介(transform)常用属性时钟实例立方体实例缩放(transform)常用属性图片放大…
CSS3——盒子模型
在浏览器上运行的网页实际上是一份HTML文件，这份文件的主体则是由多个HTML标签所组成， 网页在显示这些标签的时候，会使用盒子模型来计算这些标签该如何显示在网页上。盒子模型的定义里，每个显示在网页上的标签都是一个矩形对象&am…
关于在js中存在 “\r\n”＜br /＞处理字符串中，换行符无效问题的处理办法
一、场景 接口返回的字段中存在 \r\n、<br / >等换行符
二、思路
一：通过js的replace 方法
const data str.replace(/\\r\\n/g, <br/>)二：简单的换行等操作,通过给父元素设置css 方法
white-space: pre-wrap;normal 默认。空白会被浏览…
文字滚动左出右进，纯css操作
注意点
一、使用 white-space: nowrap; 阻止文字换行；
二、需要滚动的 标签必须要有width属性。
三、keyfrom 初始值 需要从 100% 开始。这样才会有从右进入的效果。 以下是 具体实现code html：
<div className{style.banner_textscroll}><…
background颜色填充范围
background设置颜色时到底填充到盒子模型的哪个部分，所以做了个实验，如下所示
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>Title</title><style>div{height: …
子元素如何在父元素中居中
水平居中：
1.子父元素宽度固定，子元素设置margin：auto，并且子元素不能设置浮动，否则居中失效
2.子父元素宽度固定，父元素设置text-align：center，子元素设置display：inl…
animation实现简单的loading的动画
转圈的效果：
方法实现一：
.loading_circle1 {width: 48px;height: 48px;border-width: 0 0 1px 1px;border-style: solid;border-color: green;border-radius: 50%;animation: loading 1s linear infinite;overflow: hidden;
}
keyframes loading {0% …
手机端设备的的兼容的问题总结
项目在手机端适配的归结
使用rem的来实现适配，在页面中进行对根元素html的font-size设置进行不同设备间的适配
// 屏幕适配
(function (win, doc) {if (!win.addEventListener) return;// 获取对应的浏览器信息var agent navigator.userAgent,isAndroid /(?:And…
css实现大屏效果的背景div
实现大屏效果的背景div, 效果如下:
html <div class"box">1111111</div>css
.box {width: 200px;height: 80px;background: linear-gradient(270deg, #00cda2, #00cda2) 0 0 no-repeat,linear-gradient(180deg, #00cda2, #00cda2) 0 0 no-repeat,line…
uniapp引入iconfont
uniapp在线引入iconfont图标
1.登录iconfont账号(本人使用微博账号登录)
2.创建项目 > 以lianxi项目为例 3.选择自己用到的图标加入到项目 4.生成CSS代码 5.复制代码到浏览器打开** 6.(1)先在项目中新建一个css文件
(2)复制生成的代码到自己项目中并在所有url开头的代码前…
用CSS设置颜色、背景和图像效果
📜个人简介 ⭐️个人主页：微风洋洋🙋♂️ 🍑博客领域：编程基础💡,后端💡,大数据,信息安全 🍅写作风格：干货,干货,还是tmd的干货 🌸精选专栏：【J…
【新星计划】Demo---Expanding Cards------ 1/50(详解)
一.布局思路二.对CSS代码的初步解析三.对CSS的解析的更进一步解
2) CSS属性书写顺序 以及里面包含的知识点3) Overflow 和 text-overflow 的区别? 4) 伪类和伪元素区别(做案例时的一些思考)
四. JS代码的解析 五. 在做本案例期间的思考 与 知识点之间的迁移 布局思路:…
CSS---三角的做法
首先让 宽高必须为 0
设置透明的实线边框
boder-方位(例子: left right)-color: ; 例子:
.名 {
width: 0;
height: 0;
border: 50px solid transpare;
border-left-color: red; } 显示为: 其中的 line-height: 0; font-size: 0; 是为了照顾兼容性
QSS实践汇总（6）——QPushButton样式（风格）
一、QPushButton风格（1） QPushButton[btnNoLine"true"]{
font-family:"NSimSun";
font-size:14px;
color:rgb(220,220,220);
}
QPushButton[btnNoLine"true"]::hover{
color:rgb(19,154,230);
}
QPushButton#btnA…
HTML还可以放音乐，放视频（真的吗？）
📜个人简介 ⭐️个人主页：微风洋洋🙋♂️ 🍑博客领域：编程基础💡,后端💡,大数据,信息安全 🍅写作风格：干货,干货,还是tmd的干货 🌸精选专栏：【J…
QSS实践汇总（5）——QDateTimeEdit样式（风格）
一、简单说明
QDateTimeEdit、QSpinBox、QDoubleSpinBox风格类似
二、QDateTimeEdit风格 QDateTimeEdit{
background:transparent;
border:1px solid rgb(82,143,199);
border-radius:2px;
min-height:26px;
max-height:26px;
}
QDateTimeEdit::up-arrow{ image:url(:…
实现元素水平垂直居中的几种方案
文章目录一、已知大小元素在屏幕中水平垂直居中？二、未知大小元素居中三、已知大小子元素在父元素中水平垂直都居中四、未知大小子元素在父元素中垂直水平都居中一、已知大小元素在屏幕中水平垂直居中？
//css实现代码
className{width：100px…
如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？
在前端日常布局中，会经常遇到左侧宽度固定，右侧自适应或者左右两边固定，中间部分自适应的实用场景。本文例子中将列举出两种常用的两栏布局，左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用方法以及代码 具体…
educoder答案-CSS3-文本外观样式-太原理工大学
太原理工大学 Web程序设计基础2021秋答案 educoder
本实训项目为廖丽娟老师团队自己编写的实训项目，此账号超前更新答案，助力各校友学好web 第1关：文本外观样式相关的概念
B D B
第2关：CSS-文本空间的设置
<!doctype htm…
educoder答案-CSS3选择器-属性选择器-太原理工大学
太原理工大学 Web程序设计基础2021秋答案 educoder
本实训项目为廖丽娟老师团队自己编写的实训项目，此账号超前更新答案，助力各校友学好web 第1关：CSS3-属性选择器相关概念
C B A D
第2关：CSS3-属性选择器
<!DOCTYPE htm…
@media响应式布局
1.基础语法
media语法：
文档宽度小于 300 像素则修改背景颜色(background-color):
media screen and (max-width: 300px) {body {background-color:lightblue;}
}2.案例一
实例：
*{padding: 0;margin: 0;}
ul{list-style: none;}
ul{display: flex;…
移动端左侧导航的实现
一、实现效果
主页： 点击导航键：
二、实现方案
0x1 CSS3javascript方案
1、实现思路 利用css3的transform变换 translate(x,y)，translatex() translatey() transition过渡
<’ transition-property ‘>：检索…
【第二届青训营-寒假前端场】- 理解CSS之布局（layout）笔记
布局（layout）widthheightpaddingmarginborderbox-sizingoverflow块级元素行级元素常规流（Normal Flow）行内格式化上下文（Inline formatting context）块级格式化上下文（Block Formatting Context…
CSS3 transform对普通元素的渲染影响
CSS3 transform对普通元素的渲染影响 文章目录CSS3 transform对普通元素的渲染影响一、transform提升元素的垂直地位（开启了层叠上下文）二、transform改变overflow对absolute元素的限制三、transform限制absolute的100%宽度大小一、transform提升元素的垂…
leaflet动态路线
官方实例：Leaflet Ant Path Example
以下为两个动态路线实例：
下载插件：npm install leaflet-ant-path
import引入
//清除上一次画的线段
if (gPath) {gMap.removeLayer(gPath);}
var longLatList [[****,****],[*****,****]];//经纬度数…
CSS的元素显示模式以及背景颜色
一.CSS的元素显示模式
1.元素显示模式的概念 作用： 了解元素显示模式的特点可以更好的布局我们的网页。 元素显示模式就是元素（标签）以什么方式进行显示，比如< div >自己占一行，又如一行可以放多个< span &g…
box-reflect应用
box-reflect应用
语法
box-reflect：none(无倒影) | <direction> <offset> <mask-box-image>
<direction> above | below | left | right（倒影方向，上、下、左、右）
<offset> <length> …
css实现div平分
先看效果图，无论多少个块级元素都会被平分 上代码：
//父级
.xya_strip{justify-content: space-between;padding: 0rpx 30rpx;
}
//子级
.xya_strip view{width: 100% !important;
}
前端 折叠面板 折叠展开动画
前言
以uniapp代码来说明折叠面板原理
效果 原理
首先折叠展开动画选择 transition属性
transition: all 0.4s;
然后使动画生效：动态改变折叠面板的高度
折叠面板初始高度为0（height 0 ）然后再根据折叠面板里面内容的高度，改…
vue -webkit-box-orient vertical webpack打包后被过滤掉了 线上没有这行代码
问题：vue -webkit-box-orient vertical webpack打包后被过滤掉了 线上没有这行代码
解决：
（1）方法一：加上绿色注释，跳过webpack的css打包
.word-overflow-3{overflow:hidden;text-overflow:ellipsis;dis…
css怎么设置文本超出显示省略号
1、单行文本超出
.divObj{overflow: hidden; text-overflow:ellipsis;white-space: nowrap;
} 2、多行文本超出
.divObj{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;
} 微信小程序二手闲置商城校园跳蚤物品交换 免费信息发…
使用CSS+Vue+JS手动封装一个Collapse折叠面板
最近项目中类似于collapse折叠面板的需求，但是找了几个UI组件，效果不是特别贴合，于是就自己动手写了一个，大家一起看看效果
这就是最终的展现效果，下面给大家看看我的实现代码，非常简单
html部分
css…
web前端-综合应用案例-二维码名片的制作-educoder
第1关：二维码名片页面的结构设计
<!doctype html>
<html lang"en">
<head>
<meta charset"UTF-8">
<title>设计师名片</title>
</head>
<body><!-- ********* Begin ********* --><…
CSS选择器-Ⅱ(层次、伪类、属性选择器)
CSS选择器-Ⅱ(层次、伪类、属性选择器)
CSS (Cascading Style Sheet )
1、css层次选择器
1.1 后代选择器
在某个元素的后面， 祖爷爷 爷爷 爸爸 你
/*后代选择*/body p{background: red;}1.2 子选择器
一代，儿子
/*子选择器*/body>p{background…
element UI 修改表格的颜色
// 表格.tableList {flex: 1;height: 0;width: 100%;.el-table {color: #7486a2 !important;background: #021b34 !important;&::before {height: 0 !important;}/deep/ td, /deep/ th.is-leaf {border-width: 0 !important;}/deep/ thead tr th{background: #021b34 !im…
CSS3实现移动效果
CSS3实现移动效果任务描述相关知识transform属性transition属性代码文件任务描述
本关任务：用CSS3实现物体移动效果。
相关知识
为了完成本关任务，你需要掌握：
transform属性transition属性。
transform属性
下面是基本的html结构&…
微信小程序开发实战-第三周
第三周
3.项目开发阶段
组件化开发优点 组件复用 代码分离
3.3 生命周期函数
官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
onload：监听页面加载，最先被触发
onReady：监听…
用PyAV完成视频解码之后，如何完成视频分辨率的转换？
答案：用reformay函数来完成转换，比如：
frame_show VideoFrame.reformat(widthXShow_width, heightXShow_height)也可以完成颜色空间的转换。
前端基础复习--17animation 动画？animate.css？
1. animation 动画？ 动画复杂在哪里呢？在keyframes里可以填很多个节点 animation-name : 设置动画的名字 (自定义的) animation-duration : 动画的持续时间 animation-delay : 动画的延迟时间 animation-iteration-count : 动画的重复次数 &…
echarts 雷达图 点的颜色自定义 名字颜色自定义 vue实现
根据不同的等级 节点显示不同的颜色 DOM层
<div class="main-left"><div id="radar_echarts" style="width: 100%;height: 100%;"></div><div class="main-left-top-right"><div class="item gf&quo…
pyecharts将多图显示在一起的方案
reference: 参考 方案1： Grid：并行显示多张图表 方案2： Overlap:图表混合使用 方案3： Page:一个页面顺序渲染多个图表 方案4：Timeline:时间线轮播多图 推荐使用方案1
css子元素选择父元素的实现
在css中，元素不能往前选择，即不能选择父元素或前兄弟元素；这都受制于DOM渲染规则；这其实也好理解，html是从外层往里层的渲染机制；如果可以往上渲染就会出现渲染紊乱与性能等之类的问题；
改变DO…
css选择器的逻辑组合伪类 -not()/ is()/where()
选择器的伪类：用于更好的匹配元素，使代码更加的简洁和更好理解；
:not();否定的伪类
优先级为0，优先级由括号中的表达式决定； :not(p)由p决定可以不断的级联； input:not(:disabled):not(:read-only) {} ;表…
css选择器的输入伪类 - 实现Material Design风格的输入框样式体验
:enabled和:disabled的使用
使用细节点：
input的输入框中，设置readonly(只读)属性也是可以匹配到:enabled的样式<a href></a>可以匹配:anabled的属性，却不能匹配:disabled的属性<select>下拉框可以匹配:enabled和:disabl…
css选择器中url定位的伪类 - 有关:link ， :visited， :hover，:active， 目标:target
链接的伪类有:link ， :visited， :hover ，:active
:link - 未访问过的:visited - 已访问过:hover - 鼠标经过:active - 点击
定义链接的伪类样式时，通常会设置多个，这样就会导致优先级的问题，大家都是伪类…
css选择器中的子索引伪类使用，有关:last-child与:last-of-type的区分
这篇主要介绍的是子索引伪类的使用，减少js对样式逻辑的干涉，从而提高性能
:first-child与:last-child 匹配：第一个与最后一个的元素;
俩者的区别：first-child是IE7浏览器就开始支持，last-child是css3时代出现的&…
css 实现图片间用间隔线（竖线）
用伪元素(::after)实现
//父元素
.recom_bd ul li {position: relative; //父元素用相对路径float: left;
}//子元素.recom_bd ul li:nth-child(-n3)::after { content: ; position: absolute; //子元素用绝对路径right: 0; top: 10px;width: 1p…
psa name_PSA：始终添加通用字体系列备份
psa nameTL;DR: TL; DR： /* WRONG */.huh {font-family: Helvetica Neue, Helvetica, Arial;}/* OK */.huh {font-family: Helvetica Neue, Helvetica, Arial, sans-serif;}展品1：必应搜索(Exhibit 1: Bing search) Yeah, I use Bing search, shut up! …
网页布局综合总结 与 显示和隐藏专题
通过盒子模型, 清楚知道大部分html标签是一个盒子 通过CSS浮动,定位可以让每个盒子排列成为网页 一个完整的网页, 是标准流, 浮动, 定位一起完成布局, 每个都有自己的专用用法 1.标准流 可以让盒子上下排列或者左右排列, 垂直的块级盒子显示就用标准流布局 2.浮动 可以让多个块…
CSS深入基础篇---背景(5)
通过CSS背景属性, 可以给页面元素添加背景样式
背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等 背景颜色
background-color属性定义了元素的背景颜色
一般情况下元素背景颜色默认值是 transparent(译: 透明的 清澈的) 背景图片
background-image…
CSS深入基础篇---复合选择器(2)
可以使用 shiftAltF 快速使文档格式化
可以使用 AITShift 批量操作 也就是Emmet语法
复合选择器:
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器建立在基础选择器之上,对基础选择器进行组合形成的
复合选择器可以更准确,更高效的选择目标元素…
前端基础复习--16浏览器前缀？transition 过渡？ transform变形？ transform的注意事项
1. 浏览器前缀？⭐️面试会问 CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。
2. transition 过渡？ transition-property : 规定设置过渡效果的CSS属性的名称。 transition-duration : 规定完…
CSS基础篇(1)---CSS简介
目标:
CSS简介
CSS基础选择器
CSS字体属性
CSS文本属性
CSS的引入方式
Chrome调试工具 CSS有什么作用???
CSS主要用于美化网页,以及布局网页 HTML的局限性:
HTML是不重视外观样式的,只关注内容的语义 是什么是CSS?
CSS是层叠样式表(Cascading Style Sheets) 也可以…
el-table合并列，合并日期列相同的日期
业务场景：实现合并日期列相同的日期 思路：使用element的:span-method"objectSpanMethod"实现 效果：
html:
<el-table:data"meetTotalTableList":span-method"objectSpanMethod"bordersize"mini&quo…
antd vue 设置table表格滚动条样式
/deep/.ant-table-body{&::-webkit-scrollbar {//整体样式height: 12px;}&::-webkit-scrollbar-thumb {//滑动滑块条样式// border-radius: 30px;// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);// background: #00aaff;background: rgba(2, 35, 60, 1);}&a…
HTML + CSS3 基础入门与进阶
HTML CSS3 基础入门与进阶简介1、前端三层2、IDE简介3、网页实时热更新4、项目开发流程一、HTML 入门与进阶1、HTML 语法与基础标签（1）HTML5基础入门（2）HTML5的基本标签2、div 标签3、列表标签（1）无序列表…
html改变页面滚动条样式
/*滚动条样式*/
.centerList::-webkit-scrollbar {width: 30px; /*height: 4px;*/
}
.centerList::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(2, 35, 60, 1);
}
.centerList::-webkit-scrollbar-t…
纯Css3手工打造网页图片效果
鼠标悬停，图片360度旋转效果： 代码： <style> .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("images/author.jpg") left top; -webkit-background-size: 220px 220px; -moz-backg…
Web APls-day01
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录
变量声明
Web API 基本认知
1 作用和分类
2 什么是DOM
3 DOM树
4 DOM对象（重要…
border-radius属性值参数详解
border-radius是CSS3设置圆角的一个属性，其属性值得单位可以使用：em、px、百分比等等。但是，border-radius属性值得参数形式有好多种，那么具体都代表什么意思呢？下面以实际例子分析一下：
首先是最常见的一…
浅谈uniapp的flex布局
文章目录1 flex布局1.1 flex-direction1.2 flex-wrap1.3 justify-content1.4 align-items1.5 align-content属性1.6 其他项目属性1.6.1 order属性1.6.2 flex-grow属性1.6.3 flex-shrink属性1.6.4 flex属性1 flex布局
flex是Flexible Box的缩写，意为”弹性布局”…
你用过CSS3的这个currentColor新属性吗？使用与兼容性
currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如：.xxx { border: 1px solid currentColor; } currentColor表示“当前的标签所继承的文字颜色”，换种方式表示就是：
currentColor color的值…
解决右侧出现滚动条页面抖动的问题
在页面内容没有占满屏幕时右侧不会出现滚动条，当再加载内容时页面会出现右侧滚动条，页面宽度由于是auto，整个页面会向左移动
解决办法： html {overflow-x: hidden;overflow-y: auto;}body {width: 100vw;overflow: hidden;paddin…
CSS3中的变形处理
变形分类 缩放 使用scale方法来实现文字或图像的缩放，在参数中指定缩放倍率。例如“scale（0.5）”，表示缩小50 倾斜 使用skew方法来实现文字或图像的缩放，在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度…
css实现:after中使用图片
先看一下效果： 下面是代码实现：
.xin {position: relative;font-size: 20rpx;color: #15bf5d;border: 1rpx dashed #ccc;padding-top: 20rpx;
}.xin::after {content: ;background: url(https://.........com/_system/gAdd.png);position: absolute;ba…
给自己的博客园添加网抑云音乐播放器
1. 申请权限
首先给自己的博客园设置，申请js权限，这个教程可以去搜。
2. 打开网页版网抑云音乐
点击一首你喜欢的歌进入 ， 然后点击生成外链播放器 然后复制代码： 进入到自己的博客园设置页面 我是将代码粘贴在侧边栏ÿ…
CSS实现一个交互感不错的卡片列表
0、需求分析
横向滚动鼠标悬停时突出显示 默认堆叠展示鼠标悬停时，完整展示当前块适当旋出效果 移动端样式优化、磁吸效果美化滚动条
1、涉及的主要知识块
flex 布局css 简单变换过渡 transform、transition 渐变色函数 linear-gradient… 伪类、伪元素 滚动条、…
CSS预处理器-Less
less
认识
Less是一个 CSS预处理器， Less文件后缀为.less浏览器不识别less文件，所以在VScode里使用Easy Less插件自动生成css文件
优点：
css逻辑更加清晰免去了繁琐的计算（直接写计算式就可）
注释
// 单行注释 C…
Anaconda的安装于使用
一、下载 Anaconda
官网地址：https://www.anaconda.com/
下载步骤
1、单击Get Started 2、单击Download Anaconda installers 3、选择对应的系统 4、选择系统对应的位数 二、安装Anaconda
1、找到下载完成的安装包，右击以管理员身份运行
2、下一步 …
CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(transform)
CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(transform)
1.缩小和放大属性（scale） 格式：transform：缩小类型（数值）； 注意：缩小和放大都是 scale ； 其中…
通过.htaccess设置重定向实现强制https访问
最近在做seo优化，做网站过程中遇到网站重定向问题（重定向有利于seo优化）
网站根目录创建.htaccess文件（这个文件类型是隐藏类型的）
只需要将下列代码任选其一，放到 .htaccess 文件中即可，如果…
vue2.0+Element-ui导出table为Excel
我们项目(物联网)基本上都是后台管理系统那种样子，所以Element简直对胃口，也有很多表单导出，以此记忆。
准备依赖文件的下载
1， cnpm install jszip 导出为压缩文件 2，cnpm install xlsx 处理excel 3，cnp…
flex布局（详细）
伸缩布局 flex布局
父项常见属性
flex-direction flex-direction: row; 默认值：元素沿行排列，起始线在左边，终止线在右边 效果图 flex-direction: row-reverse; 元素沿着行排列，起始线右边，终止线左边 flex-direc…
纯CSS让overflow:auto页面滚动条出现时不跳动
我不像标题，我是一个不会晃动的安静的小天使！ 代码
CSS代码： /*注意：私有前缀这里已省略……*/.demo {margin-left: calc(100vw - 100%);text-align: center; overflow: hidden;animation: scrollbar-toggle 2s infinite alterna…
flex弹性盒布局详细讲解
flex弹性盒布局一.如何将一个容器设置为弹性容器二.设置弹性容器中弹性元素的排列方式flex-deretion属性三.设置弹性元素的换行flex-wrap属性四.主轴与垂轴1.概念2.flex-deretion和flex-wrap对主轴和垂轴方向的影响五.主轴与垂轴上的对齐方式justify-content属性align-items属性…
HTML5CSS3提高
目标 能够说出 3~5 个 HTML5 新增布局和表单标签能够说出 CSS3 的新增特性有哪些 HTML5新特性
概述
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9 以上版本的浏览器…
1.CSS3 教程-＞ 多列布局 ＞ image模块 ＞ cssTransition 过渡 ＞ CSS Animations 动画 ＞ Transform二维
CSS3 教程 多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维 介绍
CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展CSS2.1。
它带来了许多期新特性， 例如圆角、阴影、gradients(渐…
纯 CSS 开关切换按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>纯 CSS 开关切换按钮</title><style>html {font-size: 62.5%;}body {background-color: #1848a0;}.wrapper {position: absolute;left: …
css3 文本超出容器后显示...以及超出几行后显示...
前言
好记性不如烂笔头，记录一下自己常用的css样式。
一，文本超出容器后显示…
<div class"ellipsis-main">国际酒店政策国际酒店政策国际酒店政策国际酒店政策国际酒店政策</div>
.ellipsis-main{width: 100%;height: 40px;bo…
div输入框的文字超过指定行数用省略号表示css
实现效果：超过四行用省略号表示 实现方法： .text{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4; // 自定义行数-webkit-box-orient: vertical;
}
20231030-黑马web进阶-空间转换
文章目录 空间位移空间旋转立体呈现transform-style: preserve-3d;3D导航空间缩放 空间位移
语法： transform:translate3d(x,y,z); transform.translateX(值); transform.translateY(值); transform.translateZ(值); 透视属性：perspective:值;ÿ…
win10 如何卸载 Hp Smart？
1.鼠标右键点击开始菜单;
2.在展开的界面中，选择“Windows PowerShell（管理员）”; 3.在新打开的界面里面输入 get-appxpackage hp，然后回车(Enter);
（打开之后界面是这样的）
4.查看信息，找…
CSS3 弹性布局/伸缩布局 flex
CSS3 之 弹性布局 flex
布局的传统解决方案，基于盒状模型，依赖 display属性 position属性 float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出伸缩盒模型草案，该草案…
css3自动吸附scroll-snap
我们希望可以一块一块的滚动，比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候，实现后一个块自动滚入或者前一个块回弹到初始位置这种效果，以前的时候用js需要写比较复杂的判断逻辑，后来有了一个css scroll snap这个方…
JS单选框默认选中样式修改，为白色背景中心有黑色小圆点的样式
要修改JavaScript中默认选中的单选框的样式为白色背景并带有黑色小圆点，你可以使用CSS来实现。以下是一个示例，展示如何修改样式：
<style>/* 修改默认选中单选框的样式 */input[type"radio"]:checked {appearance: none; /*…
改变原生input框中placeholder颜色的方法
设计图上 Placeholder是白色的，所以就查看了一下改变placeholder的方法： <input v-model"barcode" type"text" placeholder"请扫描条码" class"lightInput" />//改变input框 宽度，高度&#…
echarts设置容器宽度设置为100%只显示100px宽度
在使用echarts时，写在tab页中的图表宽度明明设成了100%，但是在页面上实际却只有100px宽
原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找…
css transition回调
css transition回调
需求
需要在一个css css transition执行完毕之后执行一个回调的方法。
解决
可以用window.addEventListener(‘transitionend’);监听到transition执行完毕。
存在的问题
当前页面中所有的transition执行完毕后都会触发该监听，使用的时候需…
CSS清除浮动的几种常见方法
文章目录浮动优点缺点清除浮动一、额外标签法实例二、父级添加overflow属性实例三、使用：after实例四、使用双伪元素实例五、手动设置父级高度实例注意浮动
当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为…
Web开发介绍详细介绍
Web开发介绍
1 什么是web开发
Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。
所以Web开发说白了，就是开发网站的，例如下图所示的网站：淘宝，京东等等 那么我们…
端午佳节|展望现代科技下的传统佳节
目录
引言
一、利用代码传承端午节文化
1. 编写端午节的相关小程序或网页应用
2. 开发端午节主题的应用程序或游戏
二、科技让传统更便捷
1. 线上购物与送礼
2. 线上分享与互动
结语： 引言
加入CSDN已经是6个端午的年头了。今年端午正好是第6年，…
item_get请求方式
为了进行此平台API的调用，首先我们需要做下面几件事情。
1、 获取一个KEY。
2、 参考API文档里的接入方式和示例。
3、查看测试工具是否有需要的接口，响应实例的返回字段是否符合参数要求。
4、利用平台的文档中心和API测试工具，对接口进…
HTML+CSS面试题总结（附答案+视频讲解）
HTMLCSS面试题总结如下 红色标注为常见重点
对应的视频讲解在B站：可以点击免费观看
2023前端高频面试题详解/面试必刷HTMLCSS前端面试题_哔哩哔哩_bilibili
目录 1. 块元素和行内元素有哪些
2. css3选择器 （了解）
3. css优先级
4. 对we…
整理了一些常见的前端基础方面的面试题，希望对大家巩固基础知识有所帮助
文章目录前言一、HTML部分1.H5表单新增属性2.H5新增标签3.内联元素和块级元素的区别，常见有哪些4.如何进行SEO优化二、CSS部分1.文本过长实现省略号2.绝对定位、相对定位、固定定位参照物的区别以及原理3.兼容IE写法4.倒三角实现5.常见浏览器内核6.如何处理高度塌陷…
13-2-CSS3-渐变色、2D转换、3D转换
一、渐变色
CSS渐变色（Gradient）是指在元素背景中使用两种或多种不同的颜色进行过渡，超过两个颜色可以形成更为细腻的渐变效果。常见的CSS渐变色有线性渐变和径向渐变。
1. 线性渐变：Linear Gradients 向下/向上/向左/向右/对角…
正则表达式（3） -- 表单验证案例
功能需求：
如果用户名输入合法，则后面提示信息为：用户名合法，并且颜色为绿色如果用户名输入不合法，则后面提示信息为：用户名不符合规范，并且颜色为红色
分析：
用户名只能为英文字…
css3 hover效果
CSS3中的:hover伪类用于创建鼠标悬停时的样式效果。当用户将鼠标悬停在页面元素上时，你可以为这些元素定义不同的样式规则，以实现交互效果
/* 一般样式规则 */
element {/* 正常状态下的样式 */
}/* 悬停样式规则 */
element:hover {/* 鼠标悬停时的样式…
es6之前 构造函数和原型
1. 概述
在典型的 OOP 语言中（如java），都存在类的概念，类就是对象的模板，对象就是类的实例。但在es6 之前，JS 中并没有引入类的概念 在es6 之前，对象不是基于类创建的，而是用一种称…
正式服去掉console打印插件
原本项目链接socket成功后打印输出，放到正式服就没有打印了，原因是多了这个插件，不会给用户展示打印内容，但也对调试制造了点困难
babel-plugin-transform-remove-console - npmRemove all console.* calls.https://www.npmjs.co…
python浮动与定位
布局方式 传统布局方式: 1.文档流布局:我们的网页内容从上往下 从左往右进行布局 块元素独占一行 –通过 margin padding display 2.浮动布局:浮动可以使一个元素脱离原本自己的位置 并在父级元素内容区中向左向右移动 直到碰到父元素内容区域的边界或者其他浮动元素为止 3.定位…
探究不常用的CSS属性——border-image
在日常开发中，我们经常使用一些比较常用的 CSS 属性，如 width、height、background-color等。但是，除了这些常见的属性之外，CSS 还有很多不太常用的属性，其中之一就是 border-image。
border-image 是用于定义边框样式…
前端基础复习--10CSS 定位？ PC端的布局？
1. CSS 定位？ position : static（默认） relative absolute fixed sticky relative： 如果没有定位偏移量，对元素本身没有任何影响 不使元素脱离文档流 …
【HTML】再见2022！一起来写一个响应式跨年倒计时吧！(附源码)
💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后…
前端基础复习--12 HTML 与 XHTML区别 ？ strong与b、em与i？引用标签？ iframe标签？br 与 wbr ?
这两天做了点网页的小练习，然后复习了一些新的东西！
1. HTML 与 XHTML区别 ？⭐️面试中会问的 DOCTYPE文档及编码 元素大小写 XHTML不能大写 属性布尔值 XHTML不允许 属性引号 XHTML必须要加引号 图片的alt属…
使用伪类:before在元素前面插入css绘制的图标
项目中总是能遇到奇怪的需求，比如今天就遇到了需要在某个弹窗标题元素前面插入一个图标。但是最好不要引入图片。 1.标题元素前面插入一个图标
原来的弹窗 新弹窗 实现代码
主要目的就是在title前面通过伪类:before插入一个css样式元素。
使用border-radius: 50%…
CSS固定元素屏幕正中间
使用绝对定位或固定定位
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
如何设置是否将padding、border、margin的值算入width和 height里面
使用 box-sizing属性
box-sizing:border-box
设置box-sizing:border-box后，就会将padding、border、margin的值算入width和 height里面去了，使得 总元素的宽度 width的值 、总元素的高度 height。 box-sizing: content-box
其实就是默认的ÿ…
Web前端 CSS3 03
盒子尺寸大小
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-widt…
前端面试 -- HTML5 CSS3
语义化的理解 在写HTML页面结构时所用的标签有意义，头部用head、主体用main、底部用foot… 怎么判断页面是否语义化了？—>把css去掉。如果能够清晰的看出来页面结构，显示内容较为正常 为什么要选择语义化？ ①让HTML结构更加清晰…
CSS动画：多动画同步播放或非同步播放
前言 本篇在讲什么 在CSS样式表现动画的基础上的拓展 本篇适合什么 适合初学H5的小白 适合初学CSS的小白 适合入门的前端程序 本篇需要什么 对Html和css语法有简单认知 Node.js(博主v18.13.0)的开发环境 Npm(博主v8.19.3)的开发环境 依赖VS code编辑器 本篇的特色…
VUE之滚动条参数设置
/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {width: 6px; /*对垂直流动条有效*/height: 6px; /*对水平流动条有效*/
}/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{border-radius: 4…
flex:1详解，以及flex:1和flex:auto的区别
什么是flex：1？
在css中，我们经常可以看到这样的写法：
.box {display: flex;
}.item {flex: 1;
}这里的flex:1相当于flex: 1 1 0%，它是一个简写属性，表示项目（flex item）在弹性容器…
28.CSS 渐变圆文本动画
效果 源码
index.html
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Glowing Gradient Circle Text Animation</title><link rel="stylesheet" href="style.css">
</head>
&l…
博客系统(界面设计)
✏️作者：银河罐头 📋系列专栏：JavaEE 🌲“种一棵树最好的时间是十年前，其次是现在” 目录实现博客列表页预期效果导航栏页面主体左右布局左侧区域右侧区域完整代码实现博客详情页预期效果导航栏 左侧右侧完整代码实现…
JavaEE——CSS3样式表
声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。
CSS3简介：
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发…
HTML5+CSS3小实例：3D翻转Tab选项卡切换特效
实例：3D翻转Tab选项卡切换特效
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=…
CSS图文悬停翻转效果完整源码附注释
实现效果截图 HTML页面源码
<!DOCTYPE html>
<html><head><meta http-equiv="content-type
教你版本控制软件git的使用
目录
一、版本控制软件的重要性
二、Git 基础概念
Git 特性的具体分析👇
Git 中的三个区域
Git 中的三种状态
Git 的工作流程
三、安装并配置 Git
四、Git 的基本操作一
五、Git 的基本操作二 一、版本控制软件的重要性 在分享git之前我先来说…
css3 弹性布局flex
文章目录 flex弹性盒子flex-direction 决定主轴的方向flex-wrap 换行flex-flow flex-direction和flex-wrap的简写属性justify-content 定义了弹性子元素在主轴上的对齐方式align-items 定义弹性子元素在交叉轴上如何对齐align-content 定义了多根轴线的对齐方式order 定义弹性子…
快速上手用JS实现元素的拖动与占位
这篇博客，是博主这几天刚做的一个项目遇到的一个难点，学会了这个，你就能轻松实现页面元素的移动啦，再配合一些条件，就可以做出一个任务完成进度的页面了！ 先来看看效果： 实现功能： …
Web前端 学习知识点总结（七）Css3动画animation
系列文章目录
Web前端 学习知识点总结（一）HTML基本标签. Web前端 学习知识点总结（二）之Form和Css选择器. Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型. Web前端 学习知识点总结（…
Web前端 学习知识点总结（十三）学生管理系统案例
系列文章目录
Web前端 学习知识点总结（一）HTML基本标签. Web前端 学习知识点总结（二）之Form和Css选择器. Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型. Web前端 学习知识点总结（…
让学前端不再害怕英语单词（一）
有很多跟着我学习的学生经常跟我抱怨前端的单词很多，学了css又忘了html的单词，学了js又忘了css 的单词，所以本着给跟着我学习的学生提供一个学习前端不怕英语单词的课程，就打算写一篇博客去讲述如何增强在学习前端的时候巩固语法并…
javaScript随机数random的妙用
目录 一、介绍二、生成[min,max]之间的数三、生成随机布尔值四、随机排序数组五、随机生成颜色1.十六进制颜色2.RGB格式 六、随机验证码七、随即动画 一、介绍
简介：Math.random() 是生成随机数的基础。通过与其他数学函数和运算符结合使用，可以生成各种…
前端学习第一阶段：第六章 HTML和CSS3
6-1 HTML5 01-HTML5CSS3提高导读 02-HTML5提高-新增语义化标签 03-HTML5-新增视频标签 04-HTML5新增音频标签 05-HTML5新增input表单 06-HTML5新增表单属性 6-2 CSS3 07-CSS3新增属性选择器（上） 08-CSS3新增属性选择器（下） 09-CSS…
css伪类和伪元素的区别
文章目录什么是css伪类和伪元素css伪类和伪元素有什么用？css伪类的具体使用常见的伪类伪元素的具体使用常见的伪元素什么是css伪类和伪元素 伪类和为元素是两个完全不同且重要的概念，它们的作用是给元素添加一些特殊的效果或样式 伪类用于选择某个元素的…
震惊！！！一眼就能看懂的transition与display冲突问题！！！！
transition与display冲突问题
问题：在使用dispaly:none(block)对div的显示隐藏应用于过渡属性上时，但是transition完全失效，没有过渡效果
原因：display:none的时候，页面文档流中将不会存在该元素，display…
react中渲染企业微信的表情
前提：后端返回的的表情是解析成字符串的这种，形如：[微笑]、[旺财]等的
大致思路：
需要一张完整表情包的精灵图，用正则去匹配[***]这种文本再写个json对照表，匹配到的再用json去匹配对应的style样式。利用…
01.纯CSS实现数字时钟
效果 源码
<!doctype html>
<html><head><meta charset="utf-8"><title>Digital Clock</title><link rel="stylesheet" href="style.css"></head><body><div id="time">…
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
文章目录一、盒子测量及样式1、总体盒子测量及样式2、左侧盒子测量及样式3、中间盒子测量及样式4、右侧盒子测量及样式二、横版导航栏代码示例1、HTML 标签结构2、CSS 样式3、显示效果绘制矩形框中的部分 : 一、盒子测量及样式 盒子样式如下 : 1、总体盒子测量及样式 该盒子是…
通过单击按钮实现全屏、退出全屏
没什么好说的，看代码 HTML
<el-button size"mini" type"success" click"intScreen">全屏显示</el-button>
<el-button size"mini" type"success" click"outScreen">退出全屏</e…
用一个Gmail邮箱注册多个任天堂游戏区，以日本区账号为例
任天堂是一家日本公司，日区的任天堂可以买到常驻的任亏券，兑换任天堂第一方游戏，日区游戏很全，经常打折，可以买到低价的游戏。## 首先进入任天堂官网https://accounts.nintendo.com/register注册账号
css ::before和::after使用
CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合conten…
那么你面试必须知道的H5C3知识点
1、rem和em的区别
rem是相对于根元素(html)的font-size em是相对于父元素的font-size。
2、如何关闭IOS键盘首字母自动大写
<input type"text" autocapitalizeoff>只需要给input输入框加上一个属性即可。
3、什么是语义化标签
1、易读性和维护性会更好 2、…
css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流
前提是每张图片宽度要设置成一样,准备15张图测试 <div class"img-main"><div><img src"/assets/images/sq/1.jpg" alt"" title"1"></div><div><img src"/assets/images/sq/2.jpg" alt&quo…
CSS3媒体查询与页面自适应
2017年9月，W3C发布媒体查询(Media Query Level 4)候选推荐标准规范，它扩展了已经发布的媒体查询的功能。该规范用于CSS的media规则，可以为文档设定特定条件的样式，也可以用于HTML、JavaScript等语言。
1、媒体查询基础
媒体查询…
*CSS: 级联样式表
*CSS: 级联样式表 1.样式表的引入 -行内样式 -内部样式 -外部样式 样式冲突: 就近原则 样式不冲突： 样式合并
2.基本选择器(权值) -标签选择器 -类选择器 .name{...} -ID选择器 #name{...} -通配选择器(*) -群组选择器 选择器之间…
完成flex布局与float布局
一、flex布局
<style>.nav {display: flex;background-color: #f8f8f8; /* 导航栏背景颜色 */}.nav a {flex: 1;display: flex;align-items: center;justify-content: center;padding: 14px 16px;text-decoration: none;color: #555555; /* 导航栏文字颜色 */}.nav a:ho…
行内样式、内部样式、外部样式
行内样式：
该元素的所在本行中使用style标记来写样式
内部样式：
在head标签中使用style标记来写样式
外部样式：
在head标签中使用link标记引用外部样式
注意优先级：
行内样式＞内部样式＞外部样式 代码…
【CSS Grid网格布局】常用属性，示例代码解读
Grid布局是一种二维布局系统，可以将页面划分为行和列，并将元素放置在这些行和列的交叉点上。以下是Grid布局的一些常用属性：
grid-template-columns/grid-template-rows：用于定义网格的列和行的大小和数量。可以指定具体的尺寸值…
【CSS 常用加载动画效果】
常用加载效果 呼吸灯效果波浪光效果转圈加载 呼吸灯效果
<!DOCTYPE html>
<html><head><meta charset"utf-8"><title></title></head><body><div id"ti"></div></body><style>b…
CSS3渐变及2D转换
CSS3渐变及2D转换
持续更新哦…
1、css3渐变
概念:
CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平 稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用 CSS3的渐变(gradients)即可实现。此外，渐变效果的元素在放大…
Vue2向Vue3过度核心技术工程化开发和脚手架
目录 1 工程化开发和脚手架1.1 开发Vue的两种方式1.2.脚手架Vue CLI 2 项目目录介绍和运行流程2.1 项目目录介绍2.2 运行流程 3 组件化开发4 根组件 App.vue4.1 根组件介绍4.2 组件是由三部分构成4.3 总结 5 普通组件的注册使用-局部注册5.1 特点：5.2 步骤ÿ…
HTML5+CSS3②——图像、超链接、音频、视频
目录 图像 超链接 音频 视频 图像 作用：在网页中插入图片 单标签： 标签名：<img src"图片的URL"> <img src"图片的URL" alt"替换文本" title"提示文本"> 属性写在尖括号里面，…
没有 JavaScript 计时器的自动播放轮播 - CSS 动画
先看效果： 再看代码（查看更多）：
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>计时器</title><style>* {padding: 0;margin: 0;box-siz…
doc转html后添加style和导航
public static void main(String[] args) throws Exception {docxToHtml();
}
public static void docxToHtml() throws Exception {//D:\zpdtolly\工作总结文档\zpd使用文档\v4\用户使用手册\客户端使用手册String sourceFileName "C:\\Users\\luoguoqing\\Desktop\\202…
前端实现页面通过canvas添加全屏水印
写在前面，博主是个在北京打拼的码农，从事前端工作5年了，做过十多个大大小小不同类型的项目，最近心血来潮在这儿写点东西，欢迎大家多多指教。 对于文章中出现的任何错误请大家批评指出，一定及时修改。有任何…
Vue-Vben-Admin：打造高效中大型项目后台解决方案
Vue-Vben-Admin：打造高效中大型项目后台解决方案 摘要： Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue和TypeScript的开源项目，旨在为开发中大型项目提供一站式的解决方案。它涵盖了组件封装、实用工具、钩子函数、动态菜单、权限验…
编程笔记 html5cssjs 017 HTML样式
编程笔记 html5&css&js 017 HTML样式 一、HTML样式二、CSS3小结 HTML样式是用来控制网页元素外观的一组属性和值。 一、HTML样式
可以通过以下几种方式来为HTML元素添加样式：
内联样式：直接在HTML元素的style属性中添加样式。例如：…
毛玻璃态卡片悬停效果
效果展示 页面结构组成
页面的组成部分主要是卡片。其中卡片的组成部分主要是包括了图片和详情。
卡片的动效是鼠标悬停在卡片上时，图片会移动到左侧，并且图片是毛玻璃效果。所以我们在布局的时候图片会采用绝对布局。而详情则是基础布局。
CSS3 知识…
使用tailwindcss来构建以及引入外部组件
使用tailwindcss来构建以及引入外部组件
使用tailwindcss来构建以及引入外部组件 前言构建组件 核心思想可行方案不可行方案 可行方案详解 custom css selector Functions & Directivesadd prefixadd scoped不打包 构建demo链接相关issues
前言
我们在日常的开发中&am…
CSS文本超出显示小数点
目录
1、单行文本溢出
2、多行文本溢出
1、基于高度截断 2、基于行数截断 1、单行文本溢出
如果解决文本溢出显示省略号，需要满足的三个条件： 先强制一行内显示文本 white-space:nowrap;/*默认normal 自动换行*/ 超出的文本隐藏起来。 overflow:…
学习css 伪类:has
学习抖音： 渡一前端提薪课
首先我们看下:has(selector)是什么
匹配包含（相对于 selector 的 :scope）指定选择器的元素。可以认为 selector 的前面有一个看不见的 :scope 伪类。它的强大之处是，可以实现父选择器和前面兄弟选择器…
css之svg 制作圆及旋转
1.代码
<template><div class"loading-box"><div class"circle-container"><svg width"75" height"75" class"move-left-to-right"><circle cx"37.5" cy"37.5" r"26&…
文本自动输入/删除的加载动画效果
效果展示 CSS 知识点
绕矩形四周跑的光柱动画实现animation 属性的 steps 属性值运用
页面基础结构实现
<div class"loader"><!-- span 标签是围绕矩形四周的光柱 --><span></span><span></span><span></span>&l…
web之CSS悬停效果页面设计
参考小米商城的“手机”页面，做出一个“手机”的标签，实现当鼠标悬停在“手机”上时，出现手机系列菜单；当鼠标移走时，菜单页面消失的效果！
参考图： 实现代码：
<!DOCTYPE html&g…
旋转立方体.html(网上收集5)
<!DOCTYPE html>
<html>
<head><meta charset"UTF-8"><title>旋转立方体</title><style>#cube {width: 200px;height: 200px;position: relative;transform-style: preserve-3d;animation: rotate 6s infinite linear;mar…
什么是CSS3？深入理解css3
1. CSS选择器：选择器是指定CSS规则应用于哪些元素的方法。以下是一些常见的CSS选择器：
- 元素选择器：选择特定的HTML元素，例如p，h1，div等。 - 类选择器：选择具有特定类的元素，…
Canvas 指南与总结
背景
Canvas API 提供了一个通过 JavaScript 和 HTML 的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。
简单例子
<…
Webgis学习总结
前言：
作者跟随视频学习了webgis内容进行如下学习复习总结
参考：新中地学习笔记
WebGIS第一课：测试高德API并通过：
注册申请高德API成为开发者，创建自己的项目和key进行项目初始化，可以使用JS API官方文…
css3新增的伪类有哪些？
CSS3新增的伪类有：
:first-of-type，选择属于其父元素的特定类型的第一个子元素。:last-of-type，选择属于其父元素的特定类型的最后一个子元素。:only-of-type，选择属于其父元素的特定类型的唯一子元素。:only-child，选…
HTML5+CSS3+Vue小实例：浪漫的心形文字动画特效
实例：浪漫的心形文字动画特效
技术栈：HTML+CSS+Vue
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" conte…
CSS3新增文本样式-text-shadow属性
文本样式
概念:在CSS3中，增加了丰富的文本修饰效果，使得页面更加美观舒服。 常用的文本样式属性
属性说明text-shadow文本阴影text-stroke文本描边text-overflow文本溢出word-wrap强制换行font-face嵌入字体
W3C坐标系 我们日常生活使用最多的是数学坐…
CSS 如何居中 DIV
如何居中 div？
水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性
div {width: 200px;margin: 0 auto;
}水平居中，利用 text-align:center 实现
.container {background: rgba(0, 0, 0, 0.5);text-align: center;font…
HTML5+CSS3实现小米商城（课程设计版）
前言
这个小米商城用到了htmlcssjs，内容是今年6月份的。 结构相对简单，比较容易理解。 如果想要纯htmlcss实现的小米商城，可以看我的这个作品 HTMLCSS实现小米商城 如果需要其他网页作品了，可以看主页其他作品。 HTMLCSS实现华为…
TailwindCSS 配置可视化检查器
问题
TailwindCSS 框架为我们提供了大量默认的类和属性，而且开发者也能够自定义类和配置。
对于初学者来说，这些配置其实是比较复杂的，这也是tailwindcss最大的入手成本，开发者的记忆负担和心智负担也都比较大。
有没有办法能够…
css中2D和3D的区别
CSS中2D和3D的主要区别在于：
维度不同：2D是二维平面，3D是三维空间。可视角度不同：2D只能从一个平面角度看，而3D可以在多个角度上观察。技术难度不同：3D效果需要更复杂的技术支持，如矩阵变换&am…
CSS3实现动态旋转加载样式
要使用 CSS3 创建一个动态旋转加载样式，可以使用 CSS 动画和旋转变换。下面是一个简单的示例：
HTML：
<div class"loader"></div>
CSS：
.loader {width: 50px;height: 50px;border: 4px solid #3498db;b…
css 实现满屏升空的气球动画
问题一
怎么实现满屏气球？简单理解就是多个气球的合并，难道要写多个盒子吗？确实是这样子，但可以有更好的办法，其实就是通过原生操作多个盒子生成，所以只需要实现一个颜色、大小、位置可自定义的气球即可。…
通过css3的锚定滚动属性，实现分页加载时让滚动条不闪动
html标签
<div scroll"handleScroll" id"list-container"style"overflow-anchor:auto;overflow-y: auto;height: 80vh"><ul id"talks"v-for"(item,index) in msgList":key"item.roleiditem.timeitem.conten…
css制作瀑布流布局
CSS制作瀑布流布局的步骤如下：
HTML结构：使用无序列表ul和列表项li来创建网格布局。
<ul class"grid"><li><img src"image1.jpg"></li><li><img src"image2.jpg"></li><l…
js ::after简单实战
::after的作用是在元素后面再加个XXX样式
工作中遇到了一个表格，鼠标指到单元格要有个整行编辑态的效果，下面写个简单的demo 有人可能会说了，直接修改某个单元格的hover样式不就行了嘛，问题是如果鼠标指到单元格和单元格直接的…
【CSS3】第5章 盒子模型
学习目标 熟悉盒子模型的概念，能够说出盒子模型的基本结构。 掌握<div>标签的用法，能够使用<div>标签制作页面模块。 掌握边框属性的用法，能够为盒子设置不同的边框效果。 掌握边距属性的用法，能够使用内边距和外边…
编程笔记 html5cssjs 025 HTML输入类型（1/2）
编程笔记 html5&css&js 025 HTML输入类型（1/2） 输入类型：text输入类型：password输入类型：submit输入类型: radio输入类型: checkbox输入类型: buttonHTML5 输入类型输入类型：number 本节介绍HTML输…
编程笔记 html5cssjs 027 HTML输入属性(1/2)
[TOC](编程笔记 html5&css&js 027 HTML输入属性(1/2)) <input>元素除了type属性表示输入类型，后面还跟上其他属性，叫输入属性。 value 属性
value 属性规定输入字段的初始值：
<form action"">First name:<…
编程笔记 html5cssjs 021 JavaScript
编程笔记 html5&css&js 021 JavaScript 一、<script>：脚本元素二、属性三、基本用法四、操作小结 网页的以一重要的角色JavaScript开始登场。它能使 HTML 页面更具动态性和交互性。 一、<script>：脚本元素
HTML <script> 元素…
编程笔记 html5cssjs 035 HTML 地理定位
编程笔记 html5&css&js 035 HTML 地理定位 一、HTML5 地理定位二、处理错误和拒绝三、getCurrentPosition() 方法 - 返回数据四、Geolocation 对象 - 其他有趣的方法五、练习小结 地理定位有很多事情有关，购物时要知道你在哪吧，驾车时就更是了&a…
悬浮坐标解决方案：如何在图片获取xy鼠标位置和增加标注信息
悬浮坐标的定义，基于固定分辨率的图片，通过获取该图片x和y坐标确定位置后并添加标注，实现位置展示、对应图片内物品展示的一种标注开发方式。
技术要点
自动获取图片x和y坐标；将多个坐标xy在图片上通过CSS定位的方式予以展示&am…
Three.js教程：顶点颜色数据插值计算
推荐：将NSDT场景编辑器加入你3D工具链其他工具系列：NSDT简石数字孪生顶点颜色数据插值计算
上节课自定义几何体给大家介绍了一个顶点位置坐标概念，本节课给大家介绍一个新的几何体顶点概念，就是几何体顶点颜色。
通常几何体顶点…
html+css+js本地音乐播放器，实现可视化音频频谱
效果 htmlcssjs本地音乐播放器，实现可视化音频频谱前言
之前用swing写了个本地音乐播放器（如下图），但是效果一言难尽，界面丑，功能bug也多，唉 所以后面又重新用html写了个，界面样式和…
【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)
这篇css博客是参考B站黑马程序员–pink老师做的个人笔记,供平时复习使用,现分享给大家,喜欢的话请多多点赞收藏哦~~ 文章目录P62.css简介P63.css的语法规范P65.选择器总体概述P66.标签选择器P67.类选择器P70.ID选择器P71.通配符选择器P72.字体样式P78.文本属性P84.css的三种引入…
总结一下flex布局
flex布局
传统布局方案是基于盒状模型，依赖 display position float 方式来实现，灵活性较差；Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局
CSS3 弹性盒子是一种一维的布局&…
前端静态页面基本开发思路（一）
有不少刚入门前端的同学经常问我前端布局的问题，总是跟我说在面对学校布置的作业或者想自己搭建博客的时候不知道怎么下手，不知道怎么去写静态的页面，每当我解决了一个又一个同学的问题的时候，又有新的同学来问，故思来…
JavaScript 中 Location 对象介绍
目录
Location 对象 Location 对象属性
Location 对象方法
Location 对象方法 细解
1 window.loction.href
语法：
说明：
举例：
2 window.location.search
3 window.location.hash
4 navigator对象。
语法：
举例&am…
关于flex盒子padding-right/margin-right不生效
错误代码实例：
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"width…
CSS3-数据可视化
2D动画 - transform
CSS3 transform属性允许你旋转，缩放，倾斜或平移给定元素。 Transform是形变的意思（通常也叫变换），transformer就是变形金刚 常见的函数transform function有：
平移：transl…
B站看男神玩转Marionette ，Store邀你抽大奖！超能福利倾泻......千万Hold住了！
圣诞将临，Cocos Store先送上一波超能福利！幸运抽奖，活动扫码文末海报二维码Cocos Creator 3.4 中最重要的新增功能：动画系统 Marionette 的视频教程来了！视频从素材导入开始，演示了 Marionette 中状态过渡、…
CSS面试题汇总（四）
往期点这里：↓ CSS面试题汇总（一） CSS面试题汇总（二） CSS面试题汇总（三）
31. 什么是 FOUC? 如何避免
参考答案：
1. 什么是 Fouc(文档样式短暂失效)？ 在引用 css 的过…
快来看，我混入了一群设计师的圈子，还可以这样子！！！
今天是11.2，昨天已经开始血拼了。许多设计师最近都在疯狂赶图（预售页面、一大波主图、推广等等）。也有人在疯狂的下定金。除了这两件事，作为一名优秀的抠图佬，不~不~不~是作为一名优秀的设计师，我们还不能堕…
10.移动端笔记-响应式布局
1.响应式开发
原理：使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同的设备
2.响应式布局容器
响应式需要一个父级做为布局容器，配合子级元素实现变化效果 原理：在不同屏幕下，通过媒体查询改变这个…
【JavaEE】前后端分离实现博客系统（页面构建）
文章目录1 效果展示1.1 博客登录页面1.2 博客列表页面1.3 博客详情页面1.4 博客编辑页面2 页面具体实现2.1 博客列表页的实现2.2 博客详情页的实现2.3 博客登录页面的实现2.4 博客编辑页面的实现写在最后1 效果展示
1.1 博客登录页面
用于实现用户的登录功能，并展…
TwinCAT 3 ADS Monitor使用
TwinCAT 3 ADS Monitor使用 《20211022 TwinCAT ADS Monitor的使用方法》 《TwinCAT3.1从入门到精通》 TF6010 | TwinCAT 3 ADS Monitor 以上是基础知识，下面是实操
先在Instance中查看变量的偏移量，即地址 多变量读写测试 结果如下，4条指令…
一个输入框背景色改不了？去除浏览器自动填充的背景颜色
START
番茄又来写点啥啦，今天遇到一个有趣的事情，朋友找到我，说他改一个输入框的背景颜色，改了好久，叫我帮忙看看。我满脸问号？很难吗？当我了解到实际的需求，发现确实有点有趣&…
学习笔记-2022/1/20
1、黑马HTMLCSS
视频：p1-7 https://www.bilibili.com/video/BV1Kg411T7t9?spm_id_from333.999.0.0
渲染引擎web标准三个构成：HTML，CSS，JavaScript HTML：页面元素和内容（文字，图片，…
边框滑动按钮悬停动画 | CSDN创作打卡
1. 边框滑动按钮悬停动画页面效果 2. 设计思路 页面效果：四个按钮的边框上分别有对称的两个缺口，当鼠标移入时，缺口围着按钮移动，实现边框滑动按钮悬停效果。 HTML 标签选择： 一个 <div></div> 标签中嵌套…
基于Servlet+JDBC实现的基础博客系统＞＞系列2 -- 前端基础页面
目录
1. 博客公共页面样式 2. 博客列表页 3. 博客详情页 4. 博客登录页 5. 博客编辑页 1. 博客公共页面样式
导航栏以及背景图设置
<body>
<!-- 1.navigation 导航栏 --><div class"nav"><!-- logo --><img src"image/logo.png&q…
第四次网页前端培训笔记（CSS常用属性和盒子模型）
一、CSS属性
文字属性、颜色属性、盒子阴影和文字阴影、背景相关属性、边框属性、内外边距属性
1.文字属性
font-style : 取值
规定文字的样式
normal ： 正常的， 默认就是正常的
italic ： 倾斜的
font-weight : 取值
规定文字的粗细
…
css绘制一个Pinia小菠萝
效果如下： pinia小菠萝分为头部和身体，头部三片叶子，菠萝为身体 头部
先绘制头部的盒子，将三片叶子至于头部盒子中 先绘制中间的叶子，利用border-radius实现叶子的效果，可以借助工具来快速实现圆角的预想…
svg和canvas的区别
1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改，canvas输出的是一整幅画布。 2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是失真锯齿。而canvas输出标量画布，…
css3 盒子阴影 box-shadow
语法：box-shadow: h-shadow v-shadow blur spread color inset;h-shadow：必需的 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）v-shadow：必需的 从原点开始，沿y轴正…
vue elementui tooltip 内容省略以及字数过滤
表格方法
<el-table-columnwidth"130"prop"operationDescription"header-align"center"align"center"label"描述"><template slot-scope"scope"><el-tooltip :content"scope.row.operationD…
系统公告：滚动条（弹幕滚动）
html部分
//公告滚动内容
<div class"div2"><divref"div3Ref"class"div3">//公告前面图标<img src"image/logo/xinxitonggao.png"><el-buttontype"text"style"color: #303133;"click"…
微信小程序view等标签元素点击出现闪光效果
微信小程序view等标签元素点击出现闪光效果
1.问题描述
最近在搞微信小程序自己做一个view的按钮效果时，碰到view在点击的时候会出现背景高亮的效果，如下图所示： 2.解决办法
在全局样式文件app.wxss中添加一行代码即可解决：
p…
css3的多列布局（columns）
多列布局：可以实现web页面像报纸、杂志那样的布局
1. column-count：number；设置列数
2. column-gap：50px | 2em；设置列之间的间隙
3. column-rule：设置列之间的分隔线
复合属性：column-rule…
css3文本效果——文字阴影和文字换行
1. 文字阴影：text-shadow
text-shadow: h-shadow v-shadow blur color;
text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
值描述测试h-shadow必需。…
模块化相关规范及webpack基础知识
模块化相关规范及webpack基础知识
一：模块化相关规范
1.概述： 传统开发模式的主要问题： a.命名冲突 b.文件依赖 可通过模块化解决： 模块化：就是把单独的一个功能封装到一个模块（文件）中&#…
标题：电商后台管理系统——主页
标题：电商后台管理系统——主页
添加主页组件: 1.router.js中添加主页组件路由
const router new Router({routes: [...{ path: /home, component: Home }]
})2.login.vue中登录成功后跳转到主页页面 this.$router.push(/home)3.在components文件夹并新建Home.vu…
标题：电商后台管理系统——数据统计
标题：电商后台管理系统——数据统计 转: vue脚手架中简单使用echarts 折线图为例. A.1.安装 npm install echarts -S 2 main.js中引入echarts import echarts from ‘echarts’; Vue.prototype.$echarts echarts; 3 组件中 import echarts from ‘echarts’; C.导入…
标题：电商后台管理系统——用户列表
标题：电商后台管理系统——用户列表
绘制用户列表基本结构 A.使用element-ui面包屑组件完成顶部导航路径 B.使用element-ui卡片组件完成主体表格 搜索和添加用户结构： -使用element-ui输入框完成搜索框及搜索按钮： 组件Card)，再使…
基于Vue开发电商后台管理系统项目回顾——前期准备
标题：基于Vue开发PC端电商后台管理系统项目回顾——前期准备
功能： 管理用户账号（登录，退出，用户管理，权限管理）， 商品管理（商品分类，分类参数，商…
Css+Html 特效实现3D旋转爱心+立方体（一）
立方体需要考虑的因素:如何将平面的2D图形转换为3D图形。解决方法:先将平面上的6个DIV拼接在一起。形成一张类似由3d立方体图形展开的平面图。如图所示:知识点：将DIV合在一起，将会用到定位的知识，将立方体包起来需要…
如何解决CSSPositionSticky不起作用的问题？
sticky属性不生效：
检查浏览器兼容性； 检查是否指定了阈值； 检查 Safari 的供应商前缀； 检查祖先元素是否具有overflow属性集； 检查height父属性是否未设置； 检查父元素是否为 Flexbox。 检查浏览器兼容性…
IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题
在iOS系统中打开网页，input框输入时，输入框获取焦点的时候页面会放大，如果没有经过设置，页面放大之后就不会自动还原。使内容撑开浏览器，底部产生左右滑动的滚动条&#…
一小时学会CSS （上）
1、CSS是什么？
CSS （Cascading Style Sheets）层叠样式表，是一种来为结构化文档，例如HTML 、XML 添加字体，间距和颜色等样式的计算机语言,扩展名是.CSS 。 2、CSS语法规则
CSS写在哪里，CSS写在…
自定义自适应display.css代码
调用element-ui的display.css出现bug，索性自己写一个 ，留档保存 /* hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸…
js函数创建和执行中作用域链都进行那些操作
1. 函数创建和执行的的流程
//创建函数
function compare(){}
//执行函数
compare()1.创建函数 function compare(){}
1.1在创建 compare()函数时，会创建一个预先包含全局变量对象的作用域链， //函数内部存在一个 属性--[全局变量对象]
1.2这个作用域链…
css行内元素、块元素、行内块元素的区别
行内元素的特点： 1.和其他元素在一行显示 2.元素的宽度、高度、行高及底部边距不可编辑 3.元素的宽度就是它包含的文字或图片的宽度，不可改变 4.行内元素只能容纳纯文本或者是其他的行内元素（a标签除外，a里面不能放自己࿰…
【CSS】基础笔记——第七天
▊ 元素的显示与隐藏 ▍ display（最常用）
我们熟悉的display还可以设置为display: none
这有两层含义：隐藏；不再保留位置 ▍ visibility 可见性
默认值为visibility: visible，即可见
还以取值：visi…
【CSS】基础笔记——第二天
▉ CSS复合选择器
▶ 后代选择器
又称为包含选择器
可以选择元素或元素组的子孙后代；原理是根据这一整个父子关系链进行非严格匹配；优点是可以匹配一个特定的标签组，减少代码量
loli ul li { color: pink; } /* 快速匹配到<div class…
【CSS】基础笔记——第一天
▉ Hello,CSS
▶ CSS（Cascading Style Sheets），
称为CSS样式表、层叠样式表、级联样式表
▶ 作用： 设置版面的布局和外观显示样式 ▉ CSS样式表
▶ 行内式（内连样式）——控制一个标签 <div style&qu…
css3 flex弹性布局详解
css3 flex弹性布局详解
一、flexbox弹性盒子
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。…
css:opacity影响子元素透明度
问题：为父元素设置opacity做透明效果时。子元素会继承这个属性导致子属性也有透明效果。
<body><div class"parent"><div class"child"></div></div></body><style>.parent{width: 200px;height: 2…
html 苏宁首页,简单实现
文章目录效果图:0. 下载链接1. 视口标签2. 搜索模块3. banner模块4. 广告模块5.导航栏模块效果图: 采用remmedia布局,页面大小会随浏览器窗口大小发生变化
0. 下载链接
链接：https://pan.baidu.com/s/1K51YENrKnnluvjg5WwIgcw 提取码：9999
1. 视口标签…
flex布局以及原理
目录一. flex介绍二. flex布局父项常见属性三. 主轴与侧轴方向flex--direction四. justify-content设置主轴上的子元素排列方式五. align-items设置侧轴上的子元素排列方式(单行)六. flex-wrap设置子元素是否换行七. align-content-设置侧轴上的子元素的排列方式(多行)八. alig…
Cesium入门之八：Cesium加载矢量数据
目录 一、什么是矢量数据二、Cesium支持的矢量数据格式KML格式KmlDataSource CZML格式CzmlDataSource GeoJSON格式GeoJsonDataSource 三、Cesium加载GeoJSON数据格式的中国地图示例 一、什么是矢量数据
矢量数据是用于描述地理空间几何特征的一类基于向量的地理信息数据&#…
work-notes（8）：如何制作卡片凹陷？如何制作梯形？如何制作有凹陷的盒子？如何制作透明凹陷？
时间：2022-04-20 文章目录1、实现描述2、思路分析3、针对 头部凹陷三盒子摆放方式4、给两边盒子的属性5、简单代码实现例子6、总结1、实现描述
我们公司开发了一个视频会议网站，有一个会议列表卡片头部是有一个透明凹陷的，NND还没见过这样无…
Hover.css动画库的使用
目录
1、 Hover.css是什么？
2、引入
2.1、整个文件引入
2.2、复制所需要的代码
案例：
1. 卷边效果
2. 调整大小的卷边
类别： 1、 Hover.css是什么？
Hover.css是一个CSS3鼠标悬停的动画方案，里面包含了许多纯c…
animate.css 没有反应的总结
前言：animate.css没反应多半的版本问题
昨天 在vue3中正常的安装使用animate.css，
cnpm install animate.css --save引入
import animated from animate.css
Vue.use(animated)使用
<transition name"fade" enter-active-class"an…
通过js来判断是否是横屏如果是就自刷新页面解决横屏之后只有屏幕一半宽度的问题
判断页面是横屏还是竖屏 window.addEventListener("load", rotate, false);window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", rotate, false);function rotate() {if (window.orientatio…
【css3实现华为充电】那些你没想到的CSS效果之华为充电效果（附源码下载）
【写在前面】今天是高考的第二天，在这里我也祝各位学子能够旗开得胜，进入自己理想的大学，借着今天这个吉日我就和大家介绍一下如何用css实现华为充电效果。 涉及知识点：CSS3特效，华为充电特效实现，CSS属性f…
2023年前端面试高频考点HTML5+CSS3
目录
浏览器的渲染过程⭐⭐⭐
CSS 、JS 阻塞 DOM 解析和渲染
回流（重排）和重绘⭐⭐ 选择器
ID选择器、类选择器、标签选择器（按优先级高到低排序）⭐⭐
特殊符号选择器（＞,,~，空格࿰…
前端基础复习--22移动端模拟器？去访问一些网站的PC端和移动端？viewport视口？flex？grid？
1. 移动端模拟器？ 切换平台之后，一定要重新刷新浏览器。
2. 去访问一些网站的PC端和移动端？ 大一点的网站都是分开开发的，PC端一套代码，移动端端一套代码。 访问淘宝网 -> 后端检测当前设备 -> 如果是PC…
让CSS布局呈现您的个性：学习常见布局方式
本文介绍常用的css布局：
三栏布局两列自适应布局元素居中
盒模型简介： 三栏布局
中间列自适应宽度，两边宽度固定
1. 圣杯布局
<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */.con…
css总结10（动画）
前言 动画实现就两个环节：创建动画(keyframes)，绑定到元素(animation)； 所以理清这两个知识，动画就很简单； 入门示例
.box {width: 200px;height: 200px;background-color: red;animation: am1 5s;
}
keyframes am1 …
flex布局一个很有意思的事情----align-items你不知道的效果
事情的经过是这样的，我在flex容器的子元素中没有设置高度，其高度是按照该子元素的子元素（父元素的孙子元素）内容撑开。 同时我在其同级的子元素下渲染了一个同样没有设置高度的不同ui（假定它没有任何内容）&…
【css】CSS层叠样式表二
目录
一、Emmet语法
1、快速生成HTML结构语法
2、快速生成CSS样式语法
3、vscode自动格式化代码
二、CSS的复合选择器
1、什么是复合选择器 1.1后代选择器（重要）
1.2子选择器（重要）
1.3并集选择器（重要&…
transition过渡动画(?)
在MDN可执行动画的CSS属性中查询
CSS animated properties - CSS：层叠样式表 | MDN
transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
◼ transition-…
vue3实现多条件筛选时，联动acitve样式
介绍
在实现多条件筛选时，鼠标hover或者点击切换，会给当前选中项添加active样式，各个筛选项之前互不影响。如下图所示，主要实现了招聘信息的筛选条件，包括城市和职位信息，当鼠标hover时，会添加一个灰色的背景；当点击切换时，会添加一个蓝色的背景色。但是两个筛选条件…
css学习-内容加载占位动画（渐变动画）
文章目录 学习链接纯CSS渐变动画结合vue指令简单使用 学习链接
Git Hub前端50天50个项目 | 第24 内容文本
纯CSS渐变动画 <style lang"scss" scoped>
.card-wrapper {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;
…
【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
文章目录一、Banner 栏右侧课程盒子测量及样式1、盒子尺寸测量2、课程表头部样式3、列表样式4、最下方按钮样式二、Banner 版心盒子模型右侧课程栏代码示例1、HTML 标签结构2、CSS 样式3、展示效果绘制下图矩形框内容 : 一、Banner 栏右侧课程盒子测量及样式 1、盒子尺寸测量 课…
左中右 三栏式 布局
一、中间 自适应，左右两边 宽度固定
方法1：box容器 Flex布局，center设置为 flex:1
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible&q…
记录-css实现交融文字效果
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 CSS是有魔法的，我们今天来实现一个CSS的动画效果，只需要几行代码就可以搞定。 第一步、我们要将一行文字从中间展开 <!DOCTYPE html>
<html lang"en">
&…
FE_CSS 页面布局之圆角边框 盒子阴影 文字阴影
1 圆角边框
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。
border-radius:length;参数值可以为数值或百分比的形式如果是正方形，想要设置为一个圆，把数值修改为高…
css实现缺角功能、渐变、旋转、clip-path属性、矩形、边框、折角
文章目录1、缺角矩形2、缺角边框3、折角矩形4、clip-path属性1、缺角矩形 使用css3渐变实现缺角矩形，关于linear-gradient属性的介绍请移步至MDN。 ☺☺☺html部分☺☺☺
<div class"rectangle_box"><div class"left_top"></d…
矩形-圆动画转换动画效果
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>矩形-圆动画转换动画效果</title><style>div{width:200px;height:200px;background-color:blue;}transition:{border-radius:2s,width:2s,…
css小兔鲜项目搭建
目录 精灵图
精灵图的使用步骤
背景图片大小
background连写
文字阴影
盒子阴影
过渡
骨架标签
SEO三大标签
版心的介绍
css书写顺序 项目结构搭建 精灵图 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图 优点…
前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈
前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈 ， 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id13085
效果图如下： #### 使用方法
使用方法
<!-- 分享 ref: 设置一个唯一ref contentHeightÿ…
2. CSS的元素显示模式
了解元素的显示模式可以更好的让我们布局页面. 1.什么是元素的显示模式 2.元素显示模式的分类 3.元素显示模式的转换
2.1什么是元素显示模式
作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。 元素显示…
移动端项目开发总结（一）
移动端项目开发总结（一）
前阵子做租赁项目，风风火火的上线，趁现在还没忘，把用到的东西整理以下，算是对于这个项目的回顾吧。
特效一 ： 移动端适配
需求
移动端适配，采用rem单位。…
专高六第一次项目答辩学到的知识点【未完成】
目录标题 1、animation和traslation定义动画的区别？2、微信小程序的支付流程？3、canvas和svg有什么区别？4、app自定义导航栏，如果说打包成小程序导航栏如何适配？4、express权限，接口权限？5、一键…
分享一个500页面给大家
先看效果： 再看代码：
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>500页面</title><style>body,html {padding: 0;margin: 0;font-family: Quicksand, sans-s…
css动画效果之transition
transition-property规定设置过渡效果的 CSS 属性的名称。属性名属性值none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。使用方式transition-property: width,background;/* 多个效果可用逗…
WPF__Viewport3D 学习记录
1、相机的摆放位置和姿态 Position 是指定照相机的位置，注意Z轴的坐标，如果Z轴值大于模型的Z轴值，那么镜头就在物体前面，反之在物体后面。因此，你可以设置 LookDirection 来调整相机的方向，Position是相机的…
fastadmin后台登录页修改
直接替换就行
<!DOCTYPE html>
<html lang"{$config.language}">
<head>{include file"common/meta" /}<style type"text/css">body {color: #999;background-color: #f1f4fd;background-size: cover;}a {color: #444;…
JavaScript拖动元素在一个范围内移动
基于 jQuery移动范围由 div 搭建(div 模仿表格)，卡片的移动不允许超出该范围移动卡片会有一个淡蓝色卡片的标记出将要放置的位置有禁止放置标记的位置，不允许卡片放置（会放到前一个可放置的位置）卡片放置会覆盖单元格中的文字卡片…
css伪元素 before after的用法
在日常的代码中经常会发现类名带有::before 或者::after，但是这两个到底是什么呢？
举个小demo
<body><div class"box">我的橘猫</div>
</body>
<style>.box{background-color: pink;width: 300px;height: 300…
第三次网页前端培训笔记（CSS基础和选择器）
一、CSS基础
如果学习CSS则要首先学习HTML，CSS是指层叠样式表，首先要了解CSS的基础语法，包括id和class选择器，创建，背景，文本，字体，链接样式，列表样式，表格&…
34.出租车动画效果|
效果 (源码网盘地址在最后) 源码
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Taxi Animation Effects</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<…
27.炫酷侧边栏菜单|
效果 (源码网盘地址在最后) 关注公众号《大迁世界》，查看更多视频教程！
源码
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sidebar Navigation Menu</title>
<link rel="stylesheet" type="text/css" href=&q…
day05：节点操作
目录一、删除自定义属性二、设置innerText和innerHTML的区别三、获取innerText和innerHTML的区别四、tab栏五、tab栏升级六、节点的介绍复习： 第一、列表隔行换色，列表的高量显示等等 第二，显示隐藏二维码 第三、搜索效果：获取焦点…
使用html+CSS绘制三角形
使用htmlCSS绘制三角形前言一、绘制正方形二、进行外边框填充三、把盒子的宽高设置为0四、要哪边的三角形就把哪边设置为透明五、最终化简代码前言 使用htmlCSS绘制三角形,三角形经常出现，如下是绘制三角形教程 一、绘制正方形
<!DOCTYPE html>
<html lan…
仿京东放大镜效果的实现
仿京东放大镜 （1） 整个案例可以分为三个功能模块 （2） 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能 （3）黄色的遮挡层跟随鼠标功能。 （4&…
通过css实现隐藏元素方法
**实现方式 通过css实现隐藏元素方法有如下：
display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip-path display:none 设置元素的display为none是最常用的隐藏元素的方法
.hide {display:none;
}将元素设置为display:…
CSS选择器进阶1.2
一，复合选择器 1.1后代选择器：Space
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素。
选择器语法（选择器1为父选择器，选择器2为后代选择器）：
选择器1 选择器2{CSS…
使用CSS伪元素制作动感超酷的hover动画
css 有很多神奇的效果都是使用 CSS 伪元素利用视觉差来制作的，以前没怎么深入的研究过 css，这次复习 css 的知识点才恍然大悟，原来 css 这么 cool。
先上效果：
动画实现原理
这个组动画的实现原理很简单，前边是一个…
css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin
注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的
1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸
注意： Internet Explorer 9 要求前缀 -ms- 版本&#x…
【概念大全（关系，码，选择，投影，连接，运算）】第二章 关系数据库
第二章 关系数据库 1. 关系的基本概念1. 什么是域2. 笛卡尔积3. 笛卡尔积中 有意义的子集 就是关系4. 候选码 （是唯一标识符 并不是用 只有一个进行判断）5. 全码（一行中都不重复）6. 主码（候选码选一个就是主码…
【CSS系列】第八章 · CSS浮动
写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正࿰…
入门前端框架Layui
🏭 作者：哈桑c（CSDN平台） ⛺️ 专栏：前端自学记录 文章目录文章简介说在前面的话需要具备的基础1、Layui 的介绍2、Layui 的下载和使用3、Layui 示例4、Layuimini layui-vue结语文章简介 本文为大家介绍前端 UI 组件…
7个既可学习又可玩游戏的CSS在线学习网站
学习编码并不容易，尤其是 CSS，所以，在本文中我将跟大家分享一些既能学习CSS知识技能有可以玩游戏的网站，以有趣好玩的方式来帮助你提高学习兴趣以及解决问题的能力。现在，就让我们进入一些在线学习CSS的游戏网站列表&a…
关于CSS :hover选择器的用法（控制子元素样式、控制同级元素样式）
关于CSS :hover选择器的用法（控制子元素样式、控制同级元素样式）
1、hover定义： :hover 选择器用于选择鼠标指针浮动在上面的元素。
提示：:hover 选择器可用于所有元素，不只是链接。
注释：在 CSS 定义中…
前端web入门-CSS-day03
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录
CSS 初体验
CSS 定义
CSS 引入方式
选择器
标签选择器
类选择器
id选择器
通配符选择器
画盒子
…
面试 - CSS基础
面试 - CSS基础 重绘与回流什么叫优雅降级和渐进增强？两者有什么区别？谈谈盒子模型？谈谈你对 BFC 、IFC、 GFC、FFC规范的理解。常见的盒子垂直居中的方法有哪些请举例3种？清除浮动的方法有哪些？设备像素、css 像素、设…
移动端 H5中，1px 问题和响应式布局
在移动端的 H5 开发中，存在两个常见的问题：1px 问题和响应式布局。下面是对它们的简要总结：
1px 问题：
在高像素密度的移动设备上，由于设备像素比（Device Pixel Ratio，简称 DPR）大…
太阳升起和落下(长文警告)
今天分享一个太阳升起落下的动画场景。
有朋友问我为什么只发代码不做说明，今天我们尝试下对代码进行注解说明一下。 首先这个场景大致的可拆分为4个部分：太阳/月亮，右下角的按钮，天上的云和最显眼的建筑。 我们先做一个按钮&am…
04-CSS3-渐变色、2D转换、3D转换
一、渐变色
CSS渐变色（Gradient）是指在元素背景中使用两种或多种不同的颜色进行过渡，超过两个颜色可以形成更为细腻的渐变效果。常见的CSS渐变色有线性渐变和径向渐变。
1. 线性渐变：Linear Gradients 向下/向上/向左/向右/对角…
html+css+js 点击屏幕产生泡泡的效果
目录1.效果图2.总体思路2.1让body全屏填充2.2点击页面的位置 获得位置2.3生成div 插入到body 放到点击的哪里2.4给div 添加通用的样式 圆角和定位2.5给div 添加动画2.6动画结束后就删除div3源码分享htmlcssjs1.效果图 2.总体思路
1.布局好样式 让body全屏
2.点击页面的位置 获…
3D 旋转相册 立方体的盒子 相册(源码分享)
效果图 css代码 *{margin: 0;padding: 0;
}
body{display: flex;justify-content: center;align-items: center;background-color: #333;min-height: 100vh;perspective: 1000px;
}
//构建 3D的空间
.con{position: relative;width: 300px;height: 300px;transform-style: pres…
【前端基础】标准盒模型和IE盒模型（box-sizing:border-box）
盒模型
在Web开发中，每个元素都被视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。 盒模型定义了元素在文档中所占据的空间以及如何计算其尺寸。 在CSS中，有两种盒模型，即标准盒模型和IE盒模型。
标准盒模型…
Less基础速学 —— 混入、运算、继承
Less 混合 在上一篇内容中就已经简单的了解了关于CSS预处理器 —— Less，本篇就往下讲Less中的混合，什么是混合？就是将一系列属性从一个规则集引入到另外一个规则集的方式。下面来看一下它的混合方式有哪些？
普通混合
<div …
JS高级----对象的继承
什么是继承？ 一个对象继承另一个对象，可以使用父级对象的属性和方法，共享资源，避免大量浪费系统资源 prototype 属性的作用： 原型对象的所有属性和方法，都能被实例对象共享。 如果属性和方法定义在原型上&…
CSS基础——盒子模型
目录 简介
盒子模型组成
内容区
内边距
边框
border-width
border-color
border-style
border
外边距
负值
auto
简写属性
垂直外边距的重叠
浏览器默认设置
内联元素的盒子 简介
在网页中，一切都是可以看作为“盒子”。
在css处理网页的时候&…
nodeJS+express+mysql模块封装之服务器渲染小demo
nodeJSexpressmysql模块封装之服务器渲染小demo
创建一个小项目 npm init下载相关中间件（根据package.js来下载）package.js 目录结构 index.js代码
const express require(express);
const path require(path);
const template require(art-templat…
Vue 过渡与动画的使用
transition 标签的作用：在插入 更新或 移除 DOM 元素时 可以给元素添加动画效果.
transition 标签配合的 class 类有： - v-enter:进入的起点。 - v-enter-active:进入时的效果。 - v-enter-to:进入的终点。 - v-leave:离开的起点。 - v-leave-active:离…
【14.HTML-移动端适配】
移动端适配 1 布局视口和视觉视口1.1 设置移动端布局视口宽度 2 移动端适配方案2.1 rem单位动态html的font-size；2.2 vw单位2.3 rem和vw对比2.4 flex的弹性布局 1 布局视口和视觉视口 1.1 设置移动端布局视口宽度
避免布局视口宽度默认980px带了的缩放问题,并且禁止…
批量制作左右镜像效果抖音视频
怎么批量制作左右镜像效果的视频，首先我们在手机上安装应用程序“王者剪辑app”，启动软件并进入一键剪辑中的“特效应用”功能，
批量导入或导入一个视频，
接着选择“左右镜像”效果类型，然后点击界面右上角的对勾按…
提升你的WordPress文件管理体验 - 下载FileBird Pro多媒体文件管理插件！
对于那些使用WordPress建立和管理网站的人来说，优秀的文件管理工具是不可或缺的。如果你正在寻找一款强大而高效的多媒体文件管理插件，那么FileBird Pro将是你的理想选择！通过下载FileBird Pro插件，你将能够轻松组织、管理和访问你…
CSS-HTML知识点与高频考题解析
知识点梳理 选择器的权重和优先级 盒模型 盒子大小计算margin 的重叠计算 浮动 float浮动布局概念清理浮动 定位 position文档流概念定位分类fixed 定位特点绝对定位计算方式 flex布局 如何实现居中对齐？ 理解语义化 CSS3 动画 重绘和回流 选择器的权重和优…
幸运大转盘抽奖（前端uniapp）
幸运大转盘抽奖（前端js）在一个商城项目中用到了大转盘抽奖，来此记录一下，样式和图片自己微调一下就好了！！！<template><view class"collection"><luckydraw class"…
CSS面试题：什么是BFC？
CSS面试题：什么是BFC？css中的BFC是什么？常见的定位方案BFC的概念形成BFC的条件BFC的特性BFC的作用归纳总结演示代码完整演示css中的BFC是什么？
本质：BFC就是符合一些特性的HTML标签。 在了解BFC的具体概念前ÿ…
CSS3绘制方格背景图类似于ProcessOn 绘制面板
效果图： <div class"canvas">中心画布</div>.canvas {border: 1px solid #f2f2f2;background: -webkit-linear-gradient(top,transparent 15px,#f2f2f2 15px,#f2f2f2 16px,transparent 16px,transparent 31px,#f2f2f2 31px,#f2f2f2 32px,tran…
前端基础复习--19 CSS3提供了扩展背景样式？CSS3渐变？字体图标？
1. CSS3提供了扩展背景样式？⭐️跟背景色无关
background: url(./img/list_photo.png) no-repeat; 用background写 别用background-image，这样写不了no-repeat background-size : 背景图的尺寸大小 cover : 覆盖 contain : 包含 b…
前端复习--18 3D动画？
1. 3D操作？ transform: rotateX() : 正值向上翻转 rotateY() : 正值向右翻转 translateZ() : 正值向前，负值向后 值不能超过景深，不然就比整个屏幕还要大了 scaleZ() : 立体元素的厚度 3d写法 scal…
【前端基础篇】一文快速学会 HTML5 + CSS3 入门知识
HTML5概述
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation）
HTML5是HTML最新的修订版本，2014年10月由万维网联盟&…
阿里iconfont的Symbol图标颜色无法改变
vue3里面引用阿里图标iconfont使用Symbol图标颜色无法改变
今天在vue3里面引入图标，去阿里图标库看了一下，Symbol可能是以后的趋势，就使用这个方式在项目里，中途一切顺利，就是等到改变图标颜色死活改不动，…
view文字过多，多出部分省略号显示
overflow: hidden; /* 隐藏溢出 */
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的…
css基础知识二：CSS选择器有哪些？优先级？哪些属性可以继承？
一、选择器
CSS选择器是CSS规则的第一部分
它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式
选择器所选择的元素，叫做“选择器的对象”
我们从一个Html结构开始
<div id"box"><div class"o…
前端基础复习笔记--03文本修饰标签？图片标签？路径的引入？链接标签？锚点？特殊字符？
1.文本修饰标签？ 强调 -> 双标签 : <strong></strong>、<em></em> 区别： 1. 写法和展示效果是有区别的，一个加粗、一个斜体 2. strong的强调性更强，em的强调性稍弱。 下标 : …
CSS粘性定位 - 它的真正工作原理！
本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。 更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，包含一线大厂面试完整考点、资料以及我的…
CSS常用水平垂直居中的几种方法
CSS常用水平垂直居中的几种方法 1. 子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半2. 子元素相对父元素绝对定位，子元素top，left值为50%，transform&a…
3d开发所需要知道的坐标系
目前学习了mapbox, three.js, webgl, cesium的过程中，发现坐标系是一个非常重要的东西，目前我所了解到的坐标系对其进行一个总结，先粘贴上图片： 1. 屏幕坐标系(平面坐标系，笛卡尔2坐标系，像素坐标系&#x…
常用的CSS命名规则
一.注释的写法: /* Footer / 内容区 / End Footer */
二.id的命名: 页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：co…
如何利用CSS制作简易旋转木马效果
最近回顾动画知识的时候，看到了3d相关的知识，想到了当时学CSS 3动画的时候做的一个旋转木马还挺好看的，今天就来说说怎么用CSS3的变形（transform）和动画（animation）的相关知识做一个简单的3d版的…
css变量在静态饼图与进度条上的使用
在项目中，会出现圆形静态饼图或进度条的形式展现当前的进度；或者根据倒计时的进度，展示进度条的剩余比例；这里使用css的变量，结合css的样式来展示进度的情况，也可结合javascript给该css的变量赋值ÿ…
使用background多背景与border-radius圆形 - 绘制icon的图标与特别样式的应用
使用css的属性制作一些小众的样式，减少使用对icon图片导入；
使用background多背景实现icon的加减效果
这里应用多背景的属性，书写加减后的图标；代码示例如下：
<style>
.btn-add,
.btn-sub {width: 1.5rem; he…
css书写有关:hover/:active/:focus的用户行为的伪类-为提高用户体验
用户行为的伪类，指的是与用户行为相关的使用；
:hover的使用，不适用于移动端；
：hover的体验优化与延时的问题
（1）:hover的触发是即时的，当设置此伪类时不经意的划过就会覆盖目标元…
CSS属性及CSS3特性学习笔记
CSS的发展历程
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些…
网页设计-动态雪花背景源码
源码下载地址 下载到本地文件，浏览器打开HTML文件即可看到效果
html5散开变大雪花动画特效（渐变） HTML源码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>html5散开变大雪花动画…
HTML5CSS3_day02
HTML5 第二天
一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤：
给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度
div{transform: rotate(0deg);
}二、三角
代码演示
二、设置…
Vue组件、组件传值和组件插槽
Vue组件、组件传值和组件插槽
一、Vue组件：
1.组件 (Component) 是 Vue.js 最强大的功能之一，通过组件可以扩展 HTML 元素，封装可重用的代码； 2.组件是可复用的 Vue 实例，与 new Vue 接收相同的选项，例如…
漫画 | 人到中年，一地鸡毛
点击上方“蓝色字体”，选择“设为星标”做积极向上的前端人！今天这篇漫画，纯属虚构，虚构中又还有一点点真实，真实的反映大部分人（不仅仅程序员）中年的生活与无奈.事故主人公：大刘/某…
【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )
文章目录 一、水平排列的图片链接样式及核心要点1、实现效果2、HTML 结构3、CSS 样式 二、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果 一、水平排列的图片链接样式及核心要点 1、实现效果 实现如下样式 , 水平排列的图片链接 , 第一个图片占宽度的 50% , 第二第三个 …
02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之：HTML5CSS3入门系列：Web大前端时代之：HTML5CSS3入门系列 - 毒逆天 - 博客园
1.结构元素
可以理解为语义话标记，比如：以前这么写<div id"nav"></div> 现在偷懒写：&l…
htmlCSS-----元素类型
目录
前言：
元素类型 1.块级元素
2. 行内元素
3. 行内块元素 前言： 今天我们就学习CSS中的元素的类型，了解网页元素类型的相关性质，有助于我们去对网页进行排版处理。下面就一起去看看吧。
元素类型 常见元素类型有ÿ…
实用的 CSS3 参考手册和代码生成工具
CSS3技术现在越来越成熟，通过CSS3的一些新特性（如box-sizing、边界半径、文字阴影、渐变等）创建的效果已经令前端开发者兴奋不已。使 用CSS3进行前端设计是未来的发展趋势。因此，如果你是一名前端设计师，就需要掌握这些…
【数据可视化】数据可视化Canvas
1、了解Canvas
◼什么是Canvas ---- Canvas 最初由Apple于2004 年引入，用于Mac OS X WebKit组件，为仪表板小部件和Safari浏览器等应用程序提供支持。后来，它被Gecko内核的浏览器（尤其是Mozilla Firefox），…
css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin
1. transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果
注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow&…
# vue# 【九】 个人中心的制作
Z## vue个人中心的制作 个人中心的制作
在实际开发里面，经常会有一些登录页需要进行编写，例如下面这些类型 而这些版面的制作，比较讲究的是思路问题
例如我们想要制作一个登录页，点击就可以输入名字，并且修改名字
整…
做一个比较有意思的条目选择动画 css
做一个比较有意思的条目选择动画 css
效果 如何实现
原理就是将母元素设置成 relative 然后在四边放四个 absolute 的色块。 初始状态是opacity 为 0 的，当母元素 hover 的时候，将四个边角色块设置 opacity: 1 并偏移指定量。
html
<div class&qu…
input标签选中样式设置及input密码框可视设置
input标签选中样式设置及input密码框可视设置
关于input标签样式使用的一些总结： 1、input标签选中时的光标紧贴边框的问题： input标签默认光标会紧贴边框，设置padding样式可解决；
2、input标签选中样式： input标签可…
【CSS 06】图标 icons 链接 link 光标 cursor
CSS 图标 icons链接 link更多有趣的链接样式 图标 icons
向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome
将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）下面的图标库中的所有图标都是可缩…
elementui的文件上传功能-.上传文件-带参数-手动
elementui的文件上传功能-.上传文件-带参数-手动
<el-form :inline"true" :model"formInline" ref"formInline" class"demo-form-inline" size"mini" style"padding-right:10px;padding-left:10px;padding-top:20p…
浮动、(display、float) 2022-2-11
一、浮动
1.1 display
这个也是一种实现行内元素排列的方式，但我们很多情况都是用浮动 通过display可以转换块元素和行内元素
1.1.1
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>di…
文本样式、文本阴影和超链接伪类 2022-1-25
一、文本样式
1.1颜色
rgba(0,255,255,0.1) 0.1是透明度
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>Title</title><!--颜色rgb 0~Frgba A：0~1--><style>h1{c…
CSS——display显示属性
CSS定义中的display属性，封装了显示类型这个概念。所谓的显示类型，就是将浏览器如何计算面积、如何计算位置等的规则，整合成一组计算规则，这样的一组计算规则就称为显示类型。在浏览器上运行网页时，网页文件里每个标签…
HTMLCSS Day02 CSS简介与选择器
文章目录 1.CSS32.语法2.1.CSS声明（CSS declarations）2.2.CSS声明块（ CSS declaration blocks）2.3.CSS规则集2.4.CSS可读性- 空白（ White space）- 注释（ Comments）- 速记写法&#x…
vue3中animate.css+ wow.js的使用
animate.css
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。animate.css中文网
wow.js
滚动时显示动画。wow.js官网
1、通过cnpm安装wow.js和animate.css
cnpm install wowjs --save-d…
前端面试 --- CSS面试题
1. 说一下CSS的盒模型。 在HTML页面巾的所有元素都可以看成是一个盒子 盒子的组成: 内容content、内边距padding、边框border、外边距margin 盒模型的类型: ①标准盒模型：margin border padding content ②IE盒模型：margin content(border padding)…
「HTML和CSS入门指南」元素类型
元素类型 HTML元素按其功能和用途可以分为不同的类型，每个类型都有其特定的用途和属性。 1.块级元素（Block-level elements）
块级元素通常用于创建页面的主要结构，如段落、标题、列表、表格等。它们会占据一整行，并在前后创建一个换行符。
例如，下面的代码是一个包含标…
css浮动float:left|right
浮动浮动1.浮动是什么2.为什么要用浮动呢3.怎么做4.会怎样5.浮动产生的问题浮动
1.浮动是什么
是一种css的样式 div{ float:left;//right } 1.可以让元素脱离文档流 取消在标准流中所占的位置 2.如果是left 靠近父元素的左边排列 如果是right 靠近父元素的右边排列 2.为什么…
【基础概念】基础概念:使用Jsonp 实现跨域的+【[项目深入】调用百度的jsonp完成搜索功能
基础概念:使用Jsonp 实现跨域的[项目深入]调用百度的jsonp完成搜索功能一基础概念:1.Jsonp |是什么?2.Jsonp |为什么?3.Jsonp |怎么做?4.Jsonp |会怎样?二项目深入:1.项目介绍2.获得百度的查询连接 之后赋值给script3.分析url4.页面布局5.样式处理1.清控全局默认样式2.body…
canvas制作入门的验证码[源码]
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>验证码</title><style>canvas{display: block;margin: 50px auto;box-shadow: 0 0 0px 2px #e91e63;}.mes{display: flex;width: 500px;he…
HTMLCSS Day08 CSS transition过渡
文章目录 CSS过渡-Transitions-过渡三要素-过渡触发-transition-property 规定应用过渡的 CSS 属性的名称。-transition-duration 定义过渡效果花费的时间。默认是 0。-transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。-transition-delay 规定过…
JavaScript Day03 对象详解
文章目录 1. 什么是对象?2.对象的创建2.1 字面量模式2.2 构造函数模式 3 对象的访问4.新增删除对象中的属性5.Object显示类型转换(强制类型转换)5.1-ECMAScript中可用的3种强制类型转换如下：-Boolean(value)-String(value)-Number(value) 5.2-Object类型到Boolean类…
2，vue播放视频之—问题。引入多个视频，视频大小不一样要求铺满全屏问题，停止视频
1，视频全屏铺满父级元素 一行属性：object-fit: fill; 没加之前： 加了之后： 2，停止视频 destroyed () {for(var j0;j<this.players.length;j){this.players[j].stop();}}看图：
如果第一个格式的文件没…
【CSS3系列】第八章 · 伸缩盒模型
写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正࿰…
CSS 实战: Switch 按钮开关(checkbox 实现)
CSS 实战: Switch 按钮开关(checkbox 实现) 文章目录CSS 实战: Switch 按钮开关(checkbox 实现)正文1. 效果2. 代码实现2.1 html 结构2.2 外框 wrapper 底座 box 样式2.3 白色按钮 but2.4 表情符号其他资源参考连接完整代码示例正文
1. 效果 2. 代码实现
2.1 html 结构
<…
CSS3新增了哪些新特性？
一、是什么
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观
css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3 里都是可以使用的…
css基础知识十二：CSS3常见动画有哪些？实现方式？
一、是什么
CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块
即指元素从一种样式逐渐过渡为另一种样式的过程
常见的动画效果有很多，如平移、旋转、缩放等等ÿ…
HTML基础知识三CSS基础知识七
1. HTML5 的新特性
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
…
JavaScript变量和数据类型总结
📜个人简介 ⭐️个人主页：微风洋洋🙋♂️ 🍑博客领域：编程基础💡,后端💡,大数据,信息安全 🍅写作风格：干货,干货,还是tmd的干货 🌸精选专栏：【J…
趁表弟上厕所，我复习一下用CSS设置文字文本样式
📜个人简介 ⭐️个人主页：微风洋洋🙋♂️ 🍑博客领域：编程基础💡,后端💡,大数据,信息安全 🍅写作风格：干货,干货,还是tmd的干货 🌸精选专栏：【J…
原生javascript的树形插件tree.js(纯原生js，无需引用其他js)
原生js编写的tree插件
话不多说，先上地址，git地址：https://gitee.com/qimui/tree/releases/v1.0.0.0-20210310 链接内附带插件的说明。目前自测没有问题。希望有知道的小伙伴能帮我指出不足，我们将该插件做的更好，也希…
css实现switch开关
最终实现效果 使用场景：当使用的UI框架没提供类似的switch开关组件或者组件不能完全满足UI设计的显示需求，需要进行样式自定义，或者作为组件形式引入
<h2>开关切换</h2><!--开-->
<label class"switch" >…
HTML5 新特性 - Canvas动画 - 绘制弹幕
动画的实现原理即每隔一段时间(非常快 1/60秒) 重绘canvas
每次绘制时，内容都会有些许变化，由于视觉残留现象，出现动画效果.
示例：设置一个视频播放器（播放/暂停、音量-、倍数播放、发送弹幕）
<!DOCT…
CSS3实现32种基本图形
CSS3实现32种基本图形 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。 这32种图形分别为圆形，椭圆形…
纯CSS3绘制26个英文字母
纯CSS3绘制26个英文字母 在这里你看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。 网页代码中用到（<!-- 浮动D…
用 CSS3 做一个三角形
设置div宽高均为0，通过边框的宽度来控制三角形大小，
<div class"up"></div>
<div class"down"></div>
<div class"left"></div>
<div class"right"></div>设…
10 个很棒的 CSS3 按钮制作教程和例子
CSS3 是 HTML/CSS 的未来，是一个强大的 CSS 框架，在这篇文章中我们贴出一些很棒的用 CSS3 制作按钮的教程和实例。 Zardi CSS3 Button Maker CSS3 Gradient Button Generator How To Create a Stylish Button Entirely with CSS3 CSS3 Buttons Tutorial …
HTML+CSS项目练习（6）-流光按钮
目录
1. 页面效果
2.完整代码 1. 页面效果 2.完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv"Content-Type" c…
display弹性布局｜CSDN创作打卡
1. 什么是弹性布局 在《浅谈CSS常用属性（3）-display属性》中我们已经介绍了 display: flex 属性，这是在页面布局中使用特别频繁的一种布局方式，可以简便、完整、响应式地实现各种页面布局。 2. 弹性布局的四个基本概念 1ÿ…
浅谈CSS常用属性（3）-display属性
目录
1. display属性的作用
2. display属性的属性值 1. display属性的作用 我们都知道HTML标签分为块级标签和行内标签，块级标签可以设置高度、宽度、margin、padding等，但行内标签就不可以，这就大大限制了页面布局的灵活性。所以ÿ…
HTML练习之路14(制作创意画框)
本次要完成如图效果的创意画框： 通过分析可知，整体框架为一个大盒子包裹着一个小盒子，并且为两个盒子设置class，方便书写CSS时区分：
<body><div class"out"><div class"in">&l…
CSS知识点汇总（第二篇）
边框属性
上边框：border-top 下边框：border-bottom
左边框：border-left 右边框：border-right
综合样式就是在所属边框的后面加上-style/-width/-color 边框样式（border-style）属性值
none:没有边…
HTML练习之路09
本次的题目是完成如图所示的效果： 首先，我们分析一下界面结构，可以看作上下两部分，该界面的上部由主标题和副标题共同构成，
下部的左侧为图片，右侧为多个段落文本夹杂一根水平线。整个文本中有多出特殊颜色…
HTML练习之路08
本次我们的题目是完成如图所示的界面效果： 首先，我们来分析结构，可以理解为一个标题下面堆叠了两个段落文本，且三个部分中都有特殊标记的文字。
思路是：先将特殊颜色的文字用<em></em>标签标记出来&#…
CSS基础：浅聊2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的唯一，旋转，缩放等效果。
2D，不是刘备称结义兄弟关羽二弟这个称呼。2D是依托于二维坐标系的。 而2D转换时改变标签再二维平面上位置和形状的一…
修改input、textarea 的placeholder颜色及字体大小
修改input的placeholder样式 input::-webkit-input-placeholder {/* placeholder颜色 */color: #ff0000;/* placeholder字号 */font-size: 0.14rem;}input::-moz-placeholder {/* Mozilla Firefox 19 */color: #ff0000;font-size: 0.14rem;}input:-moz-placeholder {/* Mozil…
利用CSS构造太极动画图网页
利用CSS构造太极动画图网页
废话少说，直接上代码，然后再详细介绍构造过程。
代码
<!DOCTYPE html>
<html>
<head>
<title>太极动画</title>
<meta charset"utf-8">
<style>* {margin: 0;padding…
CSS知识点汇总（第一篇）
css样式规则：
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
注意：
1、选择器用于CSS样式作用指定的标签，并且严格区分大小写，而属性和属性值不区分…
防抖(debounce) 和 节流(throttling)
防抖和节流对于我们前端的性能优化上来说是一个必不可少的部分，也是我们笔试和面试过程中常常遇到的一个问题，因此，掌握防抖和节流对于我们来说十分的必要。
首先，我们需要了解一下防抖和节流是什么？用来做什么的&…
HTML使用iframe元素实现页面内容的跳转功能
HTML使用iframe元素实现页面内容的跳转功能前言一、iframe是什么？二、iframe的使用1.主页面内容代码2.内容页面代码总结前言
在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触JavaScript，无法实…
CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）
css样式属性常用布局样式属性常用文本样式属性元素溢出显示特性盒子模型常用布局样式属性
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>CSS学习</title><style>.box{width:150px;heig…
CSS3中z-index不生效怎么办？
如果在 CSS3 中 z-index 属性不起作用，可能有以下几个原因和解决方案：
1、定位属性不正确：z-index 属性只对设置了定位属性（如 position: relative;、position: absolute; 或 position: fixed;）的元素生效。确保要设置…
div边框弧形设计，css3的border-radius属性
border-radius属性
向 div 元素添加圆角边框： <div></div><style>div {background-color: #15dfdf;width: 350px;height: 350px;border-radius: 36px 36px 36px 36px;}</style>弧度可根据实际情况进行调整
也可上下左右分开表示ÿ…
javaFX学习之滑块组件Slider(转载)
参考原文：DOC-03-18 滑动条(Slider) | JavaFX中文资料
javaFX应用程序中使用滑动条（Slider）来显示一个区间范围内的数据并与之交互。Slider控件由一个滑轨（Track）和一个可拖放的滑块（Thumb）组成…
jquery学习笔记1——选择器
一、jq选择器是什么：
jq选择器是利用jq的核心函数，快速的选择DOM中的元素。jq选择器完全继承了CSS的风格。利用jq选择器，可以非常快捷和快速的找出特定的DOM元素，然后对他们添加相应的行为，而无需担心浏览器是否支持这…
web前端开发规范手册之类命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志&a…
CSS3：过渡动画及关键帧动画-案例一：扑克牌的翻转
一、过渡动画及关键帧动画
本文大致介绍了CSS3中的技术之一：动画，因为我也是学习者，这只是我自己的观点，如有错误，请指出。废话不多说，开始步入正题： 想必大家都看过动画片：猫和老鼠…
小程序开发手机端预览缺少页面组件怎么回事
前几天在学习微信小程序发现了一个非代码错误的问题：
上代码
<!--wxml-->
<camera classcamera-cls><cover-view classcv-cls>请将汽车车身置于取景框内哦~</cover-view><cover-image srccarBackground.png classcb-cls></cover…
css修改滚动条样式
有一说一 系统默认的滚动条确实不是很美观 那么我就来带着大家修改一下他的样式
::-webkit-scrollbar 设置整个滚动条的样式 一般用于设置宽度
你要跟什么元素加 就 元素::-webkit-scrollbar 例如你想 给body 就 body::-webkit-scrollbar
::-webkit-scrollbar-track 设置滚…
SVG 图标格式文件去除文件默认颜色
SVG文件如果带有默认样式可能会导致css无法覆盖他本来的颜色 用编辑器打开SVG文件 在页面中查找 fill 属性 这个就是更改颜色的属性 把这样的代码通通干掉就好了
一体化Web从不同角度跟踪行业板块的异动！
前言板块指的是市场内具有相似属性的同一类股票。板块轮动是指当某一个板块持续了一定热度之后，开始乏人问津，此时另外一个版块突然接棒。这种热度在多个板块中切换出现，维持着市场的人气。板块切换的原因有很多，有政策面的变化、…
将sql文件导入navicate
reference: 参考 1、打开Navicat软件,并且连接数据库。 2、鼠标右键localhost,点击新建数据库。 3、在里面输入数据库名称,字符集选择utf8,排序规则选择utf8generalci,点击开始。 4、双击新建好的数据库。 5、右键点击运行SQL文件。 6、点击文件右侧的三个点。 7、从电脑里面选…
html文本域高度根据内容高度变化
其实很简单，那就直接看代码吧
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&q…
css flex弹性布局
Flex 布局教程：语法篇 Flex 演示 flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。例如我们让多个div横向排列，传统做法是使用…
如何假装一个成熟的「职场人」？
职场礼仪，是每个职场人的必修课下面，是为你精心准备修订的《2020职场礼仪指南》希望大家好好学习，认真实践——同事篇123商务篇123领导篇123职场日常篇123456-END-
JavaScript学习笔记--BOMDOM（JavaScript高级程序设计第4版）
BOM&&DOM基础知识BOMwindow对象Global对象作用域窗口关系窗口位置与像素比窗口大小视口位置导航与打开新窗口定时器setTimeout（）location对象查询字符串操作地址navigator对象检测插件操作系统navigator.platformscreen对象history对象导航lengt…
HTML练习之路16(精美电商悬浮窗)
本次要完成如图所示的拼图效果： 本题我们采用无序列表的方法设计。
整体框架可以看成一个<ul>包裹五个<li>,下面的五行信息用<li>修饰即可（ul相当于为悬浮窗提供一个显示空间，li用于显示我们的内容）。
<ul…
Html+CSS常用要点及易错点归纳（二）
本次主要总结了CSS中的零碎知识点，也是每个学习CSS的朋友们需要了解或者记住的：
CSS 相关点：
- 复合样式书写顺序：
1. background属性： 复合的值是通过空格隔开的，并且没有顺序要求。 这里有个小技巧&am…
CSS中的伪类和伪元素（详细）
这篇想要跟大家分享的是css中的伪类和伪元素，有任何问题可以私聊我或者评论哦！
首先，我们先来想一下
一、引入伪类跟伪元素的原因？
伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述
比如CSS没有“段落的第一行”、…
CSS3 中的 box-shadow 属性
“box-shadow”属性
box-shadow属性是一个CSS3属性，允许我们在几乎任何元素上来创建阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度（第三维）的错觉。
语法
box-shad…
弹性盒模型新旧版本对比总结
因为我之前已经将新版本和旧版本的弹性盒模型研究过，并且转载了我认为比较好的文章，所以这里不再对他们进行详细的介绍，如果想要了解更详细的请点击
新版本弹性盒模型：https://blog.csdn.net/lhjuejiang/article/details/80019673…
深入了解css中的grid布局
只说概念可能理解的慢，我们通过做一个小布局，把Gird相关的知识点总结一下。保证你看完之后，grid布局也就学的差不多了。
先看看我们的第一个小例子最终的效果图：下面是我们的HTML代码
<div class"wrap"><heade…
css中的counter计数器
作为程序猿，代码比什么都有说服力，嗯，所以废话不多说，直接看吧，认真看完了，就一定有收获（内容有点多，需要一点耐心哦,我是一点一点写的，咱也一点一点看呗）
co…
简单了解伪类和伪元素的区别
使用伪元素的时候，总是感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢？下面我们就来聊聊两者，这个介绍的不多，主要还是聊聊伪元素的一些特点，这里不怎么…
CSS样式和基本选择器-Ⅰ
CSS层叠样式表
CSS (Cascading Style Sheet )
1、css优点
1.1 css介绍
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分丰富
4、建议使用独立于html的css文件(如下图)
5、利用SEO，容易被搜索引擎收录 2、css导入方式
2.1、行内…
原生JavaScript练习题 13-简易的学员信息表
效果如下： 完整代码
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"…
深入学习CSS3中的浮动、清除浮动以及BFC
做测试题的时候遇到了一个关于BFC的题目，what？什么是BFC，然后我赶紧上网查阅了各种文章以及博客，自己又动手实践了。终于把浮动和清除浮动以及BFC的问题搞清楚了，捋一下思路，总结在一起，对浮动问…
用HTML5和CSS3实现3D立体旋转相册
很快又到了5.20了，是不是应该要给女朋友或者正在追求的妹子一点小惊喜，总说我们程序员不懂浪漫，今天的这篇博客教大家如何实现3D立体相册，赶紧类制作我们程序员的浪漫吧！！！
html代码
<!DOC…
CSS３实现小米商城的浮动效果 html5css3
小米内容栏浮动效果
<!DOCTYPE html>
<html><head><meta charset"utf-8"><title>小米手机内容详情</title><link rel"stylesheet" type"text/css" href"css/text1.css" /><!-- 清除样式…
HTML文档的基础结构
HTML5网页基础结构： （!tab/enter 快捷键可生成基本代码块）
<!DOCTYPE html>
<html lang"en">
<head>
<meta charset"UTF-8">
<meta name"viewport" content"widthdevice…
IE8下@font-face引入特殊字体兼容问题（format|?#iefix|两个url三问）
问题表现： 使用font-face引入自定义特殊字体，在IE8环境下报错“font-face遇到了未知错误”，表现为字体丢失。 问题分析： 我们常用的字体文件的格式如：
TrueType、Web Open Font格式对于IE浏览器来说，在IE…
前端笔记与经验 (遇到就更新内容）
还有好多坑没写上，有空就补，仅供参考，有点bug
感谢活跃在互联网并且乐于分享的技术人们~
前言
有一些知识点在另一篇文章了，毕竟微信小程序开发也有专门的岗位，初心就是想专门搞一个微信小程序工作过程中的知识点总…
Uniapp 自定义图标
第一种方法：/*view 模块*/<text class"icon"></text>/* css 模块*/font-face {font-family: iconfont;// 本地链接src: url(~/static/ttf/iconfont.ttf) format(truetype);// 第三方链接 // src: url(https://xxx.xxx.xxx/ttf/ic…
使用HTML实现一个不一样的圣诞树
一、前言 明天就是圣诞节了，抓紧时间写一个代码来庆祝。写什么好呢？就用HTML实现一个动态的圣诞树吧。我能想到也就是有圣诞树了😅 二、效果展示 三、实现步骤
首先，我们把body默认margin和padding设为0，并把背景设为…
纯Html CSS实现云雨动画效果
纯HTML和CSS实现云雨动画效果，动态效果由CSS实现，主要有两个动画实现 代码下面自取🖖 🎈效果如下 HTML代码如下
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><…
css 超出部分隐藏 超出部分给滚动条 超出部分展示 自动
前端经常会出现屏幕或者容易装不下元素的情况 那么这种情况我们就需要根据需求进行处理 首先是默认的
overflow:visible;超出部分不做任何处理 会原样展示出来
overflow:hidden;超出部分隐藏 简单说 超出的你就看不见了 最常见的还是超出部分给滚动条 让看不完的东西可以上下…
element ui 弹出框el-dialog垂直方向剧中
其实只需要一段css就好了
/deep/ .el-dialog {display: flex;flex-direction: column;margin:0 !important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:calc(100% - 30px);max-width:calc(100% - 30px);
}
/deep/ .el-dialog__body{flex:…
jquery 操作类
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
1.添加类$(“div" ).addClass("current");2.移除类$(“div" ).removeClass("current");3.切换类$(“div" ).toggleClass("current&…
CSS篇一一简短介绍下CSS
什么是CSS?
CSS是Cascading Style Sheet的缩写，层叠样式表，是一种用来表现文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制&a…
![[暑假]伪类和伪元素的区别---＜＜你问我就这样答＞＞](https://img-blog.csdnimg.cn/31e54df604834cc482c7ba98334c9471.png)
css通配符选择器_CSS中的通配符选择器（*，^和$）
css通配符选择器Introduction: 介绍： We all are aware of various types of selectors that can be used for developing a website or a web page. But do we know all of them? Well, if your answer to that question was no, then dont worry it is understa…
QSS实践汇总（12）——渐变色qlineargradient讲解
background-color:qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgba(3,155,252,0),stop:0.20 rgba(3,155,252,60),stop:0.5 rgba(3,155,252,128),stop:0.80 rgba(3,155,252,60),stop:1 rgba(3,155,252,2));
说明：
x1,x2表示水平方向：x10,x21
y1,y…
纯前端实现图片上传功能
纯前端实现图片上传功能，告别后端formData上传使用ElementUI中的upload组件腾讯云实现简单的图片上传功能了解了upload的基本属性之后我们要开始上硬菜了使用ElementUI中的upload组件腾讯云实现简单的图片上传功能
首先简单了解一下ElmentUi的upload组件封装的自有…
div的flex布局，简单介绍
.main-box{display: flex;flex-direction: row;align-items: center;justify-content: center;
}
css常用指南，实现动画效果、使用animate.min.css
.cls_div{width: 100px;height: 100px;/* 执行动画 infinite重复*/animation: 5s change2 infinite;
}
keyframes change{from{background-color: pink;}to{background-color: blue; margin-left: 100px;}
}
keyframes change2{0%{background-color: pink;margin-left: 0px;}50…
css常用指南，响应式网站的开发方式，简单例子
第一种，写一个css文件
.zong{width: 100%;border: 1px solid rebeccapurple;display: flex;flex-direction: row;flex-wrap: wrap;
}
/* 超小屏幕 */
media only screen and (max-width:767px){.zong div{width: 100%;background-color: blue;}
}
/* 小屏幕 */
med…
uniapp定时器定时刷新获取
要用uniapp做一个效果：页面定时刷新获取，根据时间变换状态。 这里按钮有5种状态：预约，已预约，已售罄，未开始，已结束。要把当前时间和后端返回的时间做对比，如果还没到开始时间则显示…
【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
【图片链接有点小问题，这几天更新，敬请期待！】 目 录
第一章HTML基础
1.1 HTML简介和发展史
1.1.1 什么是HTML
1.1.2 HTML的发展历程
1.1.3 web标准
1.2 开发中常见概念解释
1.2.1前端
1.2.2后台
1.2.3 浏览器
1.3 纯文本和超文本的…
QSS实践汇总（11）——字体族汇总（font-family）
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋：FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体：STSong
华文中宋:STZhongsong
华文仿宋:S…
CSS设置小于12px的字体大小
// 设置字体为10pxfont-size: 20px;transform: scale(0.5,0.5);//缩放transform-origin:center top;//文字位置
小盒子在大盒子里往返运动：计时器与dom
<style>.container {width: 100px;height: 100px;background: #f00;position: absolute;top: 100px;left: 100px;}.box {width: 800px;height: 600px;position: relative;background: #ccc;}</style><script>// 页面内容加载完毕后，触发执行windo…
购物车2.0使用模板字符串数组遍历
//商品列表数组
let productList [{id: 1001,name: js高级编程,url: ./image/shoppingBg_03.jpg,price: 35.89,num: 0,singlePrice: 0,state:false //是否选状态，true选中,false未选中},{id: 1002,name: css高级编程,url: ./image/shoppingBg_06.jpg,price: 25.89…
前端基础复习--21分栏布局？伪元素？ CSS Hack分类？ IE低版本常见BUG？布局扩展？
1. 分栏布局 column-count : 分栏的个数 column-width : 分栏的宽度 column-gap : 分栏的间距 column-rule : 分栏的边线 column-span : 合并分栏 注：⭐️column-width和column-count不要一起去设置。
2. 伪元素： …
跑马灯边框、动态边框的实现
代码如下：
<!DOCTYPE html><html><head><!-- 声明当前页面的编码集： chartsetgbk,gb2312(中文编码)， utf-8（国际编码） --><meta charset"UTF-8"><!-- 当前页面三要素 --&…
【CSS 书写模式 (Writing modes )】
CSS 书写模式 Writing modesCSS 书写模式 Writing modes1. writing-mode 属性: 设置 元素的书写模式(块流方向 内联级内容/文本 主流动方向 )2. text-combine-upright 属性: 把字符组合在一起 放置在单个字符的空间 ( 垂直模式, 搭配 writing-mode 属性)3. text-orientation 属…
HTML5CSS3_day01
HTML5 第一天
一、什么是 HTML5
HTML5 的概念与定义
定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一…
QSS实践汇总（10）——QMainWindow样式（风格）
一、QMainWindow内部split风格
说明：实际测试中QMainWindow::separator::hover,未生效，原因未知，欢迎留言告知
在QMainWindow通过函数splitDockWidget()分割窗体时，系统会自动生成一个Split,而这个Split无法通过children()获取到…
font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配
面对不同设备的适配与响应；这里介绍不同的是media规则进行匹配不同的设备；
不同的设备宽度不尽相同，尺寸有320px,360px,375px,414px…等常见的宽度,面对在不同的尺寸环境下，文字的阅读体验问题，我们常常使用的是CSS单…
css渐变色边框的实现的方法
在项目中，边框的样式多种多样，一种常见的渐变色边框出现；而这种渐变色的边框又结合各种各样的设计，这里结果实现的效果与浏览器的兼容性总结渐变色的实现方法：
圆角的渐变边框border-image
点击进入border-image的AP…
![css的属性选择器[attr=‘‘]的使用](https://img-blog.csdnimg.cn/ac9d2a42c01440f1a00137e8d972a532.png#pic_center)
css的属性选择器[attr=‘‘]的使用
属性选择器的介绍使用
[attr]包含在属性中就匹配，如：[disabled]
注：typecheckbox不可使用，因为无论复选框是否取消选择，[checkbox]都生效；所以都使用:checked伪类
[attrval]与[attr~val]的使用
[attr~v…
替换元素 - content的计数器counter使用（二）
在项目中，我们会遇到列表形式的说明文档，这些列表序号的展示，之前都是手动的写在文案的前方，但更改莫一文案时牵扯到序号的更改，这里我们使用伪类content与counter的使用，进行序号的展示
content计数器的使…
替换元素 - content的属性介绍与实际使用（一）
替换元素与非替换元素
替换元素就是内容课替换，最简单的例子就是：<img src"1.jpg"> 如果我们把上面的 1.jpg 换成 2.jpg，图片就会替换了 替换元素的特征：除了内容可替换以外
内容外观不受页面上的css的影响 &am…
图片与文字间出现间隙的原因与解决方案
一 ，样式书写底部出现间隙
在dom的实现中，经常会出现底部有间隙，其受多种因素的影响：
在项目的实现中，图片与底部会出现间隙，其原因是：
类比于图片前面还有一个宽度为0的空白字符࿰…
position：absolute绝对定位的使用
position定位的使用
相对定位（relative）：相对于块级元素（或行内块）自身位置进行定位； 绝对定位（absolute）：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的…
div实现上下左右居中的方法
定宽高的自适应居中
.dialoge { // dialoge的固定宽高显示position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 1rem;height: 1rem;margin: auto;
}
.content {background: #ccc;text-align: center;line-height: 1rem;border-radius: .1rem;
}
<div class&quo…
HTML+CSS手写科技感六边形
最近有个需求需要实现一堆这种五颜六色的六边形作为气泡容器，于是就参考网上的思路写了一个这样的六边形。 效果图如下：
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equi…
QSS实践汇总（9）——QToolButton样式（风格）
一、QToolButton常用属性
QToolButton::pressed 按下效果
qproperty-icon border border-radius height background-color padding-right
二、QToolButton风格 // 设置图标
QToolButton#Btn_EditReport
{
qproperty-icon:url(%1/style/image/USW/ListEdit.png);…
Position 的值有哪些，分别有哪些作用？
static：默认值 不脱离文档流，top，right，bottom，left 等属性不生效,会随Html排版而移动位置。absolute：绝对定位,不会随排版而移动，会根据最近父位进行定位，元素会脱离正常文档流&am…
QSS实践汇总（8）——QTabWidget样式（风格）
一、QTabWidget所需属性
QTabWidget::pane
QTabBar
QTabBar::tab
QTabBar::tab:selected
QTabBar::tab:!selected
QTabBar::tab:hover
二、QTabWidget风格说明
// QTabWidget的内部窗口风格
QTabWidget::pane
{
border-top:1px solid rgb(24,145,243); // 顶部边框 …
纯 CSS 实现科技感十足的暗黑字符雨动画
本文将使用纯 CSS，带大家一步一步实现一个这样的科幻字符跳动背景动画。类似于这样的字符雨动画：Digital Char Rain Animation或者是类似于这样的：CodePen Home Matrix digital rain (animated version) By yuanchuan运用在一些类似科技主题的…
前端面试宝典 每日一题（13）关于let、const、var的一些认知
🧑🏻写在前面的话： 这个系列文章可能开始，有人会觉得很low，我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析，感兴趣的小伙伴可以持续关注&…
Vue实战之 10. 订单管理
1. 订单管理概述
订单管理模块用于维护商品的订单信息，可以查看订单的商品信息、物流信息，并且可以根据实际的运营情况对订单做适当的调整。 2. 订单列表
1. 订单列表展示
订单数据加载订单列表布局 // 获取订单列表async getOrderList () {const { d…
offsetWidth offsetHeight和clientWidth clientHeight的区别
(1)offsetWidth （content宽度padding宽度border宽度）
(2)offsetHeight（content高度padding高度border高度）
(3)clientWidth（content宽度padding宽度）
(4)clientHeight（content高度padding高度…
CSS 竟然可以控制动画的行进，Cool！
今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。我们先来看个例子，本例子是我在闲逛 Codepen 时看到了，很有意思：本例子，CodePen: https://codepen.io/mikegolus/…
CSS 备忘录2-动画、渐变、颜色、选择器等
1、背景
background属性是八个属性的简写形式：
background-image 指定一个文件或生成的颜色渐变作为背景图片background-position 设置图片的初始位置background-size 指定背景图片的渲染尺寸background-repeat 是否平铺图片ba…
css常用指南，弹性盒子模型、块标签横向排列、标签放一行、弹性盒子模型内的布局
弹性盒子模型，块标签横向排列
.div_parent{width: 600px;height: 300px;border: 1px solid red;}
.div_parent>div{width: 100px;height: 100px;
}
.div_son1{background-color: palevioletred;
}
.div_son2{background-color: aqua;
}
.div_son3{background-co…
css常用指南，display的使用、盒模型、实战导航条、盒子的定位方式、z-index、弹出登录窗口效果
display的使用
.c1{background: pink;display: inline-block;width: 100px;height: 50px;padding: 10px;margin: 10px;
}.c2{background: pink;display: block;width: 100px;height: 50px;padding: 10px;margin: 10px;
}.u1{display: inline;
}.div2{display: none;
}
/* .div…
流式布局/媒体查询/视口/移动端布局视口字体设置
1.流式布局
1.大部分元素都是基于父级的百分比设置
2.通常使用max-width,max-height,min-height,min-width
3.如果需要高度设置百分比，那么父级的高度必须明确
4.特殊情况的百分比 margin/padding等，他们的百分比是基于
父级的宽度
line-height的百分比…
你演示一下如何只在html中修改某一个字的颜色
要在 HTML 中修改某一个字的颜色，你可以使用 style 属性和 color 属性。 例如，如果你想要将文本 "Hello World" 中的单词 "World" 显示为红色，你可以这样写： <p>Hello <span style"color:red&q…
生成一个可以下雪的动态圣诞树HTML代码
这是一个简单的例子，展示如何使用 HTML、CSS 和 JavaScript 创建一个动态圣诞树，可以下雪： <!DOCTYPE html>
<html>
<head><style>/* 树的样式 */.tree {width: 400px;height: 600px;position: relative;background-…
前端基础复习--15表单扩展学习？BFC规范？
1.表单扩展学习？ 美化表单控件： 1. label :checked 2. position opacity 新的input控件 email : 电子邮件地址输入框 url : 网址输入框 number : 数值输入框 range : 滑动条 date / month / week : …
用html和css写一个知乎首页
HTML (HyperText Markup Language) 是用来描述网页的一种语言，而 CSS (Cascading Style Sheets) 则是用来控制网页的外观样式的。 要用 HTML 和 CSS 写一个知乎首页，首先应该先分析知乎首页的布局，确定要使用哪些 HTML 标签和 CSS 属性来表示…
CSS 内容盒子与边框盒子
这章比较重要，会不断更新❗ 文章目录 👇内容盒子开发者工具的使用border 边框padding 内边距margin 外边距盒子整体尺寸元素默认样式与CSS重置元素分类块级标记行级标记行内块标记 display样式内容溢出裁剪掉溢出部分滚动条 圆角边框 border-radius ✌边…
前端基础复习--14 link扩展学习？meta扩展学习？HTML5新的语义化标签？表格扩展学习？
1. link扩展学习？ 外部资源文件，可以引css 添加网址标题栏前的小图标： <link rel"icon" type"/image/x-icon" href"http://www.mobiletrain.org/favicon.ico"> DNS预解析： 大的…
html+css实现网页元素电脑端隐藏手机端显示
场景需求：我想在网站的手机端加一个联系方式，但是在电脑端不想被看见。
方法：分别在电脑端和移动端额样式中设置display属性。
.visible-xs{ //电脑端css
display: none;
}
media (max-width: 767px) { //移动端css
.vis…
HTML空格符nbsp；失效
一般只要没有打错 你那应该用了flex布局 flex会影响一些语法 而且也会导致空格符实习失效 而且如果你设置了
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis; 会发现超出 部分会隐藏 但并不会出现省略号 flex还是会影响一些基础样式的 慎用
前端基础复习笔记-- 07CSS优先级？CSS盒子模型？标签分类？显示框类型？标签嵌套规范？溢出隐藏？透明度与手势？ 最大、最小宽高？CSS默认样式？
1. CSS优先级？ 1. 相同样式优先级 当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。 2. 内部样式与外部样式（也就是<style>和link进去的css的不同写法） 内部样式与外部…
前端基础复习笔记04--列表标签？表格标签？表单标签？div和span？CSS基础语法？CSS样式的引入方式？CSS中的颜色表示法？
1. 列表标签？ 1. 无序列表 -> ul li 符合嵌套的规范 <ul type"circle"> <li>1</li> <li>2</li> </ul> 这样写是对的 <ul> <p> <li>1</li…
JS-web旋转箱子 附源码
目录 效果图 代码 <!DOCTYPE html>
<html>
<head>
<meta charset"UTF-8">
<meta name"viewport" content"widthdevice-width, initial-scale1.0" />
<title>3D旋转盒子动画</title>
<meta n…
border-image-width 两个属性值 cover 与 contain 的区别
contain 与 cover 的区别两者的相同点两者的不同点图片尺寸对比图covercontain两者的相同点
contain 与 cover 都是保持图像原宽高比例进行缩。
两者的不同点
图片尺寸对比图 cover
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
contain
缩放背景…
:nth-child(n)前面有无空格的区别
:nth-child(n) 前面有无空格的区别
:nth-child(n) 前面有空格
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name&…
将Echarts的数据视图展示为table并且导出Excel
Echarts官网示例，用过Echarts的小伙伴都知道，它带有自己很多原生功能，比如简单举例： 想要详细了解可以去官网看配置项，今天主要说一下图中蓝色框的‘数据视图’这个功能，如下是官网上这个功能按钮所展示的…
css的z-index、position、overflow属性混合时Safari的兼容问题，fixed定位+z-index同时使用不生效问题
～～～转前端啦～～～
问题：position: fixed和z-index同时使用在Safari浏览器中不生效？？？ 场景1: fixed定位z-index属性tranform3D变化同时使用
先看代码…
css3伪类选择器nth-child
html代码
<html><head><meta charset"UTF-8"><title></title></head><body><style>ul{width: 200px;height: 20px;display: flex;}ul li{list-style: none;background-color: gold;}</style><ul><l…
微信小程序开发实战-第五周
第五周
navi组件
新建navi导航组件
导入相应的图片素材文件
设置组件属性列表
title：当前期刊标题
first：指定当前期刊是否为第一期
latest指定当前期刊是否为最后一期
设置图片url
disLeftSrc: images/triangle.disleft.png,
highLeftSrc: ima…
顶部导航栏固定之后点击事件失效问题
顶部导航栏固定在顶部以后所有点击事件无反应 解决:在css里面加z-index属性
.head {background: linear-gradient(100deg, #FFEB3B, #FFC107);padding: 10px 0;position: fixed;top: 0;width: 100%;z-index: 100;}
如何解决CSS外边距塌陷的问题
首先我们先看出现外边距塌陷的三种情况：
1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。
<style>.box1 {width: 150px;height…
![[暑假]品优购练手Demo---需要掌握的知识](https://img-blog.csdnimg.cn/a8c146211f77465bb075fbb94298f5d7.png)
[暑假]品优购练手Demo---需要掌握的知识
仅了解知识或许会让我们变得博识,但是为了精通可能就需要一点点背诵了 开发小技巧: 多行输入 AIT 点击我们要输入的行 批量操作可以使用 AITShift 批量操作 也就是Emmet语法 可以使用 shiftAltF 快速使文档格式化 一. 一个网站制作的流程: 第一步: 和客户详细沟通,尽可能详细的…
web前端-综合应用案例-团购悬浮框页面的制作-educoder
第1关：团购悬浮框页面的结构设计
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>电商团购悬浮框</title>
</head>
<body><!-- ********* Begin ********* --><ul><li>…
移动WEB-flex弹性布局
1. 概述
布局的传统解决方案，基于盒状模型，依赖 display属性 position属性 float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其…
移动WEB-rem布局篇
1. 概述
rem布局主要的作用就是：根据屏幕的大小的不同，改变盒子的高度和文字的大小
2 rem单位
rem 和 em 类似，都是相对单位em 相对的是父元素的字体大小rem 相对的是html 根元素的字体大小
3. 媒体查询
3.1 什么是媒体查询：…
css图片居中垂直居中_使用CSS将图片居中
css图片居中垂直居中Heres one solution to centering an image both horizontally and vertically, when you know the height of the container. Tested in FF, IE6, IE7 当您知道容器的高度时，这是一种将图像水平和垂直居中的解决方案。 在FF，IE6&…
Web APls-day02
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录
事件监听（绑定）
事件类型
鼠标事件
焦点事件
键盘事件
文本事件
事…
QChart学习汇总（1）——QChart基础
效果示例 注意事项
1、addSeries必须写在坐标设置setAxisX、setAxisY之前，否则会引起坐标异常。
QChart常用类说明 QChart使用步骤
1、实例化序列series 2、初始化序列series，包括append数据，名称，标注点是否显示等 3、实例化Q…
ie8如何兼容媒体查询及注意事项
关于怎么兼容ie8浏览器媒体查询的问题（总结） 转载来自：zzjjjjer的博客 原文链接：https://blog.csdn.net/zzjjjjer/article/details/110424531 方法： 1.引入respond.js文件（可以百度查找，也可以在…
2022 新年快乐后端攻城狮
2022 新年快乐
前几天就一直有人在朋友圈依依妖妖说“不会今天有人还要上班吧，不会吧不会吧😲”，语了语了，我今天都还在上班啊。
后天春节，写个对联，祝大家2022整整齐齐，完完整整，…
实现一个Switch开关组件只需要一个div?详细记录Switch组件开发过程
最终效果图 实现逻辑
一、switch容器 // html<div className"dumbo-switch"></div>// css.dumbo-switch {height: 22px;width: 44px;border: 1px solid;border-radius: 100px;border: 1px solid #cccccc;cursor: pointer;}二、switch inner // html// c…
CSS常用定位方法（绝对定位、相对定位、固定定位）
CSS常用定位方法
1、绝对定位到屏幕中间
/*定位标签，不可定位文字*/
.DW{position:absolute;top:50%; /*可以通过改变top的百分比，来改变上下的位置*/left:50%; /*可以通过改变left的百分比，…
fixed在手机端的bug
一、带input的fixed在ios下失效
在ios下，一个页面如果有fixed浮层，并且浮层里面有input，那么当input focused的时候，fiexed层的位置就会错乱。
如图: 例子：http://demo.zhangruojun.com/static/page/iframe-fixed/in…
display:flex css
本文介绍下flex的用法和属性
这个一个自适应的3列盒子 <div class"flex"><div style"background-color:red;">红色</div><div style"background-color:blue;">蓝色</div> <div style"background-color:…
CSS之transform的translate平移属性【2D】（一）
transform属性
# 属性属性
transform: translate/translateX translateY perspective translateZ;translate
中文意思为 平移，通过 X 轴，Y 轴来移动元素。
translate(x, y)
x，y 可设置为百分比值，代表着基于 自身宽度/高度 的…
(一) 多窗口打开单页面实现同步拖拽
step1 实现拖拽
css
<style>*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;background-color: #ae7000;cursor: pointer;text-align: center;line-height: 200px;position:absolute;}
</style>html
<body><div class"box">dr…
团队协作实用工具，轻松居家办公
用于团队协作的软件还是蛮多的，就是文档编辑类的协作软件，现在也正式面临疫情的时候，可能有很多人都是需要在家办公的，所以我今天来盘点一下团队协作的工具，适用范围也是各种各样的。大家一起来看一看吧！
…
CSS3列表项常用样式
一、列表项常用样式 1.list-style-type:设置列表项标志类型。 --none、cicre、square等 2.list-style-image:url("地址") --将图像设置为列表项中的标识 3.list-style-position:设置列表中列表标志的位置 --in…
css及css3学习
css~css3
前言： （1）css的复合选择器总结 （2） flex布局 （3） 过渡属性 （4）变形属性
复合选择器
后代选择器：用于选择后代元素（可以是子孙后代&am…
transform之transale
CSS3tranform中的transale详解
tranform中transale的作用是平移 1. transaleX(0px) 2. transaleY(0px) 3. transaleZ(0px) 4. transale(xpx,ypx) 5. transale3D(xpx,ypx,zpx) transalex在水平方向移动，值为正数右平移，负数左平移-
transaleY(0px)在垂…
小米官网导航栏的实现
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>小米商品导航</title><style>.box{widt…
HTML基础之CSS
CSS选择器 1、id选择器
2、class选择器
3、标签选择器
4、层级选择器(空格)
5、组合选择器(逗号)
6、属性选择器(中括号)<!DOCTYPE html>
<html lang"en">
<head>
<meta charset"UTF-8">
<title>Title</title>
<…
![[转载]Html 特殊符号 让版权符号更美观_几何途行_新浪博客](http://www.fwl.name/attachments/month_0902/22009223154723.gif)
[转载]Html 特殊符号 让版权符号更美观_几何途行_新浪博客
原文地址：Html 特殊符号 让版权符号更美观作者：不分对或错在页面里加上版权符号，HTML代码里对应输入© ©就是版权符号在HTML里的代码，但是很多页面在设计的时候，用的字体是宋体，就算没有设置字体&…
前端svg字体图标使用_材质设计图标字体与svg以及如何在角度中使用svg精灵
前端svg字体图标使用In this article we will compare usage of Googles Material Design Icons, as font and SVG. And we will also see how we can use SVG sprites in an Angular application.在本文中，我们将比较 Google的Material Design Icons (字体和SVG)的…
Vue实战之 7. 商品管理---商品分类
1. 商品分类概述
商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观地看到。 2. 商品分类列表
实现基本布局实现分类列表数据加载 // 获取商品分类数据async getCateList () {const { data: res } await this.$http.get(categor…
5.1 补充：关于编辑用户信息时自己的一个思考
下面是用户管理界面 一般的思路是：给编辑按钮绑定点击事件，向后台传递id这一请求参数，这样后台会返回数据。下面是接口文档： 我当时实现这个功能时在思考，既然页面上有数据，又何必向后台发起请求呢…
面试题：关于三次握手和四次挥手
为什么要三次握手而不是两次握手 但是在三次握手的情况下服务端收不到最后的ACK包不会认为链接建立成功 其实三次握手的本质是解决 网络链接不可靠的问题 如何解决丢包问题和乱序问题
一下过程不区分前端和服务端，都可以作为接收端和服务端 TCP协议为每一个链接建…
CSS笔记(一) - Flex页面布局
文章目录1 布局原理2 felx布局父属性常见属性2.1 父属性属性汇总2.2 flex-direction设置主轴的方向2.3 justify-content设置主轴方向上的对齐方式2.4 flex-wrap属性指定flex项目是否应该换行2.5 align-content设置侧轴上的子元素的排列方式（多行）2.6 ali…
js控制多个滚动条联动显示，以及解决滑动鼠标滚轮导致的问题
参考文章 原生JS控制多个滚动条同步跟随滚动
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" c…
Flex 布局设置滚动条失效
问题描述
在使用 Flex 布局时，由于盒子的宽高自适应，对盒子里面的 item 设置滚动条会导致盒子被撑开
// HTML
<div class"tabs"><divclass"tabs-button":style"{height: titleHeight,color: titleColor,fontSize: t…
面试题 css清除浮动的方法
浮动的产生 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照从左到右的方式逐个排列 但是如何…
前端面试题 v-if和v-show的区别
简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低 v-if是动态的向DOM树内添加或者删除DOM元素； v-show是通过设置DOM元素的display样式属性控制显隐；
百度云十一期间全程为您服务
尊敬的百度云用户，您好，国庆节假期将至，10月1日至10月8日期间，我们的服务依然7*24为您守候，可以通过管理控制台右上方“工单”按钮或电话4008777818随时与我们的服务人员联络。技术问题与新用户实名认证需求࿰…
有云说 | 听说，1024这天不加班的程序员都去买买买了 ？！
所有关注百度云的程序员和开发者们节日快乐！！为什么是1024？1024是2的10次方，在计算机当中，硬件都是基于高电平、低电平而衍生出来的0、1二进制计算的，1024则是换算单位时用的最多的数字，比如1MB…
手写深拷贝的思想及代码
接上文，为手写深拷贝，首先需要了解一些知识，首先如何判断数据类型，我们可能知道typeof可判断数据类型，但其实它只能区分基本类型，即：number、string、undefined、boolean、object。 而对于null、…
jquery 封装的动画效果函数
文章目录showhideslideDown() 向下滑动slideUp() 向上滑动slideToggle()切换滑动hover(over,out)stop()淡入淡出fadeTo()自定义动画animate()jQuery给我们封装了很多动画效果，最为常见的如下:
显示隐藏show(), hide(), toggle()滑动slideDown(),slideUp(), slideTo…
vant3 swipe轮播改答题 and 点击过快导致题目录入异常
技术：vue3 js vant3 轮播里面可以内嵌图片也可以内嵌具体的内容。那么，依据我司需求，需要实现完成一个做题的题库。 需求:
当点击的时候，被点击的答案变色，进入下一题当有上一题的时候，显示 ‘上一题’&…
html基础知识汇总
html知识点汇总
1.常用标签
1.1 字体标签
<strong>字体加粗标签</strong>
<em>字体倾斜标签</em>
<del>删除线标签</del>
<ins>下划线标签</ins>1.2 div 和 span标签
<div>一个div标签独占一行
</div><spa…
CSS左边宽度固定,右边自适应或者上面宽度固定,下面宽度自适应 ---------calc()方法
自己对css3不是很熟悉,之前竟然没有发现css里面也有类似js的计算高度的方法,今天偶然机会看到,特记录下来,涨涨记性
#div1 {width: calc(100% - 300px);//加入左边为300,右边div1则为100%-300px}
主要用于自适应屏幕宽度高度的一些要求,一句话搞定
品优购静态网页项目(1)
品优购项目--有所收获的部分目前完成的部分一：快捷导航部分二：header头部部分三：首页Main主要内容模块四：底部footer部分目前完成的部分 一：快捷导航部分 代码： html: <!-- 快捷导航部分 --><sect…
vue中滚动条样式调整
滚动条样式
/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {width: 6px; /*对垂直流动条有效*/height: 6px; /*对水平流动条有效*/
}/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{bord…
汇编程序设计-30-BX寄存器的使用
如何将CD 20放入到AX中？ 1.以前的方法： 2.使用BX: 如何将E505装入AX, 从结果可以看出BX,里面装的的偏移地址。 不管那种方式都是以DS中的地址为段地址。
CSS3 @font-face的使用
首先我们一起来看看font-face的语法规则： font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }
取值说明
1、YourWeb…
【CSS3】transition与animation的区别
animation ：可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一个周…
[译] 60 个有用 CSS 代码片段（下）
60 个有用 CSS 代码片段（下）
41、CSS3 鲜艳的输入
input[typetext], textarea {-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;ou…
【2023七夕】星河漫舞，七夕的璀璨之夜。分享：七夕表白的前端特效（附完整原代码+详细注释），情不知何起，却一往情深。愿天下有情人终成眷属
满山遍野你的脸庞，唯有遗忘是最漫长。 又一年的七夕了，今年，你还是孤单一人吗？ … …
若是的话，咱们可是一个阵营的！！！ 🎯作者主页： 追光者♂🔥 🌸个人简介： 💖[1] 计算机专业硕士研究生💖 🌿[2] 2023年城市之星领跑者TOP1(哈尔滨)🌿…
loading.io 常用首页加载动画效果
由于loading。io一直处于被墙的状态。很多时候想下点新颖的loading动画效果很蛋疼~~~ 1、齿轮效果
<div class"loadingio-spinner-gear-tg8ur5odjyg"><div class"ldio-kjzjekb5viq">
<div><div></div><div></div…
animate css动画小功能
1、动画结束回调: const element document.querySelector(.loadbar);//动画dom对象element.addEventListener(animationend, () > {//当前动画结束后时间element.classList.remove(animate__bounceInDown);element.classList.add(animate__shakeX,animate__slower,loopanim…
css3 动画animation 及@keyframes 规则
前端实现动画效果无非js与css 两种，这里主要讲一下css动画的实现以及区别
keyframes 规则
//宽度从100px 变成 200px
// boxW 为 方法名keyframes boxW {from {width:100px;}to {width:200px;}
}//或
//from（与 0% 相同）； to&a…
七夕情人节表白HTML前端代码
小伙伴们七夕来了，还是单人吗？赶紧拿着代码去表白试试，说不定能成功呢？小猪在这里祝福有情人终成眷属，喜欢的小伙伴可以点一波关注，就是对我最大的支持喔。
先演示一下（源码在下面）…
CSS实现开灯关灯的效果
CSS实现开灯关灯的效果
1. html文件
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><link rel"styl…
JavaScript计算字符串文本的宽度
JavaScript计算字符串文本的宽度 在使用canvas制作动画时，经常需要获取字符串的宽度与边缘进行对比，以下是通过js来获取任意字符串宽度的方法：
function getTextWidth(text, fontSize) {// 创建临时元素const _span document.createElement…
重写audio元素样式
audio {display: block;width: 200px;height: 40px;outline: none;filter: invert(180);
}/* 隐藏下载按钮及设置audio样式 */
CSS学习笔记2——高级选择器
层次选择器
后代选择器
body p{background: red;
}body后的p标签全部选中
子选择器
body>p{backgorund: yellow;
}body后一代的p全部选中
弟弟选择器
.ID p{background: blue;
}id为ID的标签的下面首个p标签被选中
通用选择器
.ID ~ p{background: green;
}id为ID的…
将Tomcat集成到IDEA中, 并创建JavaEE的项目,部署项目
前提条件
JDK和Tomcat配置成功
在idea配置Tomcat
打开IDEA , 选择菜单栏中的Run---->Edit Configurations…--------->打开Defaults(可能是别的,在我的电脑是Templates)------>Tomcat Server----->local
在右边的面板点Configure按钮,选择Tomcat安装的目录,…
CSS学习笔记1——导入、选择器、CSS优先级
语法讲解
CSS的三种导入方式
行内导入
<h1 style"color: red">实验文字</h1>内部导入
<head><style>h1{color: yellow;}</style>
</head>
<body>
<h1>实验文字</h1>
</body>外部导入
css文件
h1{…
前端web入门-移动web-day10
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录
移动Web基础
手机模拟器
屏幕分辨率
视口
二倍图
适配方案
rem 适配方案
rem
媒体查询
rem – …
vue-mall-beautiful（基于uview-ui的绝佳商城模板）学习
样式疑问 CTRLf我没找到这些样式 何为scoped？ 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组…
![[小实例]——超简洁静态登录页面](https://img-blog.csdnimg.cn/2020091320435635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmdvb2RsdWNrNjY2,size_16,color_FFFFFF,t_70#pic_center)
[小实例]——超简洁静态登录页面
静态登录页面
今天在网上看到一个后台登录页面，很简洁，看着也很舒服，就试着模仿做一下这个小案例(这个案例的水平很低，只是我复习css的第一步)。没有验证码和js逻辑，就只是简单地一个页面渲染。我感觉一般的后台管理登…
echarts图表主题--马卡龙macarons--自己配置主题颜色
用过echarts的人都几道，他的官网风格颜色对比强烈，这样儿式的： 大多时候和你的项目风格难免冲突，它有一些风格配置，我觉得马卡龙这个配色就很好： 当然，既然是配置项，肯定不止这一种…
vue中使用vue-lazyload懒加载
先放上官网官网入口，其实官网上已经说得很明白了，加深一下记忆： 1，下载npm i vue-lazyload -S 2，在main.js中引入：
import VueLazyload from vue-lazyloadVue.use(VueLazyload)
// 或者写配置项
Vue.use(…
图文讲解flexbox 布局 以及几个高频度属性的深度剖析。
文章目录display: flexflex-directionflex-growflex-shrinkalign-itemsjustify-contentflex布局中，涉及到的CSS属性以及对应的值还是非常多的。但实际应用中，其实只要掌握几个重要的核心属性就可以应付95%以上的场景了。这些属性如下：display…
结合CSS、JS实现类似DNA链
DNA链：
设计思路：先定位，再运动。
<!DOCTYPE html>
<html><head><meta charset"UTF-8"><title>JS生成动画</title><style type"text/css">*{margin: auto;padding: 0px;bac…
flowable工作流学习文档总结概要
1 简介
2 学习指南
2.1 Flowable初体验
2.1.1 Flowable是什么？
2.1.2 Flowable 和 Activiti
2.1.3 构建命令行应用程序
2.1.3.1 创建一个流程引擎
2.1.3.2 部署一个流程定义
2.1.3.3 启动一个流程实例
2.1.3.4 查询和完成一个任务
2.1.3.5 写一…
阿里巴巴字体图标iconfont使用
以前很早用过，中间很久没用了，最近项目需要，扒拉一下记忆，关于字体图标的好处就不赘述了，阿里巴巴矢量图标库入口，他官网上的三种用法： 也不多说了，网上大把的说明，就说…
浏览器去掉input框记住密码时的背景色
有时候登录页的背景色很深或者很整齐的时候，当用户登录过一次选择了记住密码，方便下次登录。下次进入的时候，记住密码的input就会有一个突兀的背景色，可以把它调成适合的颜色，也可以去掉：
input:-webkit-a…
页面里引入电子表字体
项目里有个时钟，我们UI做的电子数字那种，这是做好的： 字体文件在我的网盘里提取： 链接：https://pan.baidu.com/s/14yyfym4wHTXSTzHJxW8FXQ 提取码：svz6 复制这段内容后打开百度网盘手机App，操作…
CSS 自适应布局(flex布局)
已知： • 布局分为：父元素A和N个子元素B； • A宽度不固定：最小宽度为1000px，内部边距是32px • B的宽度不固定：相邻两个B元素的间距是16px，所有B的宽度相同，边框为1像素，…
弹性布局最后一行的元素的对齐方式设置
随着技术的不断更新换代，网页布局也增加了弹性布局方式，不得不说弹性布局是真的很好用，但好用的同时也给我们带来一些不便之处。比如在布局列表内容时经常会用到子项目的两端对齐，但最后一行不需要两端对齐 我们想要的布局样式 当…
边框图片、ES6模板字符、字体图标、立即执行函数
一、边框图片
边框图片： 这个属性允许指定一幅图像作为元素的边框
使用场景： 盒子大小不一，但是边框样式相同，此时就需要边框图片来完成 边框图片切图原理（重要）👇： 边框图片语法…
JavaWeb（10）——前端综合案例4（购物车示例）
一、实例需求 ⌛ 购物车需要展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作 等信息，还需要实时显示购买的总价。其中购买数量可以增加或减少，每类商品还可以从购物车中移除。最终实现的效果大致如图所示。 二、代码…
MUI调用微信支付wx.chooseWXPay
关于MUI请看上篇博文 此篇没有关于微信公众号调用API那些配置，只是梳理页面内支付逻辑
<!DOCTYPE html>
<html>
<head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width,initial-scale1…
![[100天挑战100个前端效果]第三天---实现导航条](https://img-blog.csdnimg.cn/20210322090621424.gif#pic_center)
[100天挑战100个前端效果]第三天---实现导航条
导航条的实现我们先来看看效果的实现html代码css代码新学到的知识总结复习知识我们先来看看效果的实现 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" …
移动端 1px 像素兼容性问题，实现1px 边框
我是利用伪类定位实现的。
.div{position: relative;padding-top: 20px;}.div::before {margin-top: 10px;display: block;content: ;box-sizing: border-box;position: absolute;z-index: 1;left: 0;top: 0;width: 100%;height: 1px;border-top: 1px solid #e7e8eb;transform…
框架学习之 Vue3
目录
Vue3 简介
1. Vue3 新特性
2. Vue3 的脚手架创建
3. 初识 setup
vue3 响应式
1. 实现原理
2. 定义响应式数据的函数
1）ref 函数
2） reactive 函数
3）reactive 对比 ref
3. 计算属性与监听属性
1）computed 计算…
1月6日 ~ 1月20日每日n个知识点之less的使用
less的使用什么是less基础认知css与less比较：css：less:嵌套注意点less注释less变量1.属性值变量写法2.属性变量和选择器变量写法(基本不用，除非你懒)变量遵守覆盖例子less混合1.普通混合2.无参混合3.带参数混合4.命名参数混合5.“匹配”混合l…
面试常问：水平居中和垂直居中的方法
水平居中
文本居中 如果元素为行内元素，可以将父元素的text-align属性设置为center，这样子元素就会水平居中对齐
.text{text-align: center;
}固定宽度的居中 如果元素宽度已知并固定，可以通过将左右margin设置为auto来实现水平居中。
.…
Vue2向Vue3过度核心技术组件通信
目录 1 组件基础知识scoped解决样式冲突1.1 默认情况：1.2 代码演示1.3 scoped原理1.4 总结 2 组件基础知识data必须是一个函数2.1 data为什么要写成函数2.2 代码演示2.3 总结 3 组件通信3.1 什么是组件通信？3.2 组件之间如何通信3.3 组件关系分类3.4 通信…
css滚动条样式这样修改下很漂亮
<!DOCTYPE html>
<html>
<head>
<meta charset"utf-8">
<title>滚动条样式修改下很漂亮(不支持IE)</title>
<style type"text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 100px;
margin…
css3英文文字换行，超过两行...展示
需求：超过两行...展示
开发的过程中发现div内容中文可以换行英文不换行，导致长度会溢出。
是英文全英文的话浏览器会解析成一个单词，
加上这句就好了
word-break:break-all;
一开始不知道是会解析成一个单词，用字符串拼接处理…
VUE环境下 CSS3+JS 实现发牌 翻牌
创建牌容器（关键点：overflow：hidden）：
<div class"popup-box"></div>
.popup-box {position: absolute;width: 100vw;height: 100vh;top: 0px;left: 0;overflow: hidden;
}
创建每一张牌《固…
如何让你的jupyter notebook 排版得像Word（Markdown和网页文件写法）
案例背景
很多时候我们在jupyter notebook里面的写代码，画图，但是文字分析什么的写在里面纯文本不好看，需要进行排版，那么就得用markdown的写法，如何还想居中或者更花里胡哨的字体，那就得要网页文件的一些…
动画keyframes
实现效果： css代码
* {padding: 0;margin: 0;
}
.heart {postion: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;background-color: #f00;/* 逆时针旋转45 */transform: rotate(-45deg); /* 动画名 */animation-name: he…
CSS浮动、定位及精灵技术
CSS传统布局
标准流：也可称为普通流。即标签按规定好的默认方式排列（块级元素纵向排列）。浮动：脱离标准流的控制移动到指定位置（多个块级元素横向排列）。特性：浮动的盒子不在保留原先的位置&am…
前端判断设备是竖屏还是横屏
使用Css进行不同移动端设备状态的判断，在设备发生变化的时候，样式会自动生成
// 竖屏展示
media screen and (orientation: portrait) {body {background-color: red;}
}// 横屏展示
media screen and (orientation: landscape) {body {background-colo…
【教程视频】HTML5与CSS3与JavaScript实现动态网页系列课程+项目实战
前端大咖的成长与蜕变，从这里开始
众所周知，罗马不是一天建成的，前端大咖自然也不是一个路径就能搞定的。因此，作为基础咖的本路径，将帮助你实现的是从简单的“会做网页”，到略显牛x的“做好动态网页”。简…
微信小程序使用阿里矢量图自定义icon
在微信小程序中使用icon
1.在阿里矢量图官网选好图标加入我的项目，在项目中点击Font class和查看在线链接， 2.然后会生成链接地址，点击进入 3.复制代码 4.在微信开发者工具中创建样式文件将代码复制进去，将.iconfont 更改成 [cl…
css如何给盒子底部加阴影,CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)
CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用：
1，盒子阴影
(1)盒子阴影的…
如何在CSS中水平居中一个元素？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用 margin: 0 auto⭐ 使用 Flexbox 布局⭐ 使用绝对定位和负边距⭐ 使用表格布局⭐ 使用网格布局⭐ 写在最后 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅…
05_css选择器的使用
一、css选择器的类型 1、标签选择器 用法：直接写 写标签名：标签名{} 示例： <!-- <!DOCTYPE html -->
<html><head><meta charset"utf-8"><title>标签选择器</title><style type"te…
![[pig框架实战] 手撕视频管理发布平台[02] - pig框架源码分析（去除开发过程中每次输入验证码的过程，方便快速登录）](https://img-blog.csdnimg.cn/4ce9f7c537c44687afdfe588966501a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSc54yr6YCQ5qKm,size_14,color_FFFFFF,t_70,g_se,x_16)
[pig框架实战] 手撕视频管理发布平台[02] - pig框架源码分析（去除开发过程中每次输入验证码的过程，方便快速登录）
需求
将自己搭建好的项目添加到pig项目中去除开发过程中每次输入验证码的过程，方便快速登录 去除验证码校验（服务器端）去除验证码校验（前端）
将自己搭建好的项目myvideos添加到pig项目中 File -> New ->《 Mo…
富文本编辑器开发系列7——textRange对象详解
富文本编辑器开发系列7——textRange对象API详解
系列文章快速阅读： 富文本编辑器开发系列-1-基础概念 富文本编辑器开发系列2-document.execCommand 的API 富文本编辑器开发系列3-selection 富文本编辑器开发系列4——Range对象 富文本编辑器开发系列5——浏览器S…
HTML+CSS 查漏补缺
目录 1，HTML1，尺寸的百分比1，普通元素2，绝对（固定）定位元素3，常见百分比 2，form 表单元素1，form2，button3，label4，outline5࿰…
【css | linear-gradient】linear-gradient()的用法
linear-gradient() CSS函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像,其结果是<gradient>数据类型的对象,此对象是一种特殊的<image> 数据类型。 先看一个线上的示例 https://code.juejin.cn/pen/7277486410842996771
语法
/* 渐变轴为 45 度&…
Vue2项目练手——通用后台管理项目第七节
Vue2项目练手——通用后台管理项目 用户管理分页使用的组件Users.vuemock.js 关键字搜索区Users.vue 权限管理登录页面样式修改Login.vue 登录权限使用token对用户鉴，使用cookie对当前信息保存（类似localstorage）Login.vuerouter/index.js 登…
CSS 设置渐变背景 CSS 设置渐变边框
一、css渐变背景添加透明度opacity
css渐变背景经常会在项目开发中遇到，此时UI如果给出的是单一的渐变背景（没有背景透明度），这个我们会很快的写出代码，如下: <div class"btn">这是一个按钮</div&…
自己开发一个接口文档页面html
演示效果 具体代码如下
<!DOCTYPE html>
<html lang"zh-CN">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>框架框架文档页面</…
CSS 修改el-calendar的样式，自定义样式
需求：自定义elementui的日历的样式；给符合条件的时间展示红点。
elementui的原始样式： 目标样式： 代码实现：
html:
<el-calendar v-model"calendarValue"><template slot"dateCell" …
CSS 学习笔记（基础）
用来控制网页表现的语言，CSS（Cascading Style Sheet）：层叠样式表。然后我们继续看看 W3C 标准：
结构：HTML表现：CSS行为：JavaScript
CSS导入方式、选择器&属性
由于网页的框架…
【简洁】【皮肤美化】博客园页面美化 主文章加宽
效果： 选择：Bluesky皮肤
再加入的css: #home {background-color: #e6e6e6;
}
#top_nav{
background-color: #e6e6e6;
}
#navigator, #under_post_card1, #ad_t2 , #nav_right, #nav_left, #cnblogs_c1, #under_post_card2, #HistoryToday, #green_chann…
htmlCSS-----高级选择器
目录
前言
伪类选择器
状态类
结构类 伪元素选择器
属性选择器 前言 前面我们学习了CSS中的相关选择器（链接html&CSS-----CSS选择器（上）_灰勒塔德的博客-CSDN博客 html&CSS-----CSS选择器（下）_灰勒塔…
用flex实现grid布局
1. css代码
.flexColumn(columns, gutterSize) {display: flex;flex-flow: row wrap;margin: calc(gutterSize / -2);> div {flex: 0 0 calc(100% / columns);padding: calc(gutterSize / 2);box-sizing: border-box;}
}2.用法
.grid-show-item3 {width: 100%;display: fl…
【CSS动画06--弹性Tab标签】
CSS动画06--弹性Tab标签 介绍HTML 介绍
他是一个弹性的Tab标签
HTML tab <!DOCTYPE html>
<html><head><meta http-equiv"content-type" content"text/html; charsetutf-8"><meta name"viewport" content"wid…
2023前端面试笔记 —— CSS3
系列文章目录
内容链接2023前端面试笔记HTML52023前端面试笔记CSS3 文章目录 系列文章目录前言一、CSS选择器的优先级二、通过 CSS 的哪些方式可以实现隐藏页面上的元素三、px、em、rem之间有什么区别？四、让元素水平居中的方法有哪些五、在 CSS 中有哪些定位方式六…
css3有哪些新特性?(包含哪些模块)
css3有哪些新特性?包含哪些模块？以下是整理的21个css3新特性： 1.新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 2.新增伪元素 ::before 和 ::after 3.弹性盒模型 display: flex; 4.多列布局 column-count: 5; 5.媒体查询 media (max-width:…
平台登录页面实现（一）
文章目录 一、实现用户名、密码、登录按钮、记住用户表单1、全局css代码定义在asserts/css/global.css 二、用户名、密码、记住用户的双向绑定三、没有用户，点击注册功能实现四、实现输入用户名、密码、点击登录按钮进行登录操作五、实现表单项校验六、提交表单预验…
前端学习笔记002：CSS3
CSS（Cascading Style Sheets，层叠样式表），是开发前端应用必不可少的一个工具。打个比方，HTML5 是身体，那 CSS3 就是穿在身体上的衣服，他让一整个 HTML5 网页变得更美观。下文我们就来整理 CSS~ …
transition 和 animation 的区别
在 CSS 中，transition 和 animation 都可以用来控制元素的动态效果，但是它们在实现方式、应用场景、性能上有一些区别。
1、 实现方式的区别
transition： 过渡属性，强调过渡；通过在 CSS 属性的变化过程中进行过渡…
HTML5+CSS3+移动web 前端开发入门笔记（一）
千古前端图文教程
千古前端图文教程
git的使用
Git是一个分布式版本控制系统，它的作用主要包括以下几个方面： 版本管理：Git可以跟踪文件的修改历史，记录每次提交的内容、时间和作者等信息。通过Git，开发人员可以轻…
深入理解css3背景图边框
border-image知识点 重点理解 border-image-slice 设置的值将边框背景图分为9份，图像中间的舍弃，其他部分图像对应边框的相应区域放置，上右下左四角固定，border-image-repeat设置的是除四角外其他部分的显示方式。 截图来自菜鸟教…
子元素hover控制父元素的hover
vue 中 子元素hover控制父元素的hover
在代码中，父元素使用:class"{ hover: isHovered }"绑定了一个hover类，当isHovered为true时，父元素会应用hover类的样式。子元素通过mouseover和mouseleave事件分别在鼠标悬停和离开时修改isH…
HTML5、CSS3、ES6新特性总结
当谈到 HTML5、CSS3 和 ES6 的新特性时，这些技术的发展都在很大程度上改变了前端开发的方式和用户体验。
HTML5新特性
1. 语义化标签：HTML5 引入了一系列语义化标签（例如 <header>、<nav>、<section>、<footer> 等…
CSS3的新特性都有哪些？
1.选择器：css引入了一系列新的选择器，使得选择器元素更加灵活和准确
2.边框样式：css3允许开发人员使用border-image属性来讲图象作为边框
3.盒模型：引入box-shadow属性，使得可以为元素加阴影效果
4.渐变：…
css实现圆角三角形，圆角三角形的实现
今天给大家带来一个如何实现圆角三角形的方案，这个方案虽然可以实现，但是也是借助拼凑等方式来实现的，假如想一个div来实现圆角三角形，还是比较困难的。之前文章讲了如何实现对话框，里面介绍了三角形的实现方式。今天讲…
动画圆圈文字标志效果
效果展示 CSS 知识点
实现圆圈文字animation 属性回顾
实现思路
从效果的实现思路很简单，其实就是两个圆圈就可以实现。外层大圆（灰色）用于圆圈文字的展示，而内圆（藏青色）主要用于存放 Logo 图片。布局采…
粘性文本整页滚动效果
效果展示 CSS 知识点
background 相关属性综合运用position 属性的 sticky 值运用scroll-behavior 属性运用scroll-snap-type 属性运用scroll-snap-align 属性运用
整体页面效果实现
<div class"container"><!-- 第一屏 --><div class"sec&qu…
css3动画基础详解（@keyframes和animation）
动画是使元素从一种样式逐渐变化为另外一种效果，CSS3动画的生成，主要依赖keyframes定义动画，animation执行动画。
keyframes
通过 keyframes 规则创建动画。 keyframes keyframes-name {keyframes-selector {css-styles;}}keyframes-name 帧…
qtabwidget 样式表
.QWidget{background-color: #ffffff;
}/*设置TabWidget中QTabBar的样式*/
QTabWidget{background-color: #E6EBE8;
}
QTabBar::tab{background-color: #DEDEDE;font-family:Source Han Sans CN; /*设置tab中的文本的字体*/font-size:20pt;font-weight: normal;color:#3D3D3…
外部统一设置了::-webkit-scrollbar { display: none； }如何单独给特定元素开启滚动条设置样式-web页面滚动条样式设置
如果你在外部统一设置了::-webkit-scrollbar { display: none; }来隐藏滚动条，但是想要在.lever元素中单独开启滚动条的样式，你可以使用CSS的级联选择器来覆盖外部样式。 以下是一个示例，展示如何给.lever单独开启…
前端Vue自定义精美上下滚动通告栏组件 常用于展示公告信息 上下滚动跑马灯 上下滚动广播
前端Vue自定义精美上下滚动通告栏组件 常用于展示公告信息 上下滚动跑马灯 上下滚动广播,下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id13318
效果图如下: # cc-noticeBar
#### 使用方法
使用方法
<!-- 默认颜色#333公告栏 -…
CSS3 background 背景
background-clip 规定背景的绘制区域。 可选参数 padding-box 背景图像从内边距区域开始显示。border-box 背景图像从边框开始显示。content-box背景图从内容框开始显示。 background-origin 规定背景图片的定位区域。 可选参数 padding-box 背景图像从内边距区域开始…
css flex弹性布局 一行三列布局
flex弹性布局可以很好的解决浮动布局里面不能垂直居中，和经常由屏幕大小导致的自动换行问题
下面是一个一行三列的布局水平居中
效果图 HTML代码
核心说明：只要以下3个样式，实现一行3列
display: flex; 让div成为弹性布局
justify-conte…
CSS系列——行内块inline-block元素之间出现空白间隙原因及解决办法
行内块inline-block元素之间出现空白间隙原因及解决办法基本布局产生间隙的原因解决方法【7个】方法1：行内元素写在一行方法2：行内元素之间加上空白注释方法3：父元素的 font-size 设置为 0，子元素单独设置 font-size方法7…
新拟态 (Neumorphism / soft ui) UI CSS设计示例分享
在过去的几个月中，新拟态（Neomorphic）的UI设计风靡一时。它被誉为2020年最火的UI设计趋势之一，在互联网上广受欢迎。Neumorphism融合了Skeuomorphism和平面设计技术。就像拟态（Skeoumorphism）一样ÿ…
Vue3.0beta版本实战小demo(ref reactive torefs computed watch watcheffect vuex router)
项目首页截图 github地址
觉得写的还不错的可以给一个star
文字过多时出现省略号的CSS
文字过多时出现省略号的CSS width:200px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
![[100天挑战100个前端效果]第二十四天---群玉山头见](https://img-blog.csdnimg.cn/20210526103236458.gif#pic_center)
[100天挑战100个前端效果]第二十四天---群玉山头见
画群山让我们先来看看实现的效果(接二十三天)html代码css代码设计思路与今日份知识总结设计思路知识总结让我们先来看看实现的效果(接二十三天) html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta …
Vue 指令（内置+自定义）
一、v-text 指令 1. 作用： 向其所在的节点中渲染文本内容 2. 与插值语法的区别： v-text 会替换掉节点中的内容，{{xx}} 则不会，意思就是用了 v-text 之后，再在标签中间写内容就没有意义了， 因为会被替换掉 …
前端web入门-移动web-day09
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录
空间转换
空间转换 – 平移
视距 perspective
空间 – 旋转
立体呈现 – transform-style
空间转换…
html+css实现3D相册
<!doctype html>
<html lang"en">
<head>
<meta charset"UTF-8">
<title>旋转相册</title>
<style type"text/css">
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,…
css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现
实现效果： html代码：
<div class"sidenav"><ul class"nav-text progressbar"><!-- data-target的值对应要跳转的模块的id --><li data-target"module1"><div class"text">锚点…
安排一个3D相册html+css全部代码
直接运行就好
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>我</title><style>body{padding: 0;margin: 0;}ul,ol{list-style: none;padding: 0;margin: 0;}div{margin: 100px auto;po…
ES6之 let 声明
看到了一个很有意思的例子
问题
最近看到一串代码：
var test 1;
function func(){//打印test的值console.log(test); //undefindlet test 2;
};
func();很神奇，如果按我以前的认知，let 没有变量提升，这里一定会打印“1”&…
使用 CSS3 实现转盘抽奖效果
微信和大型商场常常会有转盘抽奖的活动，比如上海移动和教授的抽取积分活动等。我们可以通过CSS3的transform属性来实现转盘的旋转。同时，transition属性实现过渡动画，它具有四个子属性，依次为
1. transition-property&#…
html动态爱心代码【二】(附源码)
目录 前言
效果演示
内容修改
完整代码
总结 前言
七夕马上就要到了，为了帮助大家高效表白，下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐，可用于520，情人节，生日，表白等场景，…
css实现一行四个元素动态布局
主要用到的是flex布局，还有css3的伪类选择器。多复习巩固啊。。。。
<ul class"center-ads-list"><li><a href"/"><img alt"" src"https://res.vmallres.com/pimages//pages/picImages/93724597641619542…
webp→png：图片格式的优雅降级
背景： 项目中一直使用的图片格式是png，因为其无损压缩，分辨率高的同时体积相对也会大一些，在H5中，如果使用了大量图片，而且每一张图片体积都很大，几百K甚至几兆，那页面的性能会很低。…
flex布局的详细解答
我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。
而flex布局则是一种新的布局方案，通过为…
【css】linear-gradient()的用法
linear-gradient() CSS函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像,其结果是<gradient>数据类型的对象,此对象是一种特殊的<image> 数据类型。 语法
/* 渐变轴为 45 度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);/* 从右…
前端架构师之路03_移动端规范兼容处理
1 移动端页面制作规范 1.1 计量单位的使用
CSS 的计量单位选择 px：固定的像素值em：相对父级元素的 font-size 设置来作为当前元素 1em 所代表的像素值，如父节点的 font-size:10px，当前节点的 font-size:1.2em，则当前节…
html 边缘融合加载
html 代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>边缘融合加载</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;padding-bottom: 80px;b…
vue2人脸检测录入
1.自行去下载tracking.js
2.三个canvas，一个显示完整摄像头，一个在摄像头上显示人脸矩形框，一个截取人脸
<template><div><div><p>脸部放入红色矩形框</p><video id"video" style"transfo…
渐变色毛玻璃形态卡悬停效果
效果展示 页面结构组成
从上述的效果展示可以看出，页面的组成部分主要包含这几个部分：
渐变色的底层方块毛玻璃的内容层内容层上的两个小方块
CSS 知识点
transformlinear-gradient
实现页面结构布局
<div class"box"><span>…
3D 毛玻璃晶质见证卡
效果展示 页面结构
从上面的效果展示来看，页面主要成员是一张卡片，并且卡片上有三个小矩形，而小矩形上会展示对应的内容。
当鼠标悬停在卡片上时，卡片会随着鼠标的移动而改变视角。
CSS3 知识点
transform-style 属性的 prese…
css3实现页面元素抖动效果
html
<div id"shake" class"shape">horizontal shake</div>js（vue3） function shake(elemId) {const elem document.getElementById(elemId)console.log(获取el, elem)if (elem) {elem.classList.add(shake)setTimeou…
自定义元素宽高比例（aspect-ratio）与@supports兼容支持和图片裁剪（object-fit）的用法
使用grid布局可以轻松实现响应式布局，子元素只需要设置最小宽度即可，如果对子元素没有设置高度，那么高度取决于内容的最大值，这样显然是不稳定的，如下图所示： 出现这种问题就造成布局混乱了，可…
【css3】涟漪动画
效果展示 dom代码
<div class"mapSelfTitle66"><div></div>
</div>
样式代码
.mapSelfTitle66{width:120px;height:60px;position: relative;&>div{width:100%;height:100%;background: url("~/assets/images/video_show/err…
25.CSS自定义形状按钮与悬停效果
效果 源码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS Custom Shape Button</title><link rel="stylesheet" href="style.css">
</head>
<body&…
CSS3 2D、3D转换
一、CSS3 2D转换：
CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。
2D变换的方法：translate()、rolate()、scale()、skew()、matrix()。
<style>
div
{
width:200px;
height:100px;
background-color:red;
/* Rotate div */
tran…
CSS3 过度效果、动画、多列
一、CSS3过度： CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两相内容：指定要添加效果的CSS属性；指定效果的持续时间。如果为指定持续时间，transition将没有任何效果。
<style>
div…
前端面试题之CSS篇
1、css选择器及其优先级 标签选择器: 1类选择器、属性选择器、伪类选择器：10id选择器：100内联选择器（style“”）：1000!important：10000
2、display的属性值及其作用
属性值作用none元素不显示，…
前端--性能优化【1】--网络优化与页面渲染优化
一、网络优化
1、DNS预解析
link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址
2、CDN（网络分发系统）
用户与服务器的物理距离对响应时间也有影响。
内容分发网络（CDN）是一组分散在不同地理位置的 web…
移动端1px-从基本原理到开源解决方案介绍
1px 不够准确，应该说成 1 物理像素 为什么有 1px 这个问题？实现 1px 有哪些方法？这些方法分别有哪些优缺点？开源项目中使用的哪些解决方案？如何在项目中处理 1px 的相关问题？ 基本概念 首先，我们…
【CSS】常见 CSS 布局
1. 响应式布局
<!DOCTYPE html>
<html><head><title>简单的响应式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: …
WebMagic - 创意前端项目集合（点击链接可在电脑上查看效果）
WebMagic - 创意前端项目集合
欢迎来到 WebMagic 仓库！这里汇集了一系列令人惊叹的前端项目，涵盖了HTML5、CSS3和JS等多项技术。无论你是前端开发者、设计师，还是对创意互动内容感兴趣的人，这个仓库都将为你带来无尽的惊喜。
每…
CSS常见选择器总结
1.简单选择器
简单选择器是开发中使用最多的选择器，包含： 元素选择器，使用元素的名称 类选择器，使用.类名 id选择器，使用#id id注意事项： 一个HTML文档里面的id值 是唯一的，不能重复 id值如…
如何让元素在页面中完美居中？看这篇文章就够了！
🎬 江城开朗的豌豆：个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》
⛺️ 生活的理想，就是为了理想的生活 ! 目录 ⭐ 专栏简介 📘 文章引言
一…
从入门到精通：深入了解CSS中的Grid网格布局技巧和应用！
🎬 江城开朗的豌豆：个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》
⛺️ 生活的理想，就是为了理想的生活 ! 目录 ⭐ 专栏简介 📘 文章引言
一…
全栈之前端 | 2.CSS3基础知识之选择器学习
关注回复【学习交流群】加入【安全开发运维】答疑交流群 请朋友们【多多点击文中的广告】，支持作者更新更多文章。 目录: 0x00 前言简述 Q: 选择器是什么？ 你也许已经见过选择器了。CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览…
@keyframes css3动画技巧与代码实例
CSS3动画技巧
CSS3提供了非常强大的动画效果功能，可以通过简单的CSS代码来实现各种动画效果，比如旋转、缩放、闪烁等等。下面介绍一些常用的CSS3动画技巧和代码实例。
使用keyframes关键字创建动画
keyframes是用来定义动画的关键字，通过定…
24.动画魔术菜单指示器
效果 源码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative CSS Navigation Indicator</title>
<link rel="stylesheet" hre…
element-plus走马灯不显示
问题描述
依赖正确，代码用法正确，但是element-plu走马灯就是不显示！！ <div class"content"><el-carousel height"150px" width"200px"><el-carousel-item v-for"item in 4&qu…
前端 CSS - 如何隐藏右侧的滚动条 -关于出现过多的滚动条导致界面不美观
1、配置 HTML 标签，隐藏右侧的滚动条
CSS 配置：下面两个一起写进进去，适配 IE、火狐、谷歌浏览器
html {/*隐藏滚动条，当IE下溢出，仍然可以滚动*/-ms-overflow-style:none;/*火狐下隐藏滚动条*/overflow:-moz-scroll…
css transition属性
如果想实现一些效果：比如一个div容器宽高拉伸效果，或者一些好看的有过渡的效果可以使用
定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property
transition-duration
transition-timing-func…
前端面试题汇总含答案
前端工程师 JavaScript面试题/训练题 1. [单选题] 有以下ES6代码 function * gen() {yield 1; yield 2; yield 3; } 下面选项描述正确的是哪个？ A.gen()执行后返回2 B.gen()执行后返回undefined C.gen()执行后返回一个Generator对象 D.gen()执行后返回1 来自：百度2016研发工程…
CSS3 边框、圆角、背景
CSS3是最新的CSS标准。CSS3被拆分为“模块”。一些最重要的CSS3模块如下：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。
一、CSS3边框： 用CSS3，可以创建圆角边框、添加阴影框，并作为边界的形象而…
“构建交互式用户界面的自定义组件应用与界面布局设置“
目录 引言自定义组件应用设置界面布局投票界面布局及实现投票选项界面总结 引言
在软件开发中，用户界面设计是至关重要的一环。良好的界面设计可以提升用户体验、增加用户黏性，并提高软件的易用性。本篇博客将介绍如何利用自定义组件应用和界面布局设置…
TailwindCSS 如何处理RTL布局模式
背景
TikTok作为目前全世界最受欢迎的APP，需要考虑兼容全世界各个地区的本地化语言和阅读习惯。其中对于阿拉伯语、波斯语等语言的阅读书写习惯是从右向左的，在前端有一个专有名字RTL模式，即Right-to-Left。
其中以阿拉伯语作为第一语言的人…
前端--性能优化【上篇】--网络优化与页面渲染优化
一、网络优化
1、DNS预解析
link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址
2、CDN（网络分发系统）
用户与服务器的物理距离对响应时间也有影响。
内容分发网络（CDN）是一组分散在不同地理位置的 web…
CSS3属性详解（一）文本 盒模型中的 box-ssize 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 前端开发入门笔记（七）
CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表（Cascading Style Sheets）。下面是一些常用的CSS3属性及其详细解释： border-radius：设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径，也可…
功能案例 -- 通过开关,改变白天和黑夜
效果展示 代码展示
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>:root {--default-bac-color: #f…
微信小程序合集更更更之实现自定义tabbar凹起效果
实现效果 写在最后🍒
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~
html-网站菜单-点击菜单展开相应的导航栏，加减号可切换
一、效果图
1.点击显示菜单栏，点击x号关闭； 2.点击一级菜单，展开显示二级，并且加号变为减号； 3.点击其他一级导航，自动收起展开的导航。 二、代码实现
<!DOCTYPE html>
<html><head>&…
HTML5+CSS3小实例：悬停带提示的导航栏
实例：悬停带提示的导航栏
技术栈：HTML+CSS
字体图标库：Font Awesome
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="vi…
![[ CSS ] 内容超出容器后 以...省略](https://img-blog.csdnimg.cn/img_convert/bc83ef4b5bda4b80c35ef58352dacb6e.jpeg)
[ CSS ] 内容超出容器后 以...省略
内容超出容器后 以…省略
当前效果
代码
<template><div class"box">有志者，事竟成，破釜沉舟，百二秦关终属楚; 有心人，天不负，卧薪尝胆，三千越甲可吞吴</div>
</templa…
前端开发入门笔记（八）CSS3属性详解：动画详解+Flex布局图文详解+Web字体
参考链接：https://web.qianguyihao.com/02-CSS%E5%9F%BA%E7%A1%80/12-CSS3%E5%B1%9E%E6%80%A7%E8%AF%A6%E8%A7%A3%EF%BC%9A%E5%8A%A8%E7%94%BB%E8%AF%A6%E8%A7%A3.html#_3%E3%80%81%E6%97%8B%E8%BD%AC%EF%BC%9Arotate
过渡
transition的中文含义是过渡。过渡是CSS…
常用布局以及其优缺点
当涉及到设计和排版时，有许多不同的布局方式可供选择。以下是几种常见的布局方式以及它们的优缺点： 流式布局（Fluid Layout）： 优点：能够根据屏幕大小自动调整内容，适应不同设备。灵活性高&#…
JavaWeb——CSS3的使用
目录 1. CSS概述
2. CSS引入方式
3. CSS颜色显示
4. CSS选择器
4.1. 元素（标签）选择器
4.2. id选择器
4.3. 类选择器
4.4. 三者优先级
5. 盒子模型 1. CSS概述
CSS，全称为“Cascading Style Sheets”，中文译为“层叠样式…
CSS实现图片滑动对比
实现效果图如下： css代码：
知识点：resize: horizontal; 文档地址 <style>.image-slider {position: relative;display: inline-block;width: 500px;height: 300px;}.image-slider>div {position: absolute;top: 0;bottom: 0;left: …
HTML5+CSS3小实例：炫酷的流边按钮
实例：炫酷的流边按钮
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="wid…
van-dialog弹窗异步关闭-校验表单
van-dialog弹窗异步关闭
有时候我们需要通过弹窗去处理表单数据，在原生微信小程序配合vant组件中有多种方式实现，其中UI美观度最高的就是通过van-dialog嵌套表单实现。 通常表单涉及到是否必填，在van-dialog的确认事件中直接return是无法阻止…
天马行空的超级炫酷旋转图片-前端
一、实现代码（html部分）
<!DOCTYPE html>
<html>
<head lang"en"><meta charset"UTF-8"><title>3D旋转</title><style type"text/css">*{padding: 0;margin: 0;}body,html{he…
![[HTML]Web前端开发技术6（HTML5、CSS3、JavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页](https://img-blog.csdnimg.cn/direct/9203d0696ea4484d81dc41a733715f64.png)
[HTML]Web前端开发技术6（HTML5、CSS3、JavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…
JS特效：跟随鼠标移动的小飞机
前端网页中，用JS实现鼠标移动时，页面中的小飞机向着鼠标移动。
效果
源码
<!DOCTYPE html>
<html><head><style>*{margin: 0;padding: 0;}body{height: 100vh;background: linear-gradient(200deg,#005bea,#00c6fb);}#plane{…
三栏布局，中间自适应
方法一：两边使用float 中间使用margin
方法二：两边使用absolute 中间使用margin
方法三：flex 布局
方法四：grid 布局 方法一：相关HTML代码【两边使用float 中间使用margin】
<div class"container"…
登录界面(flex布局练习)
练习：登录界面在我们网页制作的过程中经常遇见，所以请你编写一个界面联系一下，这个可以增加一些动画或者是其他的效果，当然越帅越好。请使用flex或者其他布局练习
例如： 代码
<!DOCTYPE html>
<html lang…
HTML5+CSS3小实例：纯CSS实现文字组成肖像特效
实例：纯CSS实现文字组成肖像特效
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" conten…
CSS3媒体查询实现不同宽度的下不同内容的展示
文章目录 前言CSS3 多媒体查询实例520 到 699px 宽度 - 添加邮箱图标700 到 1000px - 添加文本前缀信息大于 1001px 宽度 - 添加邮件地址大于 1151px 宽度 - 添加图标代码后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏：CSS ὃ…
功能案例 -- 拖拽上传文件,生成缩略图
直接看效果 实现代码
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>拖拽上传文件</title>&l…
前端---JavaScript篇
1. 介绍
JavaScript 是 前端开发人员必须学习的 3 门语言中的一门：
HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为
接下来开始详解JavaScript。
2.引入方法
js有两种导入方式，一种是内部脚本：直接在html页面中…
CSS3过渡与动画，2D与3D
背景和边框
1. border-image
该属性用于定义元素边框的背景图像 语法：border-image:none | url(img) imagesection [/imagewidth] imaghandling 其中imagesection定义用于边框不同部分的图像部分。imagesection值可以由图像上的4条分隔线组成，每条线以…
css三角，鼠标样式，溢出文字
目录
css三角
鼠标样式
例子：页码模块
溢出文字表示方式
margin负值运用
css三角强化 css三角
css三角中：line-height：0和font-size：0是防止兼容性的问题
jd {position: relative;width: 120px;height: 249px;background-…
CSS实现一些小功能
1.信封边框的实现
1.1 使用背景渐变
<!DOCTYPE html><html><head><meta charset"UTF-8"><title></title><style type"text/css">.uu {width: 200px;height: 70px;padding:1em;border: 1em solid transparent;…
vue实现左侧固定菜单栏锚点及滚动高亮（组件封装）
vue实现左侧固定菜单栏锚点及滚动高亮
先上总代码：
子组件：
<!-- LeftSidebar.vue -->
<template><div class"left-sidebar"><a v-for"(item, index) in sidebarItems" :key"index" click"s…
无限移动的风景 css3 动画
<style>*{margin:0;padding:0;/* box-sizing: border-box; */}ul{list-style: none;}#nav{width:900px;height:100px;border:2px solid rgb(70, 69, 69);margin:100px auto; overflow: hidden;}#nav ul{animation:moving 5s linear infinite;width:200%; /*怎么模拟动画…
CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法
当使用弹性布局时，设置父容器为弹性容器后，弹性子元素的文本内容超出宽或高后会撑开弹性子元素的原本应该显示的宽高，溢出父容器，只要设置弹性子元素的宽或高（由父容器弹性排列方向决定）的属性值为0即可解决…
简析transform,transition,animation,@key frames的关系
这是基于慕课网10天精通css3教程后想写的内容； 引用w3c中的概念 ： transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。（scale(x,y)变形-缩放 、变形--位移 translate(x,y)，transform-or…
CSS3-loading动画（五）
CSS3-loading加载动画
在线示例demo：http://liyunpei.xyz/loading.html
之前发了四篇，二十二个效果，今天再分享六个效果，总计二十八个效果。
二十三、效果二十三 两个正方形，初始均定位至左上（top&#…
CSS3伪类使用方法实例
有时候在网页设计中会涉及到很多看上去很繁琐的设计图，这时候都会很让人头疼，那么这时候伪类就可以来帮助你解决问题了。
下面有一段实例大家可以参考一下； 1 <!DOCTYPE html>2 <html>3 <head>4 <meta cha…
wow.js animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果，还挺不错的，玩了一个上午，现在介绍一下这个滚动动画： 一、使用方法：
1.下载animate.css
2.下载wow.js
3.引用文件，像这样： <link href&q…
【CSS】自定义滚动条样式
自定义滚动条样式
效果 index.css
*::-webkit-scrollbar {width: 12px;height: 12px;
}
*::-webkit-scrollbar-button {width: 0px;height: 0px;display: none;
}
*::-webkit-scrollbar-corner {background-color: transparent;
}
*::-webkit-scrollbar-thumb {border: 4px s…
【JavaScript】封装Toast弹窗
效果 代码
/*** 封装Toast提示* param {提示信息} msg * param {延迟时间} duration */
function Toast(msg, duration) {duration isNaN(duration) ? 3000 : duration;var m document.createElement(div);m.innerHTML msg;m.style.cssText "font-family:siyuan;max…
CSS 每日一练:EverydayCss
CSS 每日一练
初心：每日一个 CSS 小特效，精进 CSS 技术。 所有代码均在上方，可以自行下载改动。每天持续更新, Day01~Day100 的案例是仿照这个 ->100daycss<- 用 ReactLess 重写的, Day100 以后的内容是看到网上有趣的 CSS 特效重构的…
纯css html 真实水滴效果
惯例,不多说直接上图 秉承着开源精神,我们将这段代码无私地分享给大家，因为我们深信，信息的共享和互相学习是推动科技进步的关键。我们鼓励大家在使用这段代码的同时，也能够将其中的原理、思想和经验分享给更多的人。
这份代码是我们团队用心…
jquery移动轮播图插件 样式齐全
slick官方文档http://kenwheeler.github.io/slick/
网站地址:----------- http://kenwheeler.github.io/slick GitHub:------------- https://github.com/kenwheeler/slick 网站描述: -----------一个基于 jQuery 的幻灯片插件 fly63 前端网 插件 http://www.fly63.com/nav/57…
VUE2+THREE.JS 模型上方显示信息框/标签(CSS3DSprite精灵模型)
THREE.JS 模型上方显示信息框/标签---CSS3DSprite精灵模型 1.CSS2DRenderer/CSS3DRenderer/Sprite的优劣2.实现模型上方显示信息框2.1 引入2.2 初始化加载的时候就执行此方法2.3 animate循环执行2.4 获取设备状态并在每个设备上显示设备状态2.5 样式 CSS3DSprite精灵模型面向摄…
10款有趣的前端特效代码分享（附图文效果及在线预览）
分享10款非常有趣的前端特效源码 其中包含css动画特效、js原生特效、svg特效以及小游戏等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源
纯CSS绘制相机拍照动画
纯CSS绘制相机拍照动画 会有左右调整角度以及打开快门声的…
【前段基础入门之】=＞CSS3新特性 响应式布局
文章目录 概念媒体查询媒体类型媒体特性媒体运算符 概念 所谓对响应式布局方案的理解，众说纷纭，核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同 社区中有很多人分享，并列出了多种实现响应式布局的方案，比如【 rem&…
【Web2D/3D】css3的2D/3D转换、过渡、动画（第一篇）
1. 前言 本篇开始介绍Web2D和3D相关基础知识，会从CSS3的2D/3D转换、过渡、动画，讲到Canvas 2D图形绘制，再到SVG，最后到WebGL。
2. 2D转换 CSS3的2D/3D旋转，适用左手定则确认顺时针方向和逆时针方向（角度值…
HTML、CSS、JAVASCRIPT优缺点及共同点
前端开发中最常用的语言包括HTML、CSS和JavaScript。以下是它们各自的优缺点及共同点：
HTML：
优点：
1. 简单易学：HTML是一种标记语言，其语法相对简单，易于学习和理解。
2. 通用性强：HTML是W…
CSS水平居中与垂直居中的方法
当我们页面布局的时候，通常需要把某一个元素居中，这一篇文章为大家介绍一下居中的几种方法，本人文笔有限，请见谅！
一.水平居中
行内元素水平居中的方法，我们使用text-align:center;
<!DOCTYPE html&g…
【前端】利用正则生成目录，附加解决a链接锚点偏移
前言
从html字符串中提取出来目录。 目标和源内容都很明确，源内容是html字符串，提取目标是html字符串中h1~h6元素和其闭合标签中间的内容。
思路
分析
获取html字符串
第一步要获取html字符串内容。
观察html字符串
第二步， 观察html字…
品优购：主体页，列表页，注册页
目录 main部分
recom推荐部分
新建列表list.html和list.css
创建register.html 和register.css main部分
focus焦点图通过ul和li框住img，右侧分为三栏
第一栏newsflash盒子，首先边框news-hd只写bottom，线条为dotted；然后news…
CSS 选择器优先级，!important 也会被覆盖？
目录 1，重要性2，专用性3，源代码顺序 CSS 属性值的计算过程中。其中第2步层叠冲突只是简单说明了下，这篇文章来详细介绍。
层叠冲突更广泛的被称为 CSS选择器优先级计算。 为什么叫层叠冲突，可以理解为 CSS 是 Cascadi…
微信小程序文件预览和下载-文件系统
文件预览和下载
在下载之前，我们得先调用接口获取文件下载的url 然后通过wx.downloadFile将下载文件资源到本地
wx.downloadFile({url: res.data.url,success: function (res) {console.log(数据,res);}
})tempFilePath就是临时临时文件路径。 通过wx.openDocume…
【HTML5、CSS3】新增特性总结！
文章目录 23 HTML5 新增特性23.1 语义化标签23.2 多媒体标签23.2.1 视频<video>标签23.2.2 音频<audio>标签 23.3 input属性值23.4 表单属性 24 CSS3 新增特性24.1 属性选择器24.2 结构伪类选择器24.2.1 选择第n个元素24.2.2 常用的6个结构伪类选择器 24.3 伪元素选…
贪吃蛇小游戏基本简单布局
代码：
<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>Layui贪吃蛇小游戏</title> <link rel"stylesheet" href"https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.…
原生javascript实现放大镜效果
效果图 完整代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>放大镜</title><style&g…
flex 布局防止元素被挤换行
刚开始是这样的代码：
<div class"flex"><span>选择模型：</span><n-select :options"state.chatModelOptions" />
</div>选择模型换行了…不行，这个效果不行，修改后࿱…
关于微信小程序中如何实现数据可视化-echarts动态渲染
移动端设备中，难免会涉及到数据的可视化展示、数据统计等等，本篇主要讲解原生微信小程序中嵌入echarts并进行动态渲染，实现数据可视化功能。
基础使用
首先在GitHub上下载echarts包 地址：https://github.com/ecomfe/echarts-for…
html和css写QQ会员页面导航
目录
1、css代码
2、html代码
效果图 1、css代码
<style>* {padding: 0;margin: 0;list-style: none;text-decoration: none;}div {margin: 30px auto;}li {float: left;height: 60px;background-color: rgb(102, 102, 102);line-height: 40px;}img {height: 100%;ma…
成都工业学院Web技术基础（WEB）实验四：CSS3布局应用
写在前面
1、基于2022级计算机大类实验指导书
2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样
3、图片和文字仅为示例，需要自行替换
4、如果代码不满足你的要求，请寻求其他的…
成都工业学院Web技术基础（WEB）实验三：CSS字体等属性使用
写在前面
1、基于2022级计算机大类实验指导书
2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样
3、图片和文字仅为示例，需要自行替换
4、如果代码不满足你的要求，请寻求其他的…
JavaScript基础—运算符、表达式和语句、分支语句、循环语句、综合案例-ATM存取款机
版本说明
当前版本号[20231125]。
版本修改说明20231125初版
目录 文章目录 版本说明目录JavaScript 基础 - 第2天运算符算术运算符赋值运算符自增/自减运算符比较运算符逻辑运算符运算符优先级 语句表达式和语句分支语句if 分支语句if双分支语句if 多分支语句三元运算符&am…
CSS尺寸设置单位？
一、css中常用单位有哪些？
共有6个单位，分别是px，em，rem，vw，vh，pt。
① 除了px是绝对单位，其余都是相对单位。
② em相对于他本身的字体大小（但他本身字体大小是相对于…
cs3 灯光特效（个人版）
cs3 灯光特效（个人版） <!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv…
JS原生-弹框+阿里巴巴矢量图
效果： 代码：
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&q…
【前段基础入门之】=＞元素定位布局
导语： CSS 元素定位，是目前 CSS 页面布局的一种主要方式。 文章目录 相对定位开启相对定位相对定位的参考点相对定位的特点 绝对定位开启绝对定位绝对定位的参考点绝对定位的特点 固定定位开启固定定位固定定位的参考点固定位的特点 粘性定位开启粘性定位…
QScrollArea样式
QScrollBar垂直滚动条分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分。 QScrollBar水平滚动条分为sub-line、add-line、add-page、sub-page、left-arrow、right-arrow和handle几个部分。
部件如下图所示： /* 整个滚动…
毛玻璃 has 选择器卡片悬停效果
效果展示 页面结构
从上述的效果展示可以看到，页面是由多个卡片组成，并且鼠标悬停在卡片上时，会旋转用户图片并且韩式对应的用户信息框。
CSS3 知识点
:has 属性的运用
实现页面整体结构
<div class"container"><div…
动态调整系统主题色(4): CssVar 与 Variant 方案的探索
动态调整系统主题色(4): CssVar 与 Variant 方案的探索
动态调整系统主题色(4): CssVar 与 Variant 方案的探索 前言方案的介绍与比较 CssVar (CSS 变量方案)CSS 变量方案与 tailwindcss 的结合Variant 方案 2种方案在小程序上的示例之前的几篇
前言
这篇已经是动态调整系统…
PC端常用响应式布局总结（以后建门户类的直接看这篇）
固定宽度的样式
1.常见的固定宽度范围是1004px到1280px之间,再结合你的页面布局，如下例子中子盒子直接使用vw宽度进行布局
.container {width: 100%;max-width: 1600px;margin: 0 auto;
}媒体查询和响应式布局
通过使用media规则，我们可以根据不同的屏…
CSS 常用样式 显示模式
css 显示模式 display
CSS显示模式（display）属性用于设置 HTML 元素的显示方式。常见的显示模式有 block、inline、inline-block、flex、grid 等。
以下是每种显示模式的详细解析和代码示例：
block（块级元素）
bloc…
uniapp +vue3 练习 首页页面展示 我的页面展示 登录展示 拨打固定的电话 页面跳转
uniapp拨打固定的电话 function Hotline() {// 拨打电话uni.makePhoneCall({phoneNumber: 19969547693})}页面跳转 //普通跳转function homepage() {uni.navigateTo({url: /pages/homepage/homepage});}//二、uni.redirectTo关闭当前页面，跳转到应用内的某个页面。…
div中的元素水平居中对齐
<div><img src"imgs/xy.jpg" alt""><h2>百变小樱</h2>
</div>
<style>* {padding: 0;margin: 0;box-sizing: border-box;}div {width: 200px;height: 300px;margin: 20em auto;padding-top: 4em;border: 2px solid rg…
css中2D/3D的变化
变换可以改变元素的位置、大小、旋转、倾斜等属性，以创建各种动态效果。
一、常用的2D变换： 平移（translate）：使用 translate() 函数来改变元素的位置。可以指定水平和垂直方向的偏移量，如 transform: tra…
纯CSS的华为充电动画，它来了
📢 鸿蒙专栏：想学鸿蒙的，冲 📢 C语言专栏：想学C语言的，冲 📢 VUE专栏：想学VUE的，冲这里 📢 Krpano专栏：想学Krpano的，冲 🔔…
CSS3用户界面弹性盒子
CSS3用户界面
resize
该CSS3属性用于定义元素是否应该调整大小，如果需要调整大小，那么以哪个轴进行调整。 语法：resize:both | horizontal | none | vertical 注意：该属性仅应用在overflow值而不是visible的元素上。通常而言&am…
编程笔记 html5cssjs 007 HTML文本：段落
编程笔记 html5&css&js 007 HTML文本：段落 一、HTML 段落二、HTML 文本格式化三、HTML计算机代码格式四、HTML 引文, 引用, 及标签定义总结 标题弄好后，文章的主体一般是段落。 一、HTML 段落
段落是通过 <p> 标签定义的。
<p>这是…
如何使用 TailwindCSS 画一条0.5px的线条
背景
在移动端项目，一般为了让线条看起来更细、更锐利，此时使用0.5px的线条是非常合适的。那么如何使用TailwindCSS画一条0.5px的线条呢？
在实现这个需求的时候，首先去TailwindCSS官网查了一下border有没有对应的内置工具类&…
css+html横向滚动+固定宽
没什么好说的，快上代码！
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Do…
【CSS @property】CSS自定义属性说明与demo
CSS property property - CSS: Cascading Style Sheets | MDN At 规则 - CSS：层叠样式表 | MDN Custom properties (–*): CSS variables - CSS: Cascading Style Sheets | MDN CSS Houdini - Developer guides | MDN 📚 什么是property?
property CSS…
web前端项目-豆瓣电影【附源码】
web前端项目-豆瓣电影【附源码】
本项目设计和制作一个电影咨询和电影评分网站——仿豆瓣电影网，通过该网站的设计和制作过程，可以帮助网站开发人员和熟悉网站前台页面的制作流程，并在开发过程中熟练应用HTML；CSS；Jav…
el-select如何去掉placeholder属性
功能要求是：当el-select的disabled属性为true的时候不展示“请选择”字样
1、要去掉 el-select 元素的 placeholder 属性，可以在代码中将其设置为空字符串。
<el-select placeholder"" ...></el-select> 注意：这种方…
html5 实现网页截屏 页面生成图片
效果 代码
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"referrer" content"no-referrer" /><meta name"viewport"content"widthdevice-width,intial-sc…
HTML5+CSS3+JS小实例：网站实现一键切换暗色主题
实例：网站实现一键切换暗色主题
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge&…
第十二章 文档对象模型（DOM）的介绍和使用
文章目录 一、DOM介绍二、节点选择器三、属性操作四、样式操作五、尺寸类属性的快速获取六、标签操作八、练习 一、DOM介绍
DOM：文档对象模型，document，提供了网页的相关操作。 document是window的子对象之一，但是DOM不属于BOM D…
vue扭蛋机抽奖游戏
简易扭蛋机demo 这是一个使用CSS3和JavaScript实现的扭蛋机抽奖游戏。该游戏的主要功能是通过点击按钮进行抽奖，抽奖过程中会显示滚动的小球，最终随机停止并显示一个中奖小球。
该游戏的抽奖过程如下：
当用户点击抽奖按钮时，首先…
tab切换栏，淘宝图关闭，精灵图遍历，onfocus/onblur, setAttribute, getattribute
目录
1 淘宝图关闭
2 采用驼峰命名方式
3 精灵图遍历
4 光标聚焦与去聚焦
5 提示密码输入正确与否
6 选择按钮变颜色（排他思想）
7 换皮肤效果
8 复选框一个选中全部选中
9 tab栏切换很重要 1 淘宝图关闭
通过id获取元素：document…
页面布局--Flexbox的自动边距
标题页面布局–Flexbox的自动边距
通过简单的margin:auto，我们就能实现元素的多种对齐方式。 假设我们在盒子模型里有四个元素： 先给容器使用flex布局：
.container {display: flex;justify-content: flex-start;align-items: center;gap: 6…
display：grid
grid布局属于二维布局，与table类似，有行、列、单元格的概念，而flex布局是一维的，
文档可以参考：CSS Grid 网格布局教程 - 阮一峰的网络日志
有一款对应的小游戏：CSS grid 游戏
样式demo在线体验…
flex + margin 妙用
利用 flex margin 分配间距，简单案例如下，先写一个包裹器，包裹几个元素： 案例一：
我们给父元素加 flex 布局，子元素加 margin: auto，可以看到子元素上下左右居中显示，当前我们可以…
CSS3：绘制多边形
clip-path：该属性使用裁剪方式创建元素的可显示区域，区域内的显示，区域外的不显示。
构建一个三角形 <div class"mybox"></div><style>.mybox {width: 100px;height: 100px;background-color: yellow;clip-path…
编程笔记 html5cssjs 016 HTML表格
编程笔记 html5&css&js 016 HTML表格 一、HTML 表格二、HTML 表格标签三、边框属性四、单元格合并小结 表格是一种常用的文档格式。学习或办公过程中也常常使用表格。有专用的电子表格软件，如EXCEL、WPS表格等。表格也经常与文字混合在文章中使用。网页中也…
计算机毕业设计 基于HTML5+CSS3的在线英语阅读分级平台的设计与实现 Java实战项目 附源码+文档+视频讲解
博主介绍：✌从事软件开发10年之余，专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…
web前端之css、style
目录 web前端之纯css实现的加载、steps、calc web前端之纯css实现的加载、steps、calc
style
/* -------平滑加载------- */
.smooth_loading {background: linear-gradient(#333333 0 0) 0 / 0% no-repeat #f5f5f5;animation: smooth_loading_animation 2s infinite linear;…
编程笔记 html5cssjs 020 HTML URL
编程笔记 html5&css&js 020 HTML URL HTML 统一资源定位器(Uniform Resource Locators)。URL 是一个网页地址。 URL可以由字母组成，如"baidu.com"，或互联网协议（IP）地址： 192.68.12.12。大多数人进入…
H5C3练习心得 2024.01.03（文字加载动画效果）--transition,动画渲染，遮罩层
（一）transition（过渡效果）
1.详解
通常将css的属性值更改后，浏览器会立即更新新的样式，例如在鼠标悬停在元素上时，通过 :hover 选择器定义的样式会立即应用在元素上。
在 CSS3 中加入了一项过…
静态网页设计——海贼王
前言
使用前端经典三件套HTMLCSSJS实现的海贼王静态网页课程设计，适合我们的童年！
主要内容
首页
首页最上方有一个轮播图，可以自动切换图片，使用js实现。
轮播图往下，就是列出一些比较经典的海贼王影片…
web期末个人引导页透明版
效果图 代码
css代码
* {box-sizing: border-box;
}body {color: #2b2c48;font-family: "Jost", sans-serif;background-image: url(../img/bg.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;background-attachment: fix…
vue简单实现滚动条
背景：产品提了一个需求在一个详情页，一个form表单元素太多了，需要滚动到最下面才能点击提交按钮，很不方便。他的方案是，加一个滚动条，这样可以直接拉到最下面。 优化：1、支持滚动条，…
编程笔记 html5cssjs 022 HTML表单概要
编程笔记 html5&css&js 022 HTML表单概要 一、<form> 元素二、HTML Form 属性三、操作小结 网页光是输出没有输入可不行，因为输出还是比输入容易，所有就先接触输出，后学习输入。html用来输入的东西叫“表单”。 HTML 表单用于搜…
HTML5+CSS3小实例：纯CSS实现网站置灰
实例：纯CSS实现网站置灰
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="…
CSS3背景样式详解（图像大小，图像位置等）
背景样式
在CSS3中，新增了3个背景属性
属性说明background-size背景大小background-origin背景位置background-clip背景剪切
background-size属性
概念：在CSS3之前，我们是不能用CSS来控制背景图片大小的，背景图片的大小都是由…
编程笔记 html5cssjs 011 HTML页面划分
编程笔记 html5&css&js 011 HTML页面划分 HTML的框架、区块和布局是什么，它们之前的关系是怎样的？框架注意 接下来要看一下网页内的划分。通过框架、区块及布局等方式，将网页从一个长方形整体划分为若干个部分，以合理展示…
纯CSS实现马里奥效果，回忆一下童年吧
📢 鸿蒙专栏：想学鸿蒙的，冲
📢 C语言专栏：想学C语言的，冲
📢 VUE专栏：想学VUE的，冲这里
📢 CSS专栏：想学CSS的，冲这里
Ǵ…
HTML5+CSS3+Vue小实例：彩色圆环溶解加载动画
实例：彩色圆环溶解加载动画
技术栈：HTML+CSS+Vue.js
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge&…
CSS3中transform2D变形详解
CSS3变形
在CSS3中，动画效果包括3个部分：
变形(transform)过渡(transition)动画(animation)
在实际开发中，有时需要实现元素的各种变形效果，如平移，缩放，旋转，倾斜等。
在CSS3中，…
第十讲_css2d转换
css2d转换 1. 移动2. 旋转3. 缩放4. 组合转换5. 设置原点 1. 移动
translate() ：参照元素原位置，在X轴和Y轴方向上移动。
<html><style>.container1:hover {width: 200px;height: 200px;background-color: red;/* 在X轴方向移动50px */tra…
sparkstreamnig实时处理入门
1.2 SparkStreaming实时处理入门
1.2.1 工程创建
导入maven依赖
<dependency><groupId>org.apache.spark</groupId><artifactId>spark-streaming_2.12</artifactId><version>3.1.2</version>
</dependency>
<dependency…
CSS3渐变属性详解
渐变属性
线性渐变
概念：线性渐变，指的是在一条直线上进行的渐变。在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色
语法：
background:linear-gradient(渐变角度，开始颜色，结束颜色);渐变…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-3 textarea
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>textarea</title>
</head><body>
<h2>多行文本框:</h2>
<!--textarea（文本域）cols(列) rows(行)-->
…
纯CSS3的单选框、复选框、开关按钮UI库-自由分享jQuery、html5、css3的插件库
纯CSS3的单选框、复选框、开关按钮UI库-自由分享jQuery、html5、css3的插件库-遇见你与你分享
编程笔记 html5cssjs 048 CSS链接
编程笔记 html5&css&js 048 CSS链接 一、设置链接样式二、文本装饰三、背景色四、链接按钮五、练习小结 通过 CSS，可以用不同的方式设置链接的样式。 一、设置链接样式
链接可以使用任何 CSS 属性（例如 color、font-family、background 等&…
跟着pink老师前端入门教程-day07
去掉li前面的项目符号（小圆点）
语法：list-style: none;
十五、圆角边框
在CSS3中，新增了圆角边框样式，这样盒子就可以变成圆角 border-radius属性用于设置元素的外边框圆角
语法：border-radius:length…
【CSS3】渐变 阴影 遮罩
1. CSS3渐变
渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片),意义是创建一张图片
gradient可以应用在所有接受图像的属性上
1.1 分类:
线性渐变(linear-gradient)变化的方向是一条直线
径向渐变(radial-gradient…
CSS3中多列布局详解
多列布局
概念：在CSS3之前，想要设计类似报纸那样的多列布局，有两种方式可以实现：一种是"浮动布局"，另一种是“定位布局”。
这两种方式都有缺点：浮动布局比较灵活，但不容易控制&…
![[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页](https://img-blog.csdnimg.cn/direct/41ec6db3b9834eb784f4e863f5e766da.png)
[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…
css-flex使用
文章目录 flex弹性容器属性flex-directionflex-wrapflex-flowalign-itemsjustify-contentalign-content主轴和侧轴 弹性元素默认大小属性flex-growflex-shrinkalign-selfflex-basisflexorder 高度坍塌flex布局子元素宽度超出父元素 flex
弹性盒，伸缩盒，…
Vue--BM记事本
效果如下： 用到了如下的技术： 1.列表渲染：v-for key的设置 2.删除功能：v-on调用参数 fliter过滤 覆盖修改原数组 3.添加功能：v-model绑定，unshift修改原数组添加 html文件如下： <!DOCTYPE …
css3过渡属性属性名：transition
CSS3的过渡属性属性名是transition，它允许我们在状态改变时为元素添加过渡效果，例如在元素从一种样式变为另一种样式时添加平滑的过渡效果。
transition的语法如下：
transition: property duration timing-function delay;其中，…
scrollIntoView使用与属性详解
scrollIntoView 使用与属性详解
效果图如下图所示
如果要想让元素滚动到指定位置
window.onload function () {containerItems[6].scrollIntoView({ behavior: "smooth" });
};js 代码
const containerItems document.querySelectorAll(".container div&…
文字连续光影特效实现思路
文字连续光影特效实现思路
实现了一个文字阴影的效果，文字会不断变换颜色并产生阴影效果。具体实现如下：
使用 keyframes 定义一个名为 shadow 的动画，动画从当前颜色到 #ff0266，同时设置文字阴影的偏移量和模糊半径。使用 * 选…
博客系统——前端部分
目录
一、博客页面介绍
二、实现博客列表页
1、先实现导航栏
2、页面主体
左侧区域的实现：编辑
右侧页面的实现：编辑
博客列表页代码汇总：
三、实现博客详情页 代码实现：
四、实现博客登录页编辑
五、博客编辑页 …
【CSS】简记CSS效果：通过transition（动画过渡属性）实现侧边栏目滑入滑出
需求
在资金明细的页面中，点击按钮时筛选区域从左侧滑出，完成筛选点击确认后调用接口完成数据查询，筛选区域滑入左侧；
基于微信小程序页面实现
wxml代码
<view><!-- 操作按钮 --><button type"primary&qu…
CSS_IOS适配状态栏和IOS底部安全区域
状态栏
var(--status-bar-height)计算属性
height: calc(var(--status-bar-height) 343px);底部安全区
先constant再env
constant(safe-area-inset-bottom)
env(safe-area-inset-bottom)计算属性
height: calc(132px constant(safe-area-inset-bottom));
height: calc(1…
使用CSS计数器美化有序列表
在web设计中，使用一种井井有条的方法来展示数据是十分重要的，这样用户就可以很清晰的理解网站所展示的数据结构和内容，使用有序列表就是实现数据有组织的展示的一种简单方法。 如果你需要更加深入地控制有序列表数字的样式，你可能…
CSS实现字体荧光效果
CSS中为我们提供了 text-shadow 属性，该属性有4个参数
分别为：水平偏移量，垂直偏移量，阴影范围，阴影颜色
最重要的是，一个字体同时可以拥有多个阴影，只需要用逗号分隔即可（通过不同…
CSS3选择器详解 前端开发入门笔记（六）
CSS3选择器是一种用于定位HTML元素的方式，它们可以使样式表更加精确地应用到特定的元素。下面是一些常用的CSS3选择器： 元素选择器（Element Selector）：使用元素名称作为选择器，匹配对应名称的所有元素。例如…
element-ui 以CDN 方式引入原生js开发的几个别坑 （+vue）
element-ui 以CDN 方式引入原生js开发的几个坑
最近两个月太忙了 忙的没空写文章 两个月赶出来了几个的项目
一个是雪佛兰裸眼3D的一个商品屏幕展示项目 一个是广汽云渲染的一个云看车项目 一个是奥迪中国充电桩的网页开发项目， 奥迪中国做个饭也是目前正在做的 不…
【前段基础入门之】=＞CSS3新增渐变颜色属性
导语： CSS3 新增了，渐变色 的解决方案，这使得我们可以绘制出更加生动的炫酷的的配色效果 线性渐变 多个颜色之间的渐变， 默认从上到下渐变 background-image: linear-gradient(red,yellow,green); /*默认从上到下渐变*/默认从上…
HTML，CSS实现鼠标划过头像，头像突出变大（附源码）
话不多说，先上代码 先看原图： 再看 鼠标放上去后的图： 是不是明显感觉到 人物头像突出了一些，而且还增加了阴影部分的效果呢？
直接上代码！！！
<!--由于我的 img 标签放的是循环后…
html中的换行(\n)或回车(\r)符号不起作用的解决办法、br、white、space、pre、line
文章目录 前言html不解释空白字符CSS样式的影响特定的文本区域white-space 前言
如果您的HTML中的换行和回车符号（\n和\r）似乎不起作用，可能有几种可能的原因： html不解释空白字符 在HTML中，连续的空白字符࿰…
改变光标形状的多种方式
一，用css的方式进行添加属性：
#div{cursor:pointer;
}
二，使用js的方式改变光标的状态：
1 // 使用在元素的标签上的事件
2 // 第一种方式
3 onmouseover"this.style.cursormouseHand"
4
5 // 第二种方式
6 onmouseo…
重要环节不可忽视，CSS性能优化引领用户体验！
🎬 江城开朗的豌豆：个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》
⛺️ 生活的理想，就是为了理想的生活 ! 目录 ⭐ 专栏简介 📘 文章引言
一、前…
Servlet体系结构
Servlet接口
package package01;import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;WebServlet("/demo1")
public class servletDemo implements Servlet {Overridepublic void init(ServletConfig servletConfig) …
Javascript 动态样式控制
方法一:
使用style属性来设置
html代码 <div id"div1">div</div>Javascript代码
var div1 document.getElementById("div1");div1.onclick function () {//修改样式div1.style.border "1px solid red";div1.style.width &quo…
DOM node对象
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><title>node对象</title><style>div {border: 1px solid red;}#div1 {width: 200px;height: 200px;}#div2 {width: 100px;height: 100px;}#div3 {w…
CSS3 分页、框大小、弹性盒子
一、CSS3分页：
网站有很多个页面，需要使用分页来为每个页面做导航。示例：
<style>
ul.pagination { display: inline-block; padding: 0; margin: 0;
} ul.pagination li {display: inline;} ul.pagination li a { color: black; f…
【前段基础入门之】=＞CSS3新特性 BFC
什么是BFC( 概念) W3C 上对 BFC 的定义： MDN 上对 BFC 的定义： 简而言之 开启了BFC能解决什么问题
元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题元素开启 BFC 后，自己不会被其他浮动元素所覆盖元素开启 BFC 后࿰…
CSS3样式详解之圆角、阴影及变形
目录 前言一、圆角样式（border-radius）二、元素阴影（box-shadow）三、过渡动画样式（transition）1. transition-property(用于设置属性名称)2. transition-duration（设置时间）3. trans…
HTML5+CSS3+JS小实例：仿优酷视频轮播图
实例：仿优酷视频轮播图
技术栈：HTML+CSS+JS
效果： 源码：
【html】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=&quo…
CSS面经（未完待续）
1. CSS选择器及其优先级
!important > 行内样式 > id选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 子/后台选择器 > *通配符
2. 重排和重绘是什么？浏览器的渲染机制是什么？
重排(回流)：当增加或删除dom节点&…
CSS3 新增属性-边框圆角-文字阴影-盒子阴影
边框圆角
CSS 边框圆角可以通过 border-radius 属性来实现。该属性用于设置元素的圆角大小，支持四个值分别表示上左、上右、下右和下左四个角的圆角半径大小，也可以使用两个值分别表示上下和左右两个方向的圆角大小，甚至可以只使用一个值来…
CSS之实现线性渐变背景
1. background: linear-gradient()
background: linear-gradient是CSS中用于创建线性渐变背景的属性，这个属性允许你定义一个在元素的背景中进行渐变的效果，可以从一个颜色过渡到另一个颜色。 基本语法
background: linear-gradient(direction, color-…
CSS3 就可以写出一个苹果官方渐变颜色文字效果,真的太逼真了!
🚀 个人主页 极客小俊 ✍🏻 作者简介：web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起进步！😄 🏅 如果文章对你有帮助的话，欢迎评论 💬点赞…
5款CSS3选项框单选按钮样式（走过路过不要错过）
5款CSS3选项框单选按钮样式是一款创意好看的选项单选按钮样式特效。
样式如下： 文章顶部就是源码，如果下载不了（如果被弄成收费or要VPI才能下载）私一下我，第一次弄csdn的资源绑定，不行我重新弄成网盘的 &a…
CSS3设计动画样式
CSS3动画包括过渡动画和关键帧动画，它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块，其中Transform实现对网页对象的变形操作，Transitions实现CSS属性过渡变化，Animations实现…
uniapp 开发 之 如何给边框添加阴影效果
uniapp 开发 之 如何给边框添加阴影效果 image.png <view style"width: 100px; height: 100px; margin: 50px; -moz-box-shadow:2px 2px 10px #06c; -webkit-box-shadow:2px 2px 10px #06c; box-shadow:2px 2px 10px #06c; ">测试边框阴影</view>css的bo…
3D划桨效果，效果请看gif图
纯本地文件的html <!doctype html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"Keywords" content""><meta name"Description" content""><title>please…
介绍css3中position:sticky？
position: sticky 是 CSS3 中的一个定位属性，用于创建一个在滚动过程中相对于容器固定位置的元素。它可以将元素的定位设为相对定位（relative）或固定定位（fixed），具体取决于滚动的位置是否超过了容器的特定…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-4 label
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>label</title>
</head><body>
性别:
<label for"male">男</label>
<input type"radio" name"sex&quo…
微信小程序记住密码，让登录解放双手
密码是用户最重要的数据，也是系统最需要保护的数据，我们在登录的时候需要用账号密码请求登录接口，如果用户勾选记住密码，那么下一次登录时，我们需要将账号密码回填到输入框，用户可以直接登录系统。我们分别…
css图片缩放属性object-fit说明
object-fit 属性可以设置以下值：
属性值说明例子fill填充容器，可能会改变图片的比例。object-fit: fill;contain保持图片的原始比例，确保图片完全包含在容器内。object-fit: contain;cover保持图片的原始比例，确保图片覆盖整个容…
ReactNative中样式与布局的书写
样式
const styles StyleSheet.create({container: {flex: 1,justifyContent: center,alignItems: center,backgroundColor: #F5FCFF,}, welcome: {fontSize: 20, textAlign: center,margin: 10, }, instructions: {textAlign: center,color: #333333,marginBottom: 5,}, …
无限移动的风景 css3 动画 鼠标移入暂停
<style>*{margin:0;padding:0;/* box-sizing: border-box; */}ul{list-style: none;}#nav{width:900px;height:100px;border:2px solid rgb(70, 69, 69);margin:100px auto; overflow: hidden;}#nav ul{animation:moving 5s linear infinite;width:200%; /*怎么模拟动画…
编程笔记 html5cssjs 044 CSS显示
编程笔记 html5&css&js 044 CSS显示 一、display 属性二、块级元素（block element）三、行内元素（inline element）四、disply属性设置（一）Display: none;（二）覆盖默认的 Disp…
使用vue2写一个太极图，并且点击旋转
下面是我自己写的一个代码，命名有些不规范，大家不要介意。
<template><div class"qq"><div class"app" :style"{ transform: rotateStyle }"><div class"app1"><div class"ap…
编程笔记 html5cssjs 045 网页布局
编程笔记 html5&css&js 045 网页布局 一、网页布局二、头部区域三、菜单导航区域三、内容区域四、不相等的列五、底部区域六、box-sizingbox-sizing 属性可以被用来调整这些表现：属性值content-boxborder-box 六、响应式网页布局小结 网页布局有很多种方式&…
编程笔记 html5cssjs 041 CSS边框属性
编程笔记 html5&css&js 041 CSS边框属性 一、CSS 边框类型二、CSS 边框宽度三、CSS 边框颜色四、CSS Border - 简写属性五、CSS 圆角边框六、所有 CSS 边框属性七、练习小结 盒子是由四周的边框组成，边框的属性就构成了盒子的大部分样式。 一、CSS 边框类型…
CSS： 阻止链接的点击事件和鼠标事件 （结局超链接悬停出现的默认样式）
在鼠标悬停时阻止默认的链接事件，并且去除下划线效果。这样就能够避免链接在悬停时改变颜色或出现其他默认的样式。
a:hover {pointer-events: none; /* 阻止链接的点击事件和鼠标事件 */text-decoration: none; /* 移除链接的下划线效果 */
}
day11_2 CSS3弹性盒子flexbox
弹性盒子 介绍和普通盒子的对比示例 direction属性示例 flex-direction属性示例 justify-content 属性示例 align-items 属性示例 flex-wrap 属性示例 align-content 属性弹性子元素属性——order弹性子元素属性——align-self弹性子元素属性——flex示例： 介绍 弹性…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-9 HTML5 表单验证
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>HTML5 表单验证</title>
</head><body>
<form action"#" method"get">请输入您的邮箱:<input type"email&q…
CSS3 属性： transition过渡 与 transform动画
CSS3 提供了很多强大的功能，使开发人员可以创建更加吸引人的视觉效果，而不需要依赖于 JavaScript 或 Flash。其中，transition 和 transform 是两个常用的属性，它们分别用于创建平滑的过渡效果和元素的变形效果。下面我们将详细介绍…
前端使用视频作为背景图的方法
实现思路
通过 video source 引入视频，并对视频播放属性进行设置，再通过 css 使视频覆盖背景即可。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset"utf-8">
<title>有开发问题可联系作者</title>…
HTML5+CSS3小实例：纯CSS实现锚点平滑过渡
实例：纯CSS实现锚点平滑过渡
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"&…
CSS样式详解之伪类元素及CSS3选择器
目录 一、伪类元素二、CSS3选择器1. 相邻选择器（）2. 兄弟选择器（~）3. 指定选择器（nth-of-type(n)）4. 子元素指定选择器（子元素匹配选择器）5. 属性选择器① [ 属性名 ]② [ 属性名属性…
编程笔记 html5cssjs 019 HTML实体
编程笔记 html5&css&js 019 HTML实体 一、HTML 字符实体二、HTML 符号实体小结 在HTML文档中，用一些标记表示特定的格式，那我们想使用这些标记字符本身时就出了问题，直接使用时，会被浏览器解析为标记的，要想显…
CSS3 边框border、outline、box-shadow
1 border
语法：border: width style color
2 outline
语法：outline: width style color
2.1 outline-offet MDN解释：用于设置outline与一个元素边缘或边框之间的间隙 即：设置outline相对border外边缘的偏移，可以为…
flex实现间距相等的table布局
<!DOCTYPE html>
<html>
<head><style>.container {width: 800px;display: flex;flex-wrap: wrap;gap: 20px;border: 1px solid #ddd;margin: 20px;}.cell {width: calc(50% - 10px); /* 每列占据一半宽度，减去间隙的宽度 */background-col…
2024前端炫酷源码分享（附效果图及在线演示）
分享10款非常有趣的前端特效源码 其中包含css动画特效、js原生特效、svg特效以及小游戏等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源
GSAP-火箭动画特效
GSAP 火箭动画 当氮气充足的情况下 火箭会冲出 并继续飞行 图片…
CSS3（Flex布局详解）
Flex 基本概念： 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。
在容器中…
CSS3实现轮播效果
在我们不使用JS的情况下，是否也可以实现轮播功能呢？ 答应是可以的 上代码：
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>轮播</title><style>.boss…
探索媒体查询的世界：适应多种设备的技巧与实践（上）
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…
编程笔记 html5cssjs 031 HTML视频
编程笔记 html5&css&js 031 HTML视频 一、<video>: 视频元素二、属性三、事件四、嵌入视频页面五、练习小结 视频应用广泛，当前的互联网应用中，视频越来越重要，比如抖音、快手、腾讯视频等应用。 一、<video>: 视频元素 …
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3过渡
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>CSS3 过渡</title>
<style>
/*显示*/
.box {width: 100px;height: 100px;background-color: #eee;/*透明度*/opacity: 1;/*过渡*/transition: 3s;
}
/…
CSS 选择器全攻略：从入门到精通（下）
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…
html+css 浮动、清除浮动、什么是BFC？、如何开启BFC
浮动
介绍： 其实早期的浮动是用来文字环绕图片效果,但是后来发现浮动还可以设置页面布局问题 块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流
特点： 哪个元素设置浮动，哪个…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-5 CSS3 动画
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>CSS3 动画</title>
<style>
.img {width: 150px;
}
keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);}
}
img…
白学的小知识[css3轮播]
代码如下:
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>轮播</title><style>.boss {position: relative;width: 200px;height: 200px;overflow: hidden;}.boss>div {width: 10000p…
HTML5+CSS3+JS小实例：音频可视化
实例：音频可视化
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><m…
CSS3动画效果详解
CSS3动画
在CSS3中，animation属性用于实现元素的动画。
animation属性跟transition属性在功能实现上是非常相似的，都是通过改变元素的属性值来实现动画效果。但是，这两者实际上有着本质的区别
对于transition属性来说，它只能将…
【CSS】CSS中的BFC，是什么？
一、常见定位方案 普通流默认，从上而下，行内元素水平排列，行满换行，块级元素渲染成一个新行。
浮动先按普通流位置出现，然后根据浮动方向偏移。
绝对定位元素具体位置由绝对定位坐标组成。二、什么是BFC
BFCÿ…
#vue3# el-table-horizontal-scroll 让 el-table 在底部显示横向滚动条
一、需求:
当 el-table 的宽度超出浏览器宽度时，尽管 el_table 底部会出现滚动条，但使用起来不太便捷，因为每次需要先滚动到底部才能使用 el-table 的滚动体，这显得相当繁琐。
为了提升体验，希望在 el-table 的宽度超…
编程笔记 html5cssjs 038 CSS背景
编程笔记 html5&css&js 038 CSS背景 一、CSS 背景属性二、CSS background-color三、不透明度 / 透明度四、使用 RGBA 的透明度五、CSS 背景图像六、CSS 背景重复CSS background-repeatCSS background-repeat: no-repeatCSS background-position 七、练习小结࿱…
react中如何使用其他字体
找到一个.ttf字体文件放入到assets文件夹中在global.less文件中利用font-face全局注册使用：font-family: "YouSheBiaoTiHei";
蓝桥杯Web应用开发-CSS3 新特性
CSS3 新特性
专栏持续更新中
在前面我们已经学习了元素选择器、id 选择器和类选择器，我们可以通过标签名、id 名、类名给指定元素设置样式。 现在我们继续选择器之旅，学习 CSS3 中新增的三类选择器，分别是： • 属性选择器 • 子…
跟着pink老师前端入门教程-day25
4、阿里百秀首页案例
4.1 技术选型
方案：我们采取响应式页面开发方案
技术：bootstrap框架
设计图： 本设计图采用 1280px 设计尺寸
4.2 屏幕划分分析
① 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的。 因此我们列 定义为 col-md- 就…
微信小程序的双向数据绑定和vue的哪里不一样？下拉刷新的方式代码示例
小程序的双向数据绑定和Vue的双向数据绑定有一些不同之处。 实现方式：小程序的双向数据绑定采用的是数据劫持的方式，通过重写对象的get和set方法来监听数据的变化和更新视图。而Vue使用的是响应式数据的方式，通过使用Object.defineProperty()…
CSS3基础知识总结
目录
一、CSS3 边框
1.border-radius：圆角边框
2.box-shadow：添加阴影
3.border-image：图片边框
二、CSS3 渐变
1.线性渐变(Linear Gradients)
a.由上到下（默认）
b.从左到右
c.对角
d.使用角度
2.径向渐变(…
CSS3如何实现从右往左布局的按钮组（固定间距）
可以通过下方CSS实现，下面的CSS表示按钮从右往左布局，且间距为10px:
.right-btn {position: relative;float: right;margin-right: 10px;
}类似这种： 这种： 注意：
不能使用right:10px代替margin-right:10px&#x…
编程笔记 html5cssjs 071 JavaScrip Symbol 数据类型
编程笔记 html5&css&js 071 JavaScrip Symbol 数据类型 一、Symbol 数据类型二、 示例小结 在JavaScript中，Symbol 是一种基本数据类型，它于 ECMAScript 6（ES6）中引入，用来创建唯一的、不可变的值。这些值可以…
编程笔记 html5cssjs 077 Javascrip 关键字
编程笔记 html5&css&js 077 Javascrip 关键字 一、关键字二、Javascript关键字注意 在计算机编程语言中，关键字（Keyword）是指那些被编程语言赋予特殊含义、具有预定义用途的保留字。这些词汇不能用作变量名、函数名或其他标识符&…
手机批发业务-商品备选区
样式 代码
<!doctype html>
<html lang"en"><head><meta charset"UTF-8"><meta name"author" content"huyiwei"><meta name"generator" content"HBuilder X"><title>…
![[CSS]浮动](https://img-blog.csdnimg.cn/dd4eb7c16abb47f8bff5bfa2586d6e9d.png)
如何解决移动端 Retina 屏（高清屏）1px 像素问题
如何解决移动端 Retina 屏（高清屏）1px 像素问题
1.伪元素 transform scaleY(.5) 2. border-image 3. background-image 4. box-shadow
可参考 http://t.zoukankan.com/gg-qq-p-14535413.html
CSS 发光输入框动画
<template><view class="content"><input placeholder="请输入..." class="input" /> </view>
</template><script></script><style>/* 设置整个页面的背景颜色为 #212121 */body{background-c…
编程笔记 html5cssjs 030 HTML音频
编程笔记 html5&css&js 030 HTML音频 一、<audio>元素二、属性三、事件三、使用 CSS 设置样式练习小结 有时候网页上也需要嵌入音频。比如播放歌曲或老师讲课的音频等。 一、<audio>元素
<audio> HTML 元素用于在文档中嵌入音频内容。<audio>…
CSS3新增边框样式
边框样式
概念:在CSS3中，针对元素边框增加了丰富的修饰属性。
常见的边框样式属性有以下
属性说明border-radius圆角效果box-shadow边框阴影border-image边框背景
border-radius属性
概念：border-radius属性可以为元素添加圆角效果
语法࿱…
css3基础语法与盒模型
css3基础语法与盒模型 前言CSS3基础入门css3的书写位置内嵌式外链式导入式（工作中几乎不用）行内式 css3基本语法css3选择器标签选择器id选择器class类名原子类复合选择器伪类元素关系选择器序号选择器属性选择器css3新增伪类
HTML--CSS--边框、列表、表格样式
边框样式
属性： border-width 边框宽度 border-style 边框外观 border-color 边框颜色 需要同时设定三个属性 border-width 边框宽度
取值为像素值
border-style 边框样式 none 无样式 dashed 虚线 solid 实线 border-color 边框颜色
如示例： 为div设…
CSS Day6-Day8 浮动和定位
6.1 浮动 float 使一个元素向其父元素的左侧或右侧移动，从而脱离文档流 可选值： none，默认值，元素默认在文档流中排列 left，向页面的左侧浮动right，向页面的右侧浮动 浮动特点 1.给元素设置浮动…
flex布局之美，以后就靠它来布局了
写在前面
在很久很久以前，网页布局基本上通过table 元素来实现。通过操作table 中单元格的align 和valign可以实现水平垂直居中等
再后来，由于CSS 不断完善，便演变出了：标准文档流、浮动布局和定位布局 3种布局 来实现水平垂直居…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-3 CSS3 旋转缩放
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>CSS3 变形原点</title>
<style>
div {width: 150px;height: 150px;background-color: #eee;transform: rotate(30deg);/*变形原点*/transform-origin:…
iOS长按时无法保存图片问题解决方案
在使用iOS设备的用户中，相信很多人都有过在浏览网页时遇到长按时无法保存图片的困扰。这主要是因为网页开发者为了保护版权或隐私，默认屏蔽掉了图片长按时保存的功能。
具体来说，问题出在-webkit-touch-callout这个CSS属性上。这个属性用于定…
编程笔记 html5cssjs 036 CSS应用方式
编程笔记 html5&css&js 036 CSS应用方式 一、三种CSS应用方式二、外部 CSS三、内部 CSS四、行内 CSS小结 如何在网页中使用CSS?实际上有三种方式。 一、三种CSS应用方式
有三种插入样式表的方法：
外部 CSS内部 CSS行内 CSS
二、外部 CSS
通过使用外部样…
HTML5+CSS3+JS小实例：科技感满满的数字科技脸特效
实例：科技感满满的数字科技脸特效
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edg…
分享87个CSS3特效，总有一款适合您
分享87个CSS3特效，总有一款适合您
87个CSS3特效下载链接：https://pan.baidu.com/s/1CAxe8nPBzXvH7Nr6B_U72Q?pwd8888
提取码：8888
Python采集代码下载链接：采集代码.zip - 蓝奏云
学习知识费力气，收集整理更不…
#vue3 实现前端下载excel文件模板功能
一、需求：
前端无需通过后端接口，即可实现模板下载功能。
通过构造一个 JSON 对象，使用前端常用的第三方库 xlsx，可以直接将该 JSON 对象转换成 Excel 文件，让用户下载模板
二、效果： 三、源码如下&…
CSS中隐藏页面元素的几种方式和区别
前言、
在平常的样式排版中，我们经常遇到将某个模块隐藏的场景，通过css隐藏的元素方法有很多种，它们看起来实现的效果是一致的，但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。…
编程笔记 html5cssjs 051 CSS表格2-2
编程笔记 html5&css&js 051 CSS表格2-2 一、html表格如何按列设置样式？二、练习小结 多数时候是按列设计表格样式的。 一、html表格如何按列设置样式？
在HTML表格中，可以通过CSS来按列设置样式。以下是一个简单的例子：
…
CSS中可继承与不可继承属性有哪些
一、无继承性的属性
1.display：规定元素应该生成的框的类型
属性值作用none元素不显示，并且会从文档流中移除。block块类型。默认宽度为父元素宽度，可设置宽高，换行显示。inline行内元素类型。默认宽度为内容宽度，不…
编程笔记 html5cssjs 049 CSS列表
编程笔记 html5&css&js 049 CSS列表 一、CSS列表二、HTML 列表和 CSS 列表属性三、定位列表项标记四、列表 - 简写属性五、设置列表的颜色样式六、练习小结 CSS设置列表样式。 一、CSS列表
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-10 autocomplete属性
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>autocomplete属性</title>
</head><body><form ation"#" method"post" name"search" autocomplete"on&…
编程笔记 html5cssjs 052 CSS伪类
编程笔记 html5&css&js 052 CSS伪类 一、CSS 伪类二、锚伪类三、伪类和 CSS 类四、CSS - :first-child 伪类五、CSS - :lang 伪类六、所有 CSS 伪类 伪类可以理解为元素的特定状态。 一、CSS 伪类
什么是伪类？伪类用于定义元素的特殊状态。 设置鼠标悬停在…
编程笔记 html5cssjs 060 css响应式布局
编程笔记 html5&css&js 060 css响应式布局 一、响应式布局二、Bootstrap简介总结 CSS响应式布局是一种可以在不同设备（例如桌面电脑、平板电脑、手机等）上自动调整页面布局和样式的技术。 一、响应式布局
使用CSS响应式布局的关键是媒体查询&am…
HTML5+CSS3+移动web——HTML 基础
目录
一、标签语法
HTML的基本框架
1. 标题标签
2. 段落标签
3. 换行和水平线
4. 文本格式化标签
5. 图像标签
6. 路径
相对路径
绝对路径
7. 超链接标签
8. 音频
9. 视频
10. 注释
二、标签结构 一、标签语法
HTML 超文本标记语言——HyperText Markup Langua…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例5-1事件处理
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>事件处理</title>
</head><body>
<input id"btn" type"button" name"btn" value"提交" />
<…
pointer-events: none；解决页面水印导致子节点鼠标事件失效的问题
背景：实现水印功能之后，由于水印是一个遮罩层，导致z-index元素比较低的子元素，鼠标移入事件、点击事件都失效了。
解决方案：给添加水印样式的元素，添加css样式：pointer-events: none;。子元素添…
编程笔记 html5cssjs 073 JavaScrip Object数据类型
编程笔记 html5&css&js 073 JavaScrip Object数据类型 一、创建 Object二、Object 类型的属性与方法三、示例四、参考小结 JavaScript 中的 Object 数据类型是该语言中最复杂也最灵活的数据类型之一，它是其他所有内置对象和用户自定义对象的基础。在 JavaSc…
编程笔记 html5cssjs 074 Javascrip 运算符
编程笔记 html5&css&js 074 Javascrip 运算符 一、Javascript运算符1. 算术运算符2. 赋值运算符3. 一元运算符4. 位运算符5. 关系和比较运算符6. 逻辑运算符7. 条件(三元)运算符8. 属性访问和调用运算符9. 删除、new 和 typeof 运算符 二、Javascript运算符的特点小结 …
跟着pink老师前端入门教程-day20
二、移动WEB开发之flex布局
1、flex 布局体验
1.1 传统布局与flex布局
传统布局：兼容性好、布局繁琐、局限性、不能再移动端很好的布局
flex弹性布局：操作方便，布局极为简单，移动端应用很广泛；PC 端浏览器支持情况…
有趣的CSS - 输入框选中交互动效
页面效果 此效果主要使用 css 伪选择器配合 html5 required 属性来实现一个简单的输入框的交互效果。 此效果可适用于登录页入口、小表单提交等页面，增强用户实时交互体验。 核心代码部分，简要说明了写法思路；完整代码在最后，可直…
编程笔记 html5cssjs 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型 一、创建 Object二、Object 类型的属性与方法三、示例四、参考小结 JavaScript 中的 Object 数据类型是该语言中最复杂也最灵活的数据类型之一，它是其他所有内置对象和用户自定义对象的基础。在 JavaS…
CSS两侧固定，中间自适应
这个效果，其实和一侧固定，一侧自适应是一样的原理 以下代码分别用到了 position、float、display: flex / grid、calc
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title></ti…
re:从0开始的CSS之旅 12. 轮廓、阴影、圆角
1. 轮廓
outline 设置元素的轮廓 使用方式与border一样。不同在于不影响盒子的大小
2. 阴影
box-shadow 设置元素的阴影 box-shadow: 30px 30px 50px 5px rgba(0, 0, 0, .5); 第一个值：设置阴影水平距离 第二个值：设置阴影垂直距离 第三个值ÿ…
跟着pink老师前端入门教程-day17
2、CSS3 动画
动画（animation）是CSS3中就要有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播…
编程笔记 html5cssjs 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符 一、Javascript运算符1. 算术运算符2. 赋值运算符3. 一元运算符4. 位运算符5. 关系和比较运算符6. 逻辑运算符7. 条件(三元)运算符8. 属性访问和调用运算符9. 删除、new 和 typeof 运算符 二、Javascript运算符的特点小结…
编程笔记 html5cssjs 080 JavaScript 跳转语句
编程笔记 html5&css&js 080 JavaScript 跳转语句 1. break 语句2. continue 语句3. return 语句注意 在JavaScript中，跳转语句用于改变程序执行流程的顺序. 1. break 语句
break 语句用来强制退出当前循环（如 for、while 或 do...while 循环&am…
蓝桥杯Web应用开发-CSS3 新特性【练习一：属性有效性验证】
练习一：属性有效性验证 页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入不满足要求，背景颜色为红色。 新建一个 index2.html 文件，在其中写入以下内容。
<!DOCTYP…
跟着pink老师前端入门教程-day21+22
5.4 常见flex布局思路 5.5 背景线性渐变
语法： background: linear-gradient( 起始方向 , 颜色 1, 颜色 2, ...); background: -webkit-linear-gradient(left, red , blue); background: -webkit-linear-gradient(left top, red , blue); 背景渐变必须添加浏览…
Html与Css基础知识整合
html基础
2.1 HTML5基本结构
**HTML5****文档的基本结构如下：
<!DOCTYPE html><html><head><title>网页标题</title></head><body>主体内容</body></html>2.1.1 文档类型声明**<!DOCTYPE>
就是HTM…
【css 动画】css实现奔跑的北极熊
📋 个人简介
💖 作者简介：大家好，我是阿牛，全栈领域优质创作者😜📝 个人主页：馆主阿牛🔥🎉 支持我：点赞👍收藏⭐️留言📝…
解决图片底部有空白间隙的问题
问题描述
right-top未设置高度时，插入高为100px的图片，right-top却被撑到了104px。
原因
这是因为形如图片的行内块元素的默认垂直对齐方式是基线对齐（baseline）,给文字预留了部分显示空间（即被文字占用）…
回调地狱（嵌套金字塔）及promise语法
1、回调地狱
回调地狱又称嵌套金字塔；当一个回调函数嵌套一个回调函数的时候，就会出现一个嵌套结构；当嵌套的多了就会出现回调地狱的情况；回调地狱，其实就是回调函数嵌套过多导致的；图示：当代码…
《前端》css总结（上）
前言：
css的定义有很多很多，大家不会的就去这个网站现查一下就好：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration 文章目录样式定义方式行内样式表（inline style sheet）内部样式表（in…
教你用HTML+CSS实现百叶窗动画效果
推荐学习专栏：
【JavaWeb】Web前端JavaWeb学习专栏 文章目录前言1、百叶窗效果2、原理讲解3、制作百叶窗4、资源下载5、完整代码总结前言
我们浏览网页的时候总能看见一些炫酷的特效，比如百叶窗效果，本文我们就用HTMLCSS制作一个百叶窗小项…
[前端开发] 常见的 HTML CSS JavaScript 事件
代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 常见的 HTML CSS JavaScript 事件 事件HTML 事件鼠标事件键盘事件表单事件 JavaScript 事件对象事件代理（事件委托） 事件
在 Web 开发中，事件是用户与网页交互的重要方式之一。通过…
【攻破css系列——第九天】常规流
文章目录1. 常规流2. 常规流布局2.1 定义2.2 包含块2.3 块盒2.3.1 每个块盒的总宽度，必须等于包含块的宽度2.3.2 每个块盒垂直方向上的auto值2.3.3 百分比取值2.3.4 上下外边距合并（margin塌陷）2.4 行盒2.4.1 盒子沿着内容延伸2.4.2 宽高不可…
让学前端不再害怕英语单词（二）
写了本专栏的第一章让学前端不再害怕英语单词（一）后，反响热度还是比较高的，截止现在已经有20个收藏量了，所以趁热打铁来更第二章
第一章我们简单的介绍了html，css和js的部分高频单词，因为html要…
CSS盒子模型（上）
🍓个人主页：bit.. 🍒系列专栏：Linux(Ubuntu)入门必看 C语言刷题 数据结构与算法 HTML和CSS3 目录
1.盒子模型
1.2盒子模型（Box Model）组成
1.3边框（border）
1.4 表格的…
那些惊艳一时的 CSS 属性
1.position: sticky 不知道大家平时业务开发中有没有碰到像上图一样的吸顶的需求：标题在滚动的时候，会一直贴着最顶上。 这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话&…
11.前端笔记-CSS盒子模型-外边距margin
1、margin
1.1 margin的语法
盒子与盒子之间的距离
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…
Js实现轮盘抽奖功能，一招帮你解决选择困难症
不知道今天自己该吃什么，一招帮你解决选择困难症。 通过htmlcssjs实现一个轮盘抽奖功能。我们可以将平时吃的饭菜输入到代码中，每到纠结的时候只需点开抽一次就可以了。
实现步骤
html代码： 整体实现的结构是一个大的圆形，分成…
DOM算法系列009-判断给定节点是否为块级元素
UID: 20221227215215 aliases: tags: source: cssclass: created: 2022-12-27 块级元素
给定一个节点，如何判定它是否为块级元素呢？
首先，块级元素一定是元素节点，所以它的nodeType 1其次，我们思考，有什…
手把手教你如何在项目中使用阿里字体图标IconFont
阿里图标官网地址：IconFont-阿里巴巴矢量图标库
一、注册账号
要使用阿里图标，首先你要在它的官网注册一个账号，注册的方式有多种（手机号，Github，微博，阿里域账号），根据…
2024前端面试准备之CSS篇（一）
全文链接
1. CSS选择器的优先级是怎样的
CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器
计算示例：优先级由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下： A 的值等于 1 的前提是存在内联样式, 否则 A = 0B 的值等于 ID选择器 出现的次…
编程笔记 html5cssjs 082 JavaScript 函数
编程笔记 html5&css&js 082 JavaScript 函数 一、函数二、函数的定义（一）、函数声明：（二）、函数表达式（匿名函数赋值）：（三）、箭头函数表达式…
编程笔记 html5cssjs 085 JavaScript 内置函数
编程笔记 html5&css&js 085 JavaScript 内置函数 一、内置函数二、内置对象三、函数和方法之间的区别 内置函数是JavaScript语言本身提供的，无需定义即可直接使用的函数。它们在全局作用域中可用，并且在处理常见任务时提供了便利。 一、内置函数…
用CSS3画一个三角形
<style>
.up{width:0;height:0;border: 100px solid transparent;border-top: 100px solid red;/*红色*/
}
.down{width:0;height:0;border: 100px solid transparent;border-bottom: 100px solid blue;/*蓝色*/
}
.left{width:0;height:0;border: 100px solid transpare…
工作心得——css让元素居中的方法
前言
今天在制作一个页面样式时，有一个要将卡片组件设置为页面水平居中需求，我采用的方法是将元素设为相对定位后再通过left和transform属性调成水平居中。如何让元素居中是页面设计中必不可少的，下面我将列举出一些常用的元素居中方法&…
CSS重点知识整理1
目录
1 平面位移
1.1 基本使用
1.2 单独方向的位移
1.3 使用平面位移实现绝对位置居中
2 平面旋转
2.1 基本使用
2.2 圆点转换
2.3 多重转换
3 平面缩放
3.1 基本使用
3.2 渐变的使用
4 空间转换
4.1 空间位移
4.1.1 基本使用
4.1.2 透视
4.2 空间旋转
4.3 立…
CSS3技巧37：JS+CSS3 制作旋转图片墙
开学了就好忙啊，Three.js 学习的进度很慢。。。
备课备课才是王道。
更一篇 JS CSS3 的内容，做一个图片墙。 其核心要点是把图片摆成这个样子： 看上去这个布局很复杂，其实很简单。其思路是：
所有图片放在一个 div.…
CSS3的颜色函数： hsl() 和 hsla() 函数
1. hsl() 函数使用色相、饱和度、亮度来定义颜色。 HSL 即：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。 hue-色相 定义色相（0到360）-0（或360&#…
react + umi中如何使用rem完成自适应布局
只要写css就可以实现：flex rem布局； 在项目的global.less中根据媒体查询； 媒体查询是用于根据设备的特性（如屏幕尺寸、屏幕方向、分辨率等）来应用不同的 CSS 样式的技术。以下是一些常用的媒体查询尺寸： 小…
怎么用CSS画一个爱心？
当用CSS画爱心时，可以使用伪元素和CSS动画来创建一个简单的爱心形状。
示例代码：
<!DOCTYPE html>
<html lang"en">
<head>
<meta charset"UTF-8">
<meta name"viewport" content"widt…
HTML5和CSS3的一些重要特性
HTML5和CSS3是现代Web开发中非常重要的技术标准，它们带来了许多新的特性和功能，提升了网页的交互性和可视化效果。
HTML5的一些重要特性包括：
语义化标签：HTML5引入了一系列的语义化标签，如<header>、<nav&…
【HTML】再见2022！一起来写一个响应式跨年倒计时吧(附源码)
💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后…
CSS 特效之心形-彩虹-加载动画
CSS 特效之心形-彩虹-加载动画（居中抖动问题）参考描述效果HTMLCSS重置元素的部分默认样式bodyli动画定义指定animationul居中抖动问题代码总汇参考
项目描述搜索引擎BingMDNMDN Web Docs
描述
项目描述Edge109.0.1518.61 (正式版本) (64 位)
效果 HTML…
踩坑实录（Second Day）
作为公司的小菜鸟，每天都踩坑应该是一件很正常的事情吧，哈哈哈。今天遇到了比较棘手的问题，以前从来没有遇到过。然后就是在某平台上接的一个 bug 修改的单子，也拿出来和大家分享一下~ 此为第二篇（2024 年 02 月 05 日…
移动端设置position: fixed；固定定位，底部出现一条缝隙，不知原因，欢迎探讨！！！
1、问题 在父盒子中有一个子盒子，父盒子加了固定定位，需要子盒子上下都有要边距，用margin或者padding挤开时，会出现缝隙是子盒子背景颜色的。 测试过了，有些手机型号有，有些没有，微信小程序同移…
CSS选择器：让样式精确命中目标
CSS选择器：让样式精确命中目标
在网页开发中，CSS选择器是一种强大的工具，它可以帮助我们精确地定位HTML元素，以便为它们应用样式。在这篇博客中，我们将探讨一些常见的CSS选择器，了解它们的功能和使用方法。…
第二章：HTML CSS 网页开发基础（二）
CSS概述
CSS全称：Cascading Style Sheet，可以对文字进行重叠，定位。主要实现页面美化。
一、CSS规则
CSS样式表中包括了3部分：选择符、属性、属性值 选择符{属性:属性值;} 选择符：也可以称为选择器，所有…
颜值即正义,献礼就业季,打造多颜色多字体双飞翼布局技术简历模版(Resume)
一年好景君须记，最是橙黄橘绿时。金三银四，秣马厉兵，没有一个好看的简历模板怎么行？无论是网上随便下载还是花钱买，都是一律千篇的老式模版，平平无奇，味同嚼蜡，没错，蜡都…
CSS继承：inherited和initial
任何样式都有两种值，一种加inherited，一种叫initial 每个标签都有浏览器默认样式 首先看颜色属性 color有3种值 颜色有3种表示方式，最后一种是rgb(),用十进制来表示，但很少用，常用的是中间那个 来看实例
这里前面是红…
CSS基础——复合选择器
一、定义
复合选择器是建立在基础选择器的基础上的，对基本选择器进行组合形成的
复合选择器可以更精确的，更高效的选择目标元素（标签），精确指出想要选择的标签，避免多选，错选。
复合选择器是…
CSS中相对定位与绝对定位的区别及作用
CSS中相对定位与绝对定位的区别及作用场景复现核心干货相对定位绝对定位子绝父相🔥🔥定位总结绝对定位与相对定位的区别场景复现
在学习前端开发的过程中，熟练掌握页面布局和定位是非常重要的，因此近期计划出一个专栏，…
css实现鼠标禁用（鼠标滑过显示红色禁止符号）
css实现鼠标禁用（鼠标滑过显示红色禁止符号）创作背景css鼠标禁用创作背景
从本文开始，将会用三篇文章来一步一步实现 vueantdts实战后台管理系统中table表格的不可控操作。中间会补充两篇css知识文章 ，方便后续功能的实现。实现表…
【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总（附源码）
【写在前面】web开发过程中，页面背景色想要一个渐变的效果很多时候网上一找全是官网那种很丑的色系，尤其是一些按钮和一些大背景色时候，不能搞得很yellow，今天我就做个工具人给大家罗列一些我在工作过程中总结的一些好看的渐变效果…
javaScript贪吃蛇
一、准备工作
1.图片
准备蛇头图片准备开始图片准备食物图片
2.html
创建一个index.html文件
<body><!-- 整个游戏容器 --><div class"container"><!-- 开始游戏按钮 --><button class"startBtn"></button><!…
css样式穿透（/deep/和::v-deep以及＜＜＜深度选择器）
css样式穿透（/deep/深度选择器）场景复现样式穿透stylus的样式穿透 使用>>>（不推荐）sass和less的样式穿透（推荐）场景复现
当我们使用ant design vue组件库（点击跳转查看相关内容&#…
css3之box-shadow
1.box-shadow属性语法
box-shadow 属性接受值最多由五个不同的部分组成。 box-shadow: offset-x offset-y blur spread color position; **offset-x: X轴偏移量 ** **offset-y: Y轴偏移量 ** **blur: 阴影模糊半径 ** **spread: 阴影扩展半径 ** **color: 阴影颜色 ** **posit…
CSS中的几种尺寸单位
一、尺寸单位
CSS 支持多种尺寸单位，包括：
px：像素，固定大小单位em：相对于当前元素字体大小的单位rem：相对于根元素（HTML）字体大小的单位%：相对于父元素的百分比单位vh…
认识 CSS pointer-events 属性
pointer-events 的基本信息
pointer-events 属性用来控制一个元素能否响应鼠标操作，常用的关键字有 auto 和 none
pointer-events: none; // 让一个元素忽略鼠标操作
pointer-events: auto; // 还原浏览器设定的默认行为 规范定义
条目状态初始值auto可用值适用所…
CSS3新增属性（ 过渡、变形和动画）
文章目录一、过渡1、transition-property2、transition-duration3、transition-timing-function4、transition-delay二、变形1、transform2、2D变形2.1、平移（translate）2.2、缩放（scale）2.3、倾斜（shew）2.…
移动WEB开发三、flex布局
零、文章目录
文章地址
个人博客-CSDN地址：https://blog.csdn.net/liyou123456789个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn
代码仓库地址
Gitee：https://gitee.com/bluecusliyou/TechLearnGithub：https:…
让学前端不再害怕英语单词（三）
前两章直通车↓↓↓ 让学前端不再害怕英语单词（一） 让学前端不再害怕英语单词（二）
由于前两章都反响强烈，都上了全站的热榜，所以今天打算把第三章也写出来 第三章我们主要讲一下css中的伪类的英语单词还有…
8.前端笔记-CSS-背景设置
背景样式包括：背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
属性取值作用background-color预定义颜色值\rgb\16进制背景颜色background-imageurl(图片路径)背景图片background-repeatrepeat/no-repeat/repeat-x/repeat-y是否平铺background-positi…
css总结9（过渡和2D变换）
目录
过渡
2D变换
3D变换 过渡
属性结构图 过渡补充 ### 过渡多个元素样式属性 transition:style1 duration , style2 duration,...; ### 过渡所有属性 transition: all duration; 简单示例 ### 移入时改变长度且加入过渡效果 div { width:100px; height:100px; …
【一看就会】实现仿京东移动端页面滚动条布局
简单粗暴直接上代码： <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewport" content&q…
通过浏览器降级提高兼容性
通过浏览器降级提高兼容性
使用 CSS 时可能会遇到浏览器兼容性问题。 所以提供浏览器降级方案来避免潜在的问题就显得很重要。 当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。
例如:如果使用 CSS 变量来指定站点的背景色， IE 浏览器…
CSS布局之使用Flex布局画骰子（3点）
若无基础，请优先阅读学习此文档阮一峰 Flex 布局教程：语法篇
上一篇文章CSS布局之使用Flex布局画骰子（2点）
这次画3个点的骰子。大家可以先看图片默写代码，然后与文中代码做校验，来验证自己是否理解了Fle…
什么是BFC？它的作用是什么？
文章目录 1.BFC定义创建BFC的条件BFC的特点 2.BFC的作用 1.BFC定义 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过 程中生成块级盒子的区域，也是浮动元素与其他元素的交互限…
CSS自定义鼠标样式
CSS自定义鼠标样式
属性值
属性描述url需使用的自定义光标的 URLdefault默认光标（通常是一个箭头）auto默认。浏览器设置的光标crosshair光标呈现为十字线pointer光标呈现为指示链接的指针（一只手）move此光标指示某对象可被移动e…
响应式布局是什么?如何实现响应式布局
响应式布局是一种布局方式，它可以根据不同设备的屏幕大小和分辨率自适应调整布局，从而使网页在不同设备上都能够正常显示。
实现响应式布局的步骤如下：
获取设备信息：
首先需要获取设备信息，包括屏幕尺寸、分辨率、…
CSS实现checkbox选中动画
前言
👏CSS实现checkbox选中动画，速速来Get吧~ 🥇文末分享源代码。记得点赞关注收藏！
1.实现效果 2.实现步骤
定义css变量，–checked，表示激活选中色值
:root {--checked: orange;
}创建父容器…
CSS中的伪元素和伪类
一直被伪类和伪元素所迷惑，以为是同一个属性名称，根据CSS动画，索性开始研究a:hover:after，a.hover:after的用法。
伪元素
是HTML中并不存在的元素，用于将特殊的效果添加到某些选择器。
对伪元素的描述
伪元素有两…
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选
1 CSS简介
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是也是一种标记语言，主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观…
21个超实用的 CSS 技巧分享（附图示）
本文中分享的所有CSS技巧都是来自GitHub代码库“css tips tricks”的手工精选，此代码库专为开发者提供专业的CSS技巧。1、文档布局使用仅两行CSS代码，创建一个响应式的文档布局。这个布局风格类似于文档页面，可以很好地展示各种信息。.parent…
前端原生小案例，如何创建一个简易的幻灯片
最近我正在一个项目上工作，需要实现一个幻灯片/轮播。我在网上搜索了一下，但没有找到具有我需要的功能或者还要装一些插件，所以，我想自己创建一个，方便自己使用。这是一个示例：HTML让我们为轮播创建基本的H…
10-CSS-rem适配布局
思考1. 页面布局文字能否随着屏幕大小变化而变化？2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？一、rem 基础rem 单位rem (root em)是一个相对单位࿰…
14个你需要知道的实用CSS技巧
让我们学习一些实用的 CSS 技巧，以提升我们的工作效率。这些 CSS 技巧将帮助我们开发人员快速高效地构建项目。
现在，让我们开始吧。
1.CSS :in-range 和 :out-of-range 伪类
这些伪类用于在指定范围限制之内和之外设置输入样式。
(a) : 在范围内
如…
如果你不是前端，一定不知道我在说什么
本文没有一句知识点，也没有一行代码，有的只是一些过家家似的内容，进而演变成的N个小朋友之间的对话。请原谅，如果你不是前端，可能你会不知道我在说什么，甚至觉得有些枯燥无味。 1、小A和小B
很久很久以前…
9个非常有趣的HTML5 Canvas动画特效合集
HTML5技术正在不断的发展和更新，越来越多的开发者也正在加入HTML5阵营，甚至在移动开发上HTML5的地位也是越来越重要了。HTML5中的大部分动画都是通过Canvas实现，因为Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形…
世界那么大，你哪都别去了，来我带你了解CSS3 (二)
文章目录❤️🔥CSS文档流❤️🔥CSS浮动❤️🔥CSS定位❤️🔥CSS媒体查询❤️🔥CSS文档流 文档流是文档中可显示对象在排列时所占用的位置/空间。 例如：块元素自上而下摆放，内…
CSS中height:100vh和height:100%的区别是什么？
CSS中height:100vh和height:100%的区别
首先，我们得知道1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%（可以这么理解？）
1、对于设置height:100%;有下面几种情况：
（…
HTML浪漫动态表白代码+音乐(附源码)
HTML浪漫表白求爱(附源码)，内含4款浪漫的表白源码，可用于520，情人节，生日，求爱场景，下载直接使用。
直接上源码吧
一.红色爱心
1.效果
实际效果是动态的哦
2.源码
复制粘贴即可运行哦
<!DOCTYPE…
CSS基础：选择器和声明样式
CSS概念
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表
CSS用于HTML文档中元素样式的定义
使用css让网页具有美观一致的页面
语法
CSS 规则由两个主要的部分构成：选择器和声明样式 选择器通常…
元素随滚动条滚动后固定在某个地方
先让整体布局居中，左边main内容区域块级设置margin-right来腾出右边的位置，右边sider使用绝对定位黏在父元素上面，sider中仍然按正常布局，当被卷去的高度大于tip距离网页顶部的宽度时，给sider加一个sticky的class&…
css实现炫酷充电动画
先绘制一个电池，电池头部和电池的身体 这里其实就是两个div，使用z-index改变层级，电池的身体盖住头部，圆角使用border-radius完成 html部分,完整的css部分在最后
<div class"chargerBox"><div class"ch…
css实现卡片内容动态切换效果
效果展示 代码 <!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-wid…
CSS动画：transition触发动画和animation非触发动画
前言 本篇在讲什么 本章学习通过CSS样式表现动画 本篇适合什么 适合初学H5的小白 适合初学CSS的小白 适合入门的前端程序 本篇需要什么 对Html和css语法有简单认知 Node.js(博主v18.13.0)的开发环境 Npm(博主v8.19.3)的开发环境 依赖VS code编辑器 本篇的特色 具有…
HTML5新特性、CSS3新特性看这一篇就够啦，可用于快速回顾知识，面试首选
1 HTML5 的新特性
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 些新特性。
更…
【CSS】CSS 特性 ⑤ ( CSS 优先级 | 经典权重计算示例 1 )
文章目录基础选择器权重一、权重计算示例 11、代码示例2、权重分析3、展示效果二、权重计算示例 21、代码示例2、权重分析3、展示效果三、权重计算示例 31、代码示例2、权重分析3、展示效果基础选择器权重
基础选择器 权重 :
CSS 选择器选择器优先级 - 权重计算继承父标签的样…
【零基础入门前端系列】—动画和弹性盒模型（二十四）
【零基础入门前端系列】—动画和弹性盒模型（二十四）
一、概念
动画是使元素从一种样式逐渐变化为另一种样式，你可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词from和to，等同0%和10…
编程笔记 html5cssjs 064 JavaScrip语言规则
编程笔记 html5&css&js 064 JavaScrip语言规则 JavaScript 有哪些基本的语言规则？ 接下来正式接触编程语言了，每一门语言都有一些基本的语言规则，这些规则有些在没有具体使用之前可能不好理解，初学者简单了解就可以了&…
利用Vue,fetch实现前后端数据交互
利用Vue,fetch实现前后端数据交互
利用fetch实现数据的交互，简单练习的小实例。
目录结构index.html代码
<!DOCTYPE html>
<html>
<head><meta charset"utf-8"><meta name"viewport" content"initial-scale…
暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现
众所周知，网页的暗黑模式可以减少屏幕反射和蓝光辐射，减少眼睛的疲劳感，特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应（Neon Effect）提供了发挥的环境。
霓虹灯效应是一种视觉效果，其特点是在深…
Vue3电商项目实战-个人中心模块8【18-订单详情-商品信息】
文章目录18-订单详情-商品信息18-订单详情-商品信息 落地代码：
1.基础布局
<template><div class"order-info"><!-- 商品列表 --><h3>订单商品</h3><table class"goods-table"><thead><tr>&…
第四章 Vite4+Vue3+Vtkjs 实现模型旋转、截图、背景色切换等
一、介绍 😺 😸 😻
上一章节我在模型可视化区域加了一些图标，但是对应的功能都没有去开发，这期我们就来逐个去实现相应的功能。 组件的话我分为tooltip和vuetoolbar，很好理解，就是上下两个工具。可视化区域右上侧的功能主要是针对模型的一个旋转操作。 右下部分的工…
[Vue3]Transition + Component实现路由跳转浅入浅出效果
[Vue3]Transition Component实现路由跳转浅入浅出效果
实现
transition component组合
<template><!-- <router-view />--><router-view v-slot"{ Component, route }"><transition name"fade" mode"out-in"…
纯css实现文字走马灯
纯css实现文字走马灯
主要用到了css3中animation,效果和代码如下 <!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name&qu…
node版本配置的可能会遇到的问题
node版本配置的可能会遇到的问题 npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for n8.1.0: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64&qu…
如何给表格的tr加上下边框
直接给tr上加上border-bottom的时候发现边框不会正常显示，查找资料后总结如下：
在table中有一个默认的属性：border-collapse 参数： 1.separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。 2.collapse …
如何将div悬浮在另外一个div之上？
解决方案1 如何“悬浮”是想让一个层叠加在另一个层上的话，你可以利用相对定位和绝对定位来实现 比如: 你在父元素上设置position:relative; 在子元素上设置position:absolute;top:10px;left:10px; 这样如果父元素里面有其他元素的话 上面定义的这个子元素就可以”悬…
CSS 布局技巧和实践
CSS 布局是前端开发工作中最常见的一项任务。为了优化布局效果和提高用户体验，我们需要掌握一些常用的布局方式和技巧。这篇文章将分享 CSS 布局的技巧和实践，包括常用的布局方式、弹性盒布局、网格布局、流式布局、浮动布局和定位布局等内容，…
Vue封装的过渡与动画
目录
一、Vue动画内置组件
（1）Transition
（2）TransitionGroup
二、Vue中使用css过渡效果class
三、Vue组件实现动画
（1）单个动画，用transition （2）多个动画用trans…
#css# 【四】实现鼠标移入图片显示遮罩层
css 实现鼠标移入图片显示遮罩层
实现鼠标移入图片显示遮罩层的方法有很多 比如动画库，动画库的使用可看 #前端开发001之Animate动画库的安装及详细用法
不过动画库使用起来还是有点麻烦，所以本篇分享一个原生的简洁写法
三步解决： 第一步…
css动画及背景设置
css属性
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。 可以创建多边形内容显示区域polygon clip-path: polygon(0 0, 100% 0, 100% 75vh 0 100%);
顺序
1初始x y 为0 0
1向2位置 x轴移动100% y移…
HTML5和CSS3五CSS3三
代码下载地址
线性渐变
linear-gradient(direction, color-stop1, color-stop2, …)：线性渐变是沿着一条直线产生渐变效果。
值描述direction定义渐变效果方向或角度（to left：从右到左相当于270deg、to bottom：从上到下相当于1…
vue2实现高德地图 JSAPI 2.0轨迹回放组件(MoveAnimation)
vue2实现高德地图 JSAPI 2.0轨迹回放组件(MoveAnimation)
声明: 本人是做java后端的,组件抽取不是很规范请大家见谅 前提: 需要注册高德开放平台,之后创建应用并且开通Web端(JS API)平台,然后拿到securityJsCode和key 实现效果: 1. 基础抽取 注意: 将securityJsCode和key修改为…
如何让flex布局中的一个子元素单独右侧对齐
flex布局中的一个子元素单独右侧对齐
在 Flex布局中，我们经常需要对子元素进行对齐操作。使用 justify-content 和 align-items 可以轻松地对所有子元素进行对齐，但是当我们需要对某个子元素进行单独的对齐时，我们应该怎么做呢？ …
2023前端面试题汇总
1.盒子水平垂直居中方法（常见）
利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。
.fu{position:relitive;
}
.zi{position:absolute;top:50%;left:50…
分享一个图片展示特效
先上效果图： 备注：这个效果图太大了，压缩了一下效果有点不咋好看。感兴趣同学们可以自己运行代码看一下，保证不会失望~
再上代码：
<!DOCTYPE html>
<html lang"en">
<head><meta cha…
我用css3为好友胡歌的宝宝做了一个动画照片墙
软件人生风雨十年，仙剑一过去也有十年有余了，和胡歌认识那么久，今日喜闻好友胡歌生宝宝的消息，惊喜之余用css3为胡歌的宝宝做了动画照片墙的模板效果。 目录
1. 实现思路
2. 墙体的实现
3. 选取模板素材，进行图片元…
CSS基础学习（3）——浮动和定位
【往期文章】
CSS基础学习（1）CSS基础学习（2）——盒子模型布局 1. 浮动和定位特点
除了盒模型布局，还有浮动布局和定位布局。
浮动布局中，元素可以脱离文档流，实现将多个块元素同处一行的效果…
【CSS 布局】-多列布局
一、两列布局
两列布局：一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。
创建一个父盒子，和子盒子 <div class"container clearfix"><div class"left ">定宽</div><div class"right…
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
别具一格，原创唯美浪漫情人节表白专辑，
(复制就可用)（html5,css3,svg)表白爱心代码(1) 一、 前言 回眸之间，丰盈了岁月，涟漪了思绪，轻轻落笔，不写伤痕，不写仇怨，只写岁月…
HTML+CSS实训——Day02——仿一个网易云音乐的登陆界面
前言
今天要继续完成我们的音乐软件了，昨天写完了封面，今天该完成开屏广告和登陆界面了。
登陆界面代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-C…
CSS3煎制荷包蛋动画特效，优质男士表白必备
你有多久没吃过早餐了？你是否每天忙碌到很晚，结果导致早上起来也很晚，匆匆忙忙来不及吃早餐，更别说自己做了。一直到现在，你有多久没有吃到过母亲做的早饭了？我们在外奔波，希望家人安康…
白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间（LCP）
怎么获取到这两个数据
通过web-vitals-extension插件
web-vitals-extension插件
效果
通过chrome开发者工具Performance选项卡 通过chrome开发者工具Lighthouse选项卡 通过JS计算
web-vitals
FP & FCP & LCP
FP:（First Paint / 首次绘制）…
flex布局：输入框布局demo
目标效果
首先，生成输入框：
代码： 结果：
设置基本样式
包括：去除边距、设置父盒子的宽度(如果不设置宽度，会使用整个浏览器的宽度）、添加父盒子边框等
代码：
*{margin: 0;pad…
《Qt6开发及实例》6-4 显示SVG格式图片
目录
一、简介与设计
1.1 简介
1.2 设计
二、SvgWidget
2.1 鼠标滚轮事件
三、svgwindow
四、MainWindow 一、简介与设计
1.1 简介
1、SVG 的英文全称是 Scalable Vector Graphics，即可缩放的矢量图形。它是由万维网联盟（W3C）在 200…
JavaWebHtmlCSS总结
目录 JavaWeb概述1.访问web的原理2.C/S软件和B/S软件区别3.静态网站和动态网站 HTMLHTML的概述Table表格详细用法见W3CSchool.chm合并单元格课程表 img标签table和img标签组合使用a标签表单表单Get提交和post提交 div和span CSS1.CSS概述2.CSS语法3.CSS三种写法行内样式内部样式…
【css】box-sizing属性
box-sizing 是一个 CSS 属性，用于指定元素的总宽度和高度的计算方式。它影响内容框的大小，并可以包括或排除元素的填充、边框和外边距。
box-sizing 属性接受两个值： content-box：这是默认值。它指定元素的宽度和高度只包括内容区…
前端学习（11）选择器（基本、层次、结构伪类、属性）
选择器作用：选择页面上的某一个或者某一类元素
基本选择器 标签选择器：选择一类标签: 标签{}类选择器 class：选择所有class属性一致的标签，跨标签: .类名{]Id选择器：全局唯一! #id名{} 优先级：id > cla…
JS---- mouseenter和mouseover的区别以及动画函数的封装
mouseenter 和mouseover的区别
当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover，它们两者之间的差别是mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不…
JS-三大元素系列----offset、client和scroll
元素偏移量offset系列：
offset就是偏移量，使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回…
030 JavaWeb Html CSS
目录 JavaWeb概述1.访问web的原理2.C/S软件和B/S软件区别3.静态网站和动态网站 HTMLHTML的概述Table表格详细用法见W3CSchool.chm合并单元格课程表 img标签table和img标签组合使用a标签表单表单Get提交和post提交 div和span CSS1.CSS概述2.CSS语法3.CSS三种写法行内样式内部样式…
微信小程序实用工具——渐变色按钮（二）
今日推荐💁♂️ 今年的国美毕业展已经开始了🧑🎨🧑🎨在杭州的小伙伴可以快速出击了🏃♂️🏃♂️ 这里我想推荐其中的一副版画作品《突围》 在众多版画系作品中被它所吸引 文章目录 今…
php面试常问面试题
1、css的定位有哪些方式？以及用法
position 在英文中表示“位置”的意思 它主要是用于实现对元素的定位
在CSS中定位分为三种：
position:fixed 固定定位
position:relatvie 相对定位
position:absolute 绝对定位
position:static 无特殊定位 (默…
如何选择好用的效果图渲染平台
在现代的建筑设计、室内设计、电影动画等行业中，效果图已经成为了一个重要的工具，能够帮助设计师和制作人员更好地呈现他们的想法和概念。而要制作出高质量的效果图，一个好用的效果图渲染平台是非常必要的。
如何选择好用的效果图渲染平台呢…
CSS查缺补漏之《说一说CSS3有哪些新特性？》
面试时经常会被用到你了解CSS3新特性嘛，针对此问题，特整理如下~ 背景相关 background-size：用于设置背景图的尺寸 可选属性值有 length、percentage、cover、contain、auto length用长度值规定背景图片大小，若有两值，…
前端的CSS样式表知识提要
文章目录前言基本概念屏幕尺寸屏幕分辨率屏幕像素密度/像素密度/屏幕密度视口和浏览器窗口长度单位：px、em/rem和vhCSS属性的继承与覆盖CSS选择器CSS 布局基础盒子模型绝对定位和相对定位display属性浮动正常布局流（normal flow）Flexbox 布局…
基础篇—CSS margin(外边距)解析
什么是CSS margin(外边距)？
CSS margin(外边距)属性定义元素周围的空间。 属性描述margin简写属性。在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设置元素的右外边距。margin-top设置元素的上外边距。mar…
html中元素居中的五种方法
在网页开发中，经常会有嵌套元素中将子元素居中的要求。下边将五种常用的居中方法进行总结。 1：原始图（父子元素无border，无padding）：
2：实现居中效果：
一：使用margin…
【ts + webpack】贪吃蛇小游戏
目录 一、项目搭建
1.1 初始化项目
二、项目界面布局
三、完成Food类
四、完成记分牌类
五、初步完成snake类
六、创建游戏控制器类 - 键盘事件
七、GameControl - 使蛇移动
八、蛇撞墙和吃食检测 一、项目搭建
1.1 初始化项目
1.使用init命令生成package.json文件
…
经典布局 （flex和传统两种实现） 左右两栏式
1.混合浮动普通流 混合浮动普通流 父级：宽度固定 left:宽度固定。浮动起来 right:宽度和父级一样，设定margin-right:left的宽度px,宽度随父级变化而变化（固定自适应）
<!DOCTYPE html>
<html lang"en">
<…
事件流、事件冒泡、阻止冒泡
1、事件流 2、事件冒泡：从小到大
概念： 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
<style>
.father{width: 300px;height: 300px;background-color: pink;
}
.son{width:…
【前端】CSS3弹性布局、媒体查询实现响应式布局和自适应布局
文章目录弹性布局基本概念容器（container）的属性容器成员（item）的属性媒体查询响应式布局自适应布局参考弹性布局
基本概念
任何一个容器都可以指定为 Flex 布局。
display:flex;行内元素也可以：
display:inline-f…
你不知道的 CSS 之包含块
你不知道的 CSS 之包含块
一说到 CSS 盒模型，这是很多小伙伴耳熟能详的知识，甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。
但是一说到 CSS 包含块，有的小伙伴就懵圈了，什么是包含块？好像…
CSS 美化网页元素【快速掌握知识点】
目录
一、为什么使用CSS
二、字体样式
三、文本样式
color属性
四、排版文本段落
五、文本修饰和垂直对齐
1、文本装饰
2、垂直对齐方式
六、文本阴影
七、超链接伪类
1、语法
2、示例
3、访问时，蓝色；访问后，紫色； …
【Three.js】手把手教你在三维场景中实现人物行走动画效果
three.js的官方例程里面有个人物行走的案例，链接如下：
three.js官方案例-人物行走
这里简单剖析下人物行走的原理：
（1）
首先需要有个动画素材。gltf是可以集成动画的，像行人行走的动画，一般…
列举你了解Html5. Css3 新特性
HTML5新特性：
(1)语义化标签：nav、header、section、article、aside、footer等，使网页更易于理解和维护。
(2)音视频标签：audio和video标签，使嵌入音、视频更简单。
(3)canvas标签：可以在其中绘制图形&am…
css-transform2D变换
文章目录translate() 位移rotate() 旋转scale()缩放skew() 斜切transform的细节和特性元素引用transform属性值不会影响元素的尺寸和位置参数的顺序不同，会影响结果transform会创建新的层叠上下文固定定位实效改变overflow对元素的限制transform-origin更改元素变换…
HTML+ CSS 笔记
CSS1. 外边距合并 margin2. 浮动和清除浮动3. CSS 属性书写顺序(重点)4. 页面布局分析5. 定位定位模式子绝父相：z-index定位的拓展6. 元素的显示与隐藏7. 精灵图 sprites8. 字体图标 iconfont9. 居中10. 文字溢出处理情况11.HTML5 和CSS3 新增标签12.品优购1. 项目规…
![[oeasy]python0110 屏幕点阵字体_3x5_5x7_雅达利字库](https://img-blog.csdnimg.cn/img_convert/7c91023ab6f385b7900f674e22c4a6ed.png)
[oeasy]python0110 屏幕点阵字体_3x5_5x7_雅达利字库
屏幕点阵字库
回忆上次内容
上次回顾了 字符字型 的 进化过程 从 谷腾堡 活字印刷中的 平织菱足体 到 文艺复兴中的 罗马正字 和 意大利斜体 再到 电传打字机 中的 teletype 字模 最终 发展到 点阵式 打字机Dot Matrix 显示器中的像素 可以构成点阵吗？ 发光二极…
HTML文本框参考样式及常见操作技巧大全
在网页设计中，常常要使用 html 文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引力，下面就给大家提供了一些 html 文本框的参考样式和常见的 html 操作技巧&a…
Doxygen 详细使用
doxygen的安装和基本使用可参考：Doxygen的安装和基本使用常用选项doxygen的所有选项的参考文档：doxygen官网文档2、样式说明doxygen可以自己自定义样式。手写 .css文件 （可以查看doxygen的源码，进行相对应修改）在Exper…
第二章——CSS基础选择器，标签选择器，类选择器， id 选择器，通配符选择器
文章目录2.1 CSS选择器的作用2.2 CSS选择器分类2.3 CSS 基础选择器分类2.4 标签选择器2.5 类选择器2.5.1 多类名选择2.6 id选择器2.7 id选择器与类选择器的区别‘2.8 通配符选择器2.9 选择器对比2.1 CSS选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选…
用css实现简易报警灯
主题
用css来实现一个简易的报警灯效果
实现效果 实现思路
实现的核心是一个灯罩和一个灯芯。灯罩主要是使用了border-radius圆角边框，灯芯主要是radial-gradient径向渐变。再使用动画效果来实现一闪一闪的效果。让我们来一步一步实现效果。
灯罩实现
因为大…
CSS渲染：CSS是如何绘制颜色的
颜色的原理
最常见的颜色相关的属性就是 color 和 background-color。
颜色值：RGB 颜色，CMYK 颜色，HSL 颜色，其它颜色
RGB 颜色：它符合光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。
现代…
centos7安装教程
1.点击文件–新建虚拟机 2.根据图片一直下一步或者做一些改动 3. 点击自定义硬件，点击浏览选中下载好的ISO文件 4.配置完成后启动虚拟机 5.选择语言，中英文都可，按需求选择 6.进行设置目标位置，配置分区 7.选择网络和主机名 8.配置…
HTML、CSS学习笔记7（移动适配：rem、less）
一、移动适配
rem：目前多数企业在用的解决方案vw / vh：未来的解决方案
1.rem（单位）
1.1使用rem单位设置尺寸 px单位或百分比布局可以实现吗？
————不可以 网页的根字号——HTML标签
1.2.rem移动适配 写法&#x…
web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation
文章目录前言1、html部分2、css部分3、JavaScript部分4、微信小程序演示前言 哈哈 1、html部分
<div class"great_ultimate_eight_diagrams_box"><div class"eight_diagrams_box"><div class"eight_diagrams"><div class&…
【CSS 布局】水平垂直居中
CSS 布局-水平垂直居中
一、水平居中
创建一个父盒子，和子盒子 <div class"parent"><div class"child"></div>
</div>基本样式如下
.parent {background-color: #fff;
}.child {background-color: #999;width: 100p…
css选择器分类及优先级判断
目录
选择器分类
全局选择器
元素选择器
类选择器
ID选择器
合并选择器
内联选择器
选择器的优先级 css语法规则由两个主要部分构成：选择器，以及一条或多条样式声明。
选择器分类
全局选择器：*
元素选择器：标签名称
…
金三银四季节前端面试题复习来了
vue3和vue2的区别有哪些
Diff算法的改进Tree Sharing优化主要的API双向绑定改为es6的proxy原生支持tscomposition API移除令人头疼的this
说说CSS选择器以及这些选择器的优先级
!important 内联样式（1000） ID选择器（0100） 类选…
Vue3 + TypeScript 实现自动打字、打字机动画、动画打字工具（TypeIt）
一、介绍
TypeIt是一个JavaScript库，用于创建简单而流畅的打字效果和动画效果。它可以用于网页开发中的很多场景，例如创建动态文字效果、制作页面过渡动画、增强用户体验等。
我们还可以利用它进行一些后端日志的回显，如果某个进程后端实时…
前端原生小案例，如何制作有多个下划线的验证码输入框
大家好，今天给大家分享一个常见的案例，想必大家都遇到过。在开发注册用户或用户登录功能时，经常会使用手机验证码的验证方式。如下图所示，有4个下划线输入框，每个输入框只能输入1个数字。输入完后自动跳转到下一个输入…
D3.js实现线条的流动效果（从一端移动到另一端并且变色）
参考： SVG：理解stroke-dasharray和stroke-dashoffset属性 使用SVG CSS实现动态霓虹灯文字效果 纯CSS实现帅气的SVG路径描边动画效果 实现的效果为：路径左移到完全看不见的地方，然后一边右移，一边从黑色变为红色
<…
flex弹性布局详细介绍
这里提供一个可以边学习边玩的flex学习网站：弹性盒青蛙 目录一、Flex布局是什么？二、属性1. justify-content 属性2. align-items属性3. flex-direction属性4. order属性5. align-self属性6. flex-wrap 属性7. flex-flow属性8. align-content属性三、综合…
vue3使用useMouseInElement实现图片局部放大预览效果
1、首先要安装vueuse/core
npm i vueuse/core2、实现过程如下：
<template><div class"goods-image"><!-- 大图 --><div v-show"show" class"large" :style"[{backgroundImage:url(${images[currIndex]})…
FE_CSS 页面布局之浮动
网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：
普通流（标准流）浮动定位
1 标准流（普通流/文档流）
所谓的标准流: 就是标签按照规定…
卡通形象人物2 写代码-睡觉 丝滑如德芙
目录
本次实现效果 目录结构 index
static/css/style.css
static/js/script.js
结语： 前期回顾
【 css动画 】—— 把你喜欢css动画嵌入到浏览器中_0.活在风浪里的博客-CSDN博客常用酷炫动画999合集，代码直接复制可用，总用你想找的…
面试官：rem和vw有什么区别
"rem" 和 "vw"的区别
"rem" 和 "vw" 都是用于网页设计的CSS单位。
"rem" 是相对于根元素的字体大小来计算的单位，即相对于 "html" 标签的字体大小。例如，如果 "html" 标签的字…
【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录一、盒子模型圆角边框二、代码示例1、代码示例 - 正常矩形边框2、代码示例 - 圆形边框3、代码示例 - 圆角矩形边框4、代码示例 - 综合对比示例一、盒子模型圆角边框 在 CSS3 中 , 新加入了 圆角边框 样式 , 设置
border-radius: length; 属性 , 即可设置 盒子模型 的…
BFC块级格式化上下文
一、概念
BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的：A block formatting context contains everything inside of the element creating it that is not also inside a descendant elemen…
用JS+CSS打造你自己的弹幕王国，让网页动起来！
文章目录前言主要内容实现方法DOM方法显现效果代码CANVAS方法显现效果代码总结更多宝藏前言
😎🥳😎🤠😮🤖🙈💭🍳🍱 用JSCSS打造你自己的弹幕王国，…
CSS 23 知识点整理
CSS
层叠样式表（Cascading Style Sheets）
行内样式
写在标签的 style 属性中，又称内联样式
<h1 style"color:red"></h1>内部样式
写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 …
CSS中flex属性的的使用以及应用场景有哪些
文章目录一. flex属性?(虚假的) --- 这里主要是回顾1.1 flex-grow1.2 flex-shrink1.3 flex-basis二. flex属性 ! (真正的!!!)三. flex一些常见的值, 以及使用场景3.1 flex:initial 使用场景3.2 flex:0 和 flex:node 适用场景3.3 flex:1 和 flex:auto3.4 总结一. flex属性?(虚…
【CSS】13.页面切图和布局实现
页面切图和布局实现
1. 浮动布局
1.1 页面布局
LOGO 部分
NAV 布局
LEFT - SIDEBAR：左边栏布局
CONTENT：内容布局
RIGHT - SIDEBAR：右边栏布局 1.2 流式布局
块的默认布局叫做流式布局
但流式布局并不能满足对页面的需要，…
如何使用 GPT-4 为博客目录页打造炫酷前端效果
前不久我用 cmd markdown 写了篇文章《项目 TO 的自我修养》，文章的目录如下： 当我把它发布到线上后，目录却只展示出了二级标题： 这哪行！我猜这个可能就是加个配置啥的就能修复。于是马上就问 GPT-4 怎么办？…
BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数
BCSP-玄子前端开发之JavaScriptjQuery入门CH02_JavaScript函数
4.2 函数
4.2.1 什么是函数
类似于Java中的方法，是完成特定任务的代码语句块 特点 使用更简单不用定义属于某个类，直接调用执行 分类 系统函数 自定义函数
4.2.2 常用系统函数
将字…
flex:1是什么意思？
flex:1是什么意思？ flex是flex-grow、flex-shrink、flex-basis三个属性的缩写，推荐使用此简写属性，而不是单独下这三个属性。 flex-grow：定义项目的放大比例：
默认为0，即使存在剩余空间也不会放大…
【CSS3】CSS3 伪元素选择器 ( 伪元素选择器语法简介 | 伪元素选择器权重计算 | 代码示例 )
文章目录 一、CSS3 伪元素选择器二、CSS3 伪元素选择器权重二、代码示例 一、CSS3 伪元素选择器 CSS3 伪元素选择器 :
::before 选择符 : 在 指定的标签元素内部的 前面 插入内容 ;::after 选择符 : 在指定的标签元素内部的 后面 插入内容 ; CSS3 伪元素选择器注意事项 :
con…
【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )
文章目录 一、icommon 字体图标基本使用1、生成 icommon 字体文件2、字体图标基本使用 二、使用伪元素实现 icommon 字体图标显示 一、icommon 字体图标基本使用 字体图标 指的是 将图标做成字体样式 , 在 放图标的地方 使用 文字 即可实现 图标显示 ; 1、生成 icommon 字体文件…
css初入门：网页布局之网格布局-grid
文章目录 网格布局-grid1、设置网格布局2、网格布局介绍3、网格容器grid-template-columns属性grid-template-rows 属性justify-content 属性justify-items属性align-content 属性 4、网格项目grid-column-start、grid-column-start、grid-column属性grid-row-start、grid-row-…
Ae 入门系列之七：文本动画
Ae 提供了多种制作文本动画的方法。既可以在时间轴面板上基于基本属性手动添加关键帧，还可以使用专门的文本动画制作工具，或者直接使用动画预设。有关文本图层的基础知识请参阅：《Ae：文本图层操作基础》提示：文本动画的…
如何使用 CSS 中的字体大小（font size）属性来定义元素在网页中的字体大小
嘿，小伙伴们！你们好呀！今天我要给你们介绍一个超级有用的 CSS 属性——字体大小（font size）！这个属性可以让你轻松地定义元素在网页中的字体大小，让你的网页看起来更加美观、舒适。而且…
鼠标悬停发光按钮，流转边框
提示：css 动画实现，鼠标悬停发光按钮，流转边框。鼠标border可以旋转 前言 提示：以下是本篇文章的代码内容,供大家参考,相互学习
一、html代码
<!DOCTYPE html>
<html><head><meta http-equiv"content…
Vue 3 第十四章：组件五（内置组件-transitiontransition-group）
文章目录 1. transition组件1.1. 基本用法1.2. css过渡class介绍1.3. 过渡效果命名1.3.1. 基本用法 1.4. 配合自定义动画（animation）使用1.5. 自定义过渡 class1.6. <Transition>组件生命周期1.7. transition 常用场景 2. transition-group组件2.1…
BCSP-玄子前端开发之JavaScript+jQuery入门CH06_JavaScript面向对象
BCSP-玄子前端开发之JavaScriptjQuery入门CH06_JavaScript面向对象
4.6 对象
4.6.1 什么是对象
对象是相关属性和方法的集合体
属性方法
String对象
length 属性indexOf()replace() 方法
Array对象
length 属性sort()concat()join() 方法
Date对象
get：获…
Nextjs 处理 css3 前缀兼容
Nextjs 处理 css3 前缀兼容
虽然css3现在浏览器支持率已经很高了, 但有时候需要兼容一些低版本浏览器,需要给css3加前缀,可以借助插件来自动加前缀, postcss-loader就是来给css3加浏览器前缀的,安装依赖：
npm i postcss-loader autoprefixer -Dpostcss-loader&…
分享一个可交互的卡片
五一放假了，寻思着来一个应景的玩意，所以它诞生了。 先上效果图： 再上代码：
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>Title</title><…
二、动画- animation动画
文章目录 1.动画 动画的定义以一个项目来开始了解他2.动画的属性 1.动画
动画的定义
动画： - 动画和过渡类似，都是可以实现一些动态的效果； - 不同的是过渡需要在某个属性发生变化时才会触发； - 动画可以自动触发动态效果&#…
一、动画 - 过渡效果transition
内容目录：
过渡动画；过渡动画的属性； 一、过渡动画 过渡（transition）作用：- 通过过渡可以指定一个属性发生变化时的切换方式- 通过过渡可以创建一些非常好的效果，提升用户的体验现在我们通过一…
【前端特效篇】过渡与动画
变形和动画都是前端开发过程中，用来提高用户体验的一种方式。增加一些动效，可以使页面看起来不那么枯燥无味。
一、变形 transform
transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜…
【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )
文章目录 一、Banner 栏样式及核心要点1、实现效果2、核心要点分析 二、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果 一、Banner 栏样式及核心要点 1、实现效果 在上一篇博客中 , 实现了 搜索栏 , 在本篇博客开始实现 搜索栏 下方的 Banner 栏 ; 2、核心要点分析 Bann…
【移动端网页布局】flex 弹性布局 ④ ( 设置子元素是否换行 | flex-wrap 样式说明 | 代码示例 )
文章目录 一、设置子元素是否换行 : flex-wrap 样式说明1、flex-wrap 样式引入2、flex-wrap 样式取值说明 二、代码示例1、代码示例 : 默认情况下 flex 弹性布局子元素不会自动换行2、代码示例 : 自动换行 一、设置子元素是否换行 : flex-wrap 样式说明 1、flex-wrap 样式引入 …
CSS 3 动画 实现图片动态切换
用到的方法：
动画 Animation keyframes 注意：animation属性要与keyframes规则进行绑定
CSS3 创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用keyframes 创建动画时，需要把它绑定到一个选择器&…
js实现产品页点击小图在大图区显示
企业网站产品图片可能会比较多，需要在产品页面多放几张展示图片，我们可以使用一张大图几张小图的形式排列，并使用js代码实现点击小图显示大图。效果如下所示 html代码部分： <div class"img_bd"> <img src"…
分享一组有意思的按钮设计
先上效果图： 一共16个，每个都有自己不同的样式和效果，可以用在自己的项目中，提升客户体验~ 再上代码：
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8">&l…
【移动端网页布局】flex 弹性布局子项目属性 ② ( align-self 子项目属性 - 设置指定子项目元素侧轴排列方式 | 代码示例 )
文章目录 一、align-self 子项目属性 - 设置指定子项目元素侧轴排列方式二、代码示例 - 设置指定子项目的侧轴排列方式 一、align-self 子项目属性 - 设置指定子项目元素侧轴排列方式 align-self 子项目属性 用于 控制 子项目 在 侧轴 上的排列方式 ;
align-self 子项目属性样…
如何使用 CSS 中的过渡（transition）属性来定义元素在网页中的过渡效果
嗨，大家好！今天我们来聊聊CSS中的过渡（transition）属性。
为什么需要过渡效果？
在开发网页时，我们经常需要让元素在不同状态之间平滑地过渡，比如从隐藏到显示、从大小改变到颜色变化等等。过渡…
css属性选择器、css3结构选择器、伪元素选择器、仿土豆网隐藏遮罩层案例、伪元素清除浮动
属性选择器
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>属性选择器</title><style>…
css3：精灵图sprite的使用
文章目录 精灵图sprite简介原理优缺点实例通过精灵图实现一个导航栏 精灵图sprite
简介
CSS精灵技术（也称CSS Sprites、CSS雪碧），简单来说就是从一张有各种小图标的大图上截取下来一个小图标来使用。 正因为只要加载一张大图片，…
CSS :autofill 如何覆盖浏览器自动填充表单的样式
CSS :autofill 如何覆盖浏览器自动填充表单的样式
:autofill 伪类匹配浏览器自动填充值的 input 元素. 如果用户继续编辑这个元素内容就会停止匹配.
#name:autofill {background-color: red !important;border: 6px solid red;
}
#name:-webkit-autofill {background-color: …
HTML编写渐变色动画登录页面全攻略
想要打造炫酷的登录页面吗？那么必须要学会如何用HTML编写渐变色动画效果。本文将为你详细介绍HTML渐变色动画的原理、示例代码以及调试技巧，让你轻松掌握这项必备技能。
渐变色动画原理
渐变色动画是指在网页中使用渐变色呈现动态效果，通常…
【Vite】对 CSS 处理
Vite 会使用 esbuild 或 PostCSS 来转换 CSS 文件
Vite 解析 CSS 文件的过程： ① 使用 fs 模块读取 .css 文件的内容 ② 创建一个 style 标签，将 .css 文件的内容 copy 到 style 标签内 ③ 将 style 标签插入到 index.html 的 head 标签中 ④ 将该 .css…
重整网站。。。。。。。。。
重整网站
写好回复的人 “ xxxxxxxx”通知栏，并且快速跳转到需要的页面。个人页面，记录自己发送的消息与回复的信息。以css 上传的图片防止被拉伸拉坏。
下拉的选择下拉的分页的好处。
评论功能的那一栏中的一个小的评论，如果手机端的话&a…
32.删除按钮的微交互动画效果
效果 (源码网盘地址在最后) 关注公众号《大迁世界》，查看更多视频教程！
源码
index.html
<!DOCTYPE html>
<html>
<head>
<title>Delete Button Animation</title>
<link rel="stylesheet" type="text/css" href=&q…
十个冷门的HTML属性
十个冷门的HTML属性1. contenteditable 网页内容可编辑2. spellcheck 拼写检查3. download 资源下载4. accept 上传文件5. translate 翻译指定6. poster 视频封面图7. inputmode 键盘选择8. pattern 添加正则表达式9. autocomplete 自动获取完成10. multiple 多种输入来自五一节…
margin为负值怎么解释？
文章目录前言margin四值顺序margin表现margin为负值1.margin-left,margin-right为负值元素本身没有宽度元素本身有宽度2.margin-top为负值3.margin-bottom为负值前言
margin设置为负值往往用于实现双飞翼布局、圣杯布局中。我本人对这些布局实现的原理还有点懵，故整…
原生js实现拖拽特效
原生js实现拖拽特效
效果图和代码如下 <!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content…
部分防御性CSS技能
部分防御性CSS技能
1、长文本的处理方式
.username {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}2、锁定滚动链接
auto - 默认。元素的滚动会传播给祖先元素。contain - 阻止滚动链接。滚动不会传播给祖先，但会显示元素内的原生效果。例如…
css3常用动画属性总结
css3常用动画属性总结
1、text-stroke（仅支持Safari、Chrome）
-webkit-text-stroke: 1px pink;第一个参数是描边的宽度，第二个参数是描边的颜色;通常使用这个属性，会和color:transparent;搭配使用，实现镂空字体的效果…
SVG.js动画——timeline方法与内置控制器
Easing
可以使用runner的ease（）方法更改动画的缓和程度。 所有可用的ease类型包括：
<>: ease in and out : ease out <: ease in-: lineara functionbeziere(x1, y1, x2, y2) // 贝塞尔曲线step(steps, stepPosition)
beziere&am…
htmlCSS-----CSS介绍与样式书写
目录
前言：
1. CSS是什么
2. CSS书写样式 (1)行内样式
(2)内部样式
3.外部样式 4.三者之间的比较 前言： 前面我们学习了HTML的相关标签和框架写法，那我们在了解这些标签用法了之后就要学会怎么去通过相关方法来使得界面美化处理…
htmlCSS-----CSS选择器（下）
目录
前言：
2.高级选择器 （1）子代选择器
（2）伪类选择器
（3）后代选择器
（4）兄弟选择器
相邻兄弟选择器 通用兄弟选择器
（5）并集选择器
&am…
css3——transition动画过渡（transition动画过渡可作用的属性），animation动画铺垫和@keyframes动画关键帧
css3动画优点：开启GPU加速，不会产生动画队列，即频繁点击按钮时，不会有多个动画在等待执行；
1. transition: property duration timing-function delay;
是个复合属性，包括：
transition-prope…
Web大前端时代之：HTML5+CSS3入门系列
Old: 联系源码：GitHub - dunitian/LoTHTML5: LoT家族的一员~HTML5系列 文档下载：https://github.com/dunitian/LoTDotNet/ 思维导图（不断更新）： 图片：http://dnt.dkill.net/DNT/HTML5/index.jpg 源码&#…
玄子Share-自然语言编程(NLP)_快速了解知识向 ChatGPT 提问的最佳模板
玄子Share-自然语言编程(NLP)_快速了解知识向 ChatGPT 提问的最佳模板 以下内容均为 ChatGPT 回答 问题描述精确的重要性
玄子： 我向你提问时，问题描述精确的重要性 ChatGPT 3.5 问题描述的精确性非常重要，因为它可以让回答者更好地理解您的…
#vue#实现浏览器全屏可视化（进入、退出全屏）附源码
需求：
点击按钮，实现全屏，再次点击，退出全屏
效果如下：
（1）原页面： （2）点击全屏按钮后的页面（已进入全屏模式）
&…
这里推荐几个前端动画效果网站
1. AnimistaAnimista 是一个 CSS 动画/转场库和在线工具。它有许多现成的 CSS 动画片段可以直接使用,也可以在线定制动画。 网站地址:Animista - On-Demand CSS Animations Library 2. Animate.cssAnimate.css 是一个免费的 CSS 动画库,里面有 Attention Seekers 、 Bouncing E…
03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素
2.功能元素
1.hgroup
对网页或区段（section）的标题进行组合 2.figure
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对…
【CSS】文字扫光 | 渐变光
码来
可调整角度与颜色值来改变效果
<p class"gf-gx-color">我是帅哥</p>
<style>.gf-gx-color {background: -webkit-linear-gradient(135deg,red,red 25%,red 50%,#fff 55%,red 60%,red 80%,red 95%,red);-webkit-text-fill-color: transparen…
H5动画新利器：Svga和Lottie带你开启互动时代
需求需要在h5页面中做复杂动效，调研了几种常用的方案，跟UI一起尝试。
调研
占用内存对比：
从大到小： 视频＞序列帧＞GIF＞APNG/WEBP＞LOTTIE/SVGA
质量稳定对比：
从差到…
HTML table表格详解
一、表格属性
表格属性 用法 border 代表表格边框厚度 width height 表格宽高 align table tr td 设置水平方向对齐方式 默认值left center right cellspacing 单元格到单元格距离 cellpadding 单元格文字到单元格边框距离 bgcolor 表格背景颜色 table tr td 都可以…
#git# 【四】 如何下载开源项目？
如何下载开源项目到本地
第一步，创建一个仓库（自定义名字，这里为“add”）,复制这个网址
第二步，在本机电脑新建一个文件夹（例如“gitadd”） 第三步，进入这个文件夹，右…
#vue# 【十】如何裁剪上传并更换头像？
#vue# 如何裁剪上传并更换头像？
思路： 这个需求主要分为3个部分 （1）页面呈现部分 （用一个大的div进行包裹，包裹头像、图片、以及最右边的部分，通过flex进行布局（减少float的使用&am…
CSS基础： css3新特性体验一滤镜和过渡
滤镜filter
filter CSS属性性将模糊或者颜色便宜等图形效果应用于元素。
格式：
filter: 函数()函数有很多的如果有兴趣可以看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Functions
演示：
<!DOCTYPE html>
<html l…
CSS3-补充-结构伪类选择器
结构伪类选择器 作用：在HTML中定位元素 优势：减少对于HTML中类的依赖，有利于保持代码整洁 场景：常用于查找某父级选择器中的子元素 选择器： 选择器 …
HTMLCSS Day04 CSS盒模型
文章目录 1.盒子组成盒子属性（ Box properties）marginborderpaddingwidth & height盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子应该由外边距、边框、内边距、内容组成。 - width & height- 边框属性1.什么是边框?2.边…
开发者常用网站及官网
微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 百度地图拾取坐标系统 http://api.map.baidu.com/lbsapi/getpoint/index.html 图片压缩 https://tinypng.com/ 大图片压缩 https://squoosh.app/ 阿里图标库 https://www.iconfont.cn/ iconpark图标…
移动web一 屏幕适配
代码下载
相对单位
em：相对于父元素字体大小
rem：相对于html元素字体大小（优点是通过修改html字体大小使页面元素大小得到整体控制）
<body><div><p></p></div>
</body><style>html…
HTML + CSS （包含移动Web） 笔记
前言
主要还是比较的一些html css；当然也有一些css样式时平时开发中经常用到的，但是我不晓得的，所以还是记录一下吧；给孩子点点关注吧！😭
壹、HTML
一、标签
1.1 标题标签
块级元素
<h1> 好好…
品优购项目学习记录--01公共模块制作
文章目录 一、品优购项目规划1.1 开发工具以及技术栈1.1.1 开发工具1.1.2 技术栈 1.2 品优购项目搭建工作1.2.1 相关文件夹以及文件创建1.2.2 模块化开发1.2.3 网站favicon图标1.2.4 网站TDK三大标签SEO优化 二、品优购首页制作2.1 常用模块类名命名2.2 快捷导航shortcut制作2.…
html实现一个一闪一闪的按钮，CSS实现一个一闪一闪的按钮，Css闪烁点标，css设置按钮层次感，css按钮美化
效果
动态 静态
实现
<!DOCTYPE html>
<html><head><meta charset"UTF-8"><title></title><style>#app {margin: auto 38%;margin-top: 10%;}.lay-btn-box {position: relative;}.lay-btn {background: #59b0fb;bord…
HTMLCSS Day05 CSS浮动布局
文章目录 1.CSS布局- 什么是网页的布局方式?- 标准流(文档流/普通流)排版方式 2.浮动流排版方式- 浮动元素字围现象- 高度塌陷- CSS两列布局以及三列布局两列布局：左边定宽，右边自适应- BFCBFC的布局规则哪些元素会生成BFCBFC的作用三列布局：…
【Qt中QTextBrowser的setHtml()函数支持以下CSS语法】
文章目录 【1】颜色（color）【2】背景色（background-color）【3】字体大小（font-size）【4】字体样式（font-style）【5】字体粗细（font-weight）【6】文本对齐&…
86.el-tree设置第一层和第二层不可勾选但没有子节点的第一层可勾选
其实就是让后端返回数据时多返回一个字段type：
将没有子节点的那层type设置为0，叶子节点type为3，第一层type为1，第二层type为2；然后判断type为1或2时，给节点添加isChangefalse，type为0或3时&am…
路飞学院CSS课程第二天
1.内联式（行内式）
缺点：产生重复性代码，造成文档体积变大，不利于维护，不符合结构与样式分离。
2.嵌入式
虽初步实现结构与样式分离，但代码复用不方便. 优点是不会产生额外的请求。
3.外部式…
CSS3中的display:grid网格布局介绍 flex升级版grid
CSS3中的display:grid网格布局介绍 flex升级版grid grid网格布局，就是将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 <div class"content"><div class"grid">1</div><div cla…
前端换肤，聊一聊主题切换那些事
一些网站通常会提供白天、夜间模式，以及自定义主题等等，这种主题切换也就是本文说的前端换肤。 这次案例用的是白天和夜间模式的切换，在做换肤之前，得先知道一件事情：css的变量定义，对变量定义不熟悉的同学…
html实现一个一闪一闪的按钮，CSS实现一个一闪一闪的按钮，Css闪烁点标，css设置按钮层次感，css按钮美化，CSS按钮动画过渡，CSS按钮添加阴影
效果
动态 静态
实现
底部多加了几个过渡按钮
<!DOCTYPE html>
<html><head><meta charset"UTF-8"><title></title><style>#app {margin: 2% auto;text-align: center;}.lay-btn-box {position: relative;display: …
HTML5和CSS3新增的特性
htmlt5的新特性
HTML5的新增特性主要是针对以前的不足，增加了一些新的表单、新的标签和新的表单特性等。这些新特性都有兼容问题，基本是IE9以上版本的浏览器才支持，如果不考虑兼容问题，可以大量使用这些新特性。
1.1HTML5新增的…
使用java编写中国象棋（内含源代码）
使用java编写中国象棋（内含源代码）
这里使用java编写了一个中国象棋，只带有象棋的一些基本的移动与胜利判断，若执行exe之后界面没有出来，点击悔棋按钮即可，如有其他需要，请联系作者QQ 点击查看…
position:sticky-粘性吸附布局
一、描述 就是在一个滚动的容器里,将一个子元素设置为postion:sticky 在元素显示在可视区域内,显示的效果与position:relative 一致，当元素被滑动出可视区域外是,显示效果与position:fixed一致
二、注意事项 1、父元素需要存在滚动（overflow:auto&…
阿里矢量图标库 - Unicode 方式使用说明（两种用法）
前言
此篇直接绕过 下载 和 vue 项目中的使用，如果对这块内容还不清楚，可先参考 《阿里矢量图标库 - Font class 方式使用说明》
用法一
官网中的用法，直接根据字体编码使用 <span class"iconfont"></span…
css3 如何画太极 和 奥运五环
太极
首先要明白太极的原理，如果手动去画一个太极应该怎么画
如下图是一个不完整的太极但说明了其组成最终效果图：代码如下：
<!DOCTYPE html>
<html><head><meta charset"utf-8"><title></title&…
JS-DOM----事件高级
事件监听 addEventListener()方法 参数1为具体的事件 参数2为事件触发后的函数
语法：
元素.addEventListener(click（具体的事件）,function(e) {// 事件触发后处理的函数代码
})解绑事件
传统方式解绑事件
元素.onclick null;方法监听…
Flex 布局，学会瞬间让你不再掉头发，让布局变的更简单
前言
Flex布局是CSS3中新增加的一种弹性布局模型，它可以用来实现常见的页面布局，例如：垂直居中、水平居中、等高列布局、底部固定、左右布局、上下布局、宽度自适应、响应式布局等。使用Flex布局可以取代float、position和display等传统布局…
阿里矢量图标库 - 如何修改和使用自定义字体名称
前言
此篇直接绕过 下载 和 vue 项目中的使用，如果对这块内容还不清楚，可先参考 《阿里矢量图标库 - Font class 方式使用说明》
1. 三种使用方式 下载后，打开 demo_index.html，在页面最下有对阿里矢量图标库的使用介绍。我偷懒…
css3圆角、边界图片、盒子阴影、背景大小、填充位置、定位位置、背景颜色渐变
1. css3圆角：border-radius
（1）这是个复合属性：比如：border-radius：10px； border-radius：10px 10px 10px 10px;对应的四个角：左上角，右上角，右下…
#vue# 实现计算器功能
需求：用vue实现一个简易的计算器
效果图： 思路：
（1）首先将这个简易的计算器排版出来，主要是用到input、button、 select option（下拉菜单）
这些标签，再进行写相应的c…
input禁止输入的方法
// readonly规定输入字段为只读可复制，
//但是，用户可以使用Tab键切换到该字段，
//可选择,可以接收焦点，还可以选中或拷贝其文本。
<input type"text" value"哈哈哈" readonly"readonly">
//…
#vue# 纯手写“页面数据为空时，显示空状态图片”
需求：在我们的页面，没有显示任何数据时，显示图片以及提示语
效果： 后端接口数据 思路：
（1）只需要在页面里面加入一个div，当页面里面的数据为0时，就用v-show展示出来&am…
#vue#【十四】 element同级类名类名优先级
#Vue# element同级类名&类名优先级
情况1：同级类名（追加类名） 在element的使用过程中， 我们经常会遇到下面这种类型的同级类名
class“el-button el-button–default” 代表这两个类名是同级的， el-button–defa…
#vue# 【十三】 组件传值之父传子（超级通俗简单的思路！）
#vue# 组件传值之父传子
在开发中，为了更高效完成页面排版， 我们通常会使用父子组件来处理我们的排版，也相应地需要在父子组件里面进行赋值 下面就是父传子的步骤
在子组件页面：
（1）写入prop：…
#vue# 【十二】 前端排版时的类名共用关系
#vue# 前端排版时的类名共用关系
示例，在一个页面里面， 会有很多板块都有相同类型的按钮， 它们的高度宽度、边框颜色都是相同的， 这个时候， 我们只需要写出一个可以复用的类名class, 只要加上这个类名，我们…
#前端开发避坑技巧003# 【三】（ertical-align + inline-block、路由跳转问题、html各种分割线、鼠标点击事件、透明度、密码框表单、绑定输入框输入类型、下划线）
#前端开发避坑技巧
ertical-align inline-block、透明度、密码框表单、绑定输入框的输入类型、下划线、css继承性问题、伪类选择器、去掉边框默认样式、悬浮阴影
（1）如何让行内元素居中，一般不建议用定位以及浮动， 因为会造成元…
html5+css3 学习笔记二（菜鸡详细入门笔记）
html5css3 学习笔记二
一、2D转换 2D 转换是改变块级标签在二维平面上的位置和形状 移动： translate 旋转： rotate 缩放： scale
1.translate
改变块级标签的位置
语法：
transform: translate(x, y) transform: translate…
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
文章目录 什么是弹性布局？弹性布局的特点？容器的属性justify-contentalign-itemsflex-directionflex-wrapflex-flowalign-contentorder属性flex-grow属性flex-shrink属性flex-basis属性flex属性align-self属性 什么是弹性布局？
弹性布局&…
少了五毛钱不卖的酷炫火焰特效！3D粒子哦！
先展示一下最终效果，然后再逼逼最终效果后边图片挺多的，使用流量看文章的，祝好运。你听说过5毛钱特效吗? 我是个电视迷，在读大学的时候，经常通宵刷剧。往往有很多引人入胜的情节，搭配着粗制滥造的特效。所…
css样式、渐变、响应式布局笔记
线性 h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} 字母转换 p.uppercase {text-transform:uppercase;} 全部转换为大写 p.lowercase {text-transform:lowercase;} 全部转换为小写 p.capitalize {text-transform:capit…
js实现左右来回运动效果实例
实现js基础运动那么一定要了解css的定位方式position分为固定定位fixed 、relative 、absolute fixed 固定元素在页面上 relative 绝对定位 不会脱标 absolute 会脱标，不占位置 实现div元素从左边走到右边，就是根据目标值与实际div的左边距进行逻辑运算&…
js+css+html模仿评论接收显示模块
介绍：当在文本域写入文字，提交后直接显示在li标签中，这就是用到js语言，主要用于完成动画，所谓的动画就是通过获取元素，改变元素的某一属性，通过定时器的调用，从而形成一系列的动作&a…
Js实现Flash播放效果[带源码]
关于做这样的功能，需要掌握html基本元素、css布局，js知识。当你看到关于轮播图这样的效果展示，有点不敢相信，因为自己的真的不会，一方面真的不会，所以就是不会，详细一点的介绍，可是又…
前端Vue仿滴滴打车百度地图定位查找附近出租车或门店信息(更新版)
前端vue仿滴滴打车百度地图定位查找附近出租车或门店信息, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id12982
效果图如下: #
#### 使用方法
使用方法
<!-- 官方文档： https://dafrok.github.io/vue-baidu-map/#/zh/start/b…
太阳系各大行星运行轨迹
利用CSS构造太阳系各大行星运行轨迹动画图网页
废话少说，直接上代码，然后再详细介绍构造过程。
代码
<!DOCTYPE html>
<html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8">
…
CSS3简单动画效果与使用列表制作菜单
声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。
CSS3简单动画
在CSS3中能够实现一些简单的动画效果，所以接下来介绍的是几种…
JavaEE——CSS3选择器
声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。
CSS3选择器
选择器中的属性： 之前介绍过[ ]里可以定义属性或属性值&#x…
使用CSS3旋转DIV
使用CSS3旋转DIV 参加某公司的前端工程师笔试，遇到以下问题。 请完成以下填空，使得id为loading的div每1秒转1圈并无限循环。
<html>
<head>
<style>#loading{width:100px;height:100px;position:absolute;animation:circling__linear…
html_css模拟端午赛龙舟运动
文章目录 ⭐前言💖 样式布局💖 添加龙舟💖 添加css_animation运动 ⭐结束 ⭐前言
大家好，我是yma16，本期给大家分享css实现赛龙舟运动。
💖 样式布局
风格：卡通 首先采用一张包括水元素的照片…
echart标题颜色修改
title: {text: "近7日出入库统计",//1.标题居中//left的值为left,center,rightleft: "center",//默认为10//2.主副标题之间的间距itemGap: 20,//3.标题文本样式textStyle: {// 文字颜色color: "#FFF",// 字体大小fontSize: 12,// 字体粗细:norma…
HTML练习之路15(播放器效果)
本次要完成如图所示的拼图效果： 通过不同线性渐变的数量可以确定最少需要三个容器，由于本题没有任何素材，所以白色圆形和黑色三角形都需要自制，所以我们的框架可以是五个盒子依次包裹，并且在制定盒子时依次定义类名&am…
HTML练习之路14(制作拼图效果)
本次要完成如图所示的拼图效果： 根据对拼图结构的不同理解，本题将演示两种方法实现如图效果：
方法 一：我们将拼图结构看作一个大的盒子包裹着上下各一个小盒子：
<div class"all"><div class"…
Javaweb-CSS常用选择器
1.标签名选择器 标签名选择器的格式是： 标签名{ 属性：值; } 标签名选择器，可以决定哪些标签被动的使用这个样式。 举个栗子：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 并且修…
【CSS】自定义属性
:root {--line-border-fill: #3498db;--line-border-empty: #383838;
}这段代码是在 CSS 中定义了两个自定义属性（Custom Properties），也被称为 CSS 变量，CSS中直接使用变量名代表属性值。
:root 选择器表示文档的根元素…
【CSS】transform属性
transform 是 CSS 中的一个属性，用于对元素进行变换、旋转、缩放、倾斜等操作，可以改变元素的外观和布局，而不影响其它元素的布局。
transform 属性接受一个或多个变换函数作为值，多个函数之间可以通过空格分隔，每个函…
css3 鼠标滑过图片时文字旋转动画
特效描述：鼠标滑过图片的时候，以左上角为原点，顺时针旋转90度出现黑色遮罩层，之后文字一行行以右上角为原点旋转180度出现，纯css3实现，拷贝下面代码保存为html文件就可以查看效果。（所用到的图片…
js 获取伪类和css变量
获取css变量
getComputedStyle(document.documentElement).getPropertyValue(--primary-color); 设置css变量
document.body.setProperty(--primary-color,#fff);获取伪类元素
var dom getComputedStyle(document.body, ::before);
最近超火的公司前端面试题
前端面试题： 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现 div{ position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin-left:-100px; margin-top: -100px; background-color: turquoise; } 写一个左中右布局占满…
CSS 实战: Loading 动画
CSS 实战: Loading 动画 文章目录CSS 实战: Loading 动画正文1. html 结构2. div 实现样式3. svg 实现样式4. 实现效果其他资源参考连接完整代码示例正文
1. html 结构
这里一共实现两种 loading 图样，一个使用 <div> 标签，一个则是 svg 的 <…
内外边距及div居中、圆角边框及阴影 2022-2-5
一、内外边距及div居中
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>外边距的妙用</title><!--外边距的妙用：居中元素--><style>/*顺时针旋转margin 0margin 0 1pxm…
结构伪类选择器、属性选择器、css的作用及字体样式 2022-1-24
一、结构伪类选择器
伪类：idclass结合
练习1.1ul的第一个元素，ul的最后一个元素
<style>/*ul的第一个元素*/ul li:first-child{background: #c907ff;}/*ul的最后一个元素*/ul li:last-child{background: brown;}</style>总体代码
<!D…
新的宽高比(aspect-ratio)CSS属性
在响应式网页设计中，保持一致的宽高比，即所谓的长宽比，对于防止布局的累积偏移至关重要。现在，有了Chromium 88、Firefox 87和Safari技术预览版118中推出的新宽高比属性，有了更直接的方法来实现这一目标。
长宽比
长…
CSS总结div中的内容垂直居中的四种方法
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p { height:30px; line-height:30px; width:100px; overflow:hidden; } …
JS 动画：给网页下个雪吧
JS 动画：给网页下个雪吧 文章目录JS 动画：给网页下个雪吧简介参考完整示例代码正文1. 一朵雪花2. 很多雪花3. 让雪花动起来4. 快速划过的雪花5. 雪花摇曳6. 最终效果结语简介
前些日子面试的时候被问到 raf 的问题，写了篇 JS 动画基础: 细说…
前端web入门-CSS-day07
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录
定位
相对定位
绝对定位
定位居中
固定定位
堆叠层级 z-index
定位-总结
高级技巧
CSS 精灵
字…
CSS3——变形功能
transform基本写法旋转缩放倾斜移动可以多个效果一起添加改变形的基点什么是基点写法 transform
基本写法：
-ms-transform: scale(1.5,1.5);/*IE9*/
-moz-transfrom:scale(1.5,1.5);/*Firefox*/
-webkit-transform: scale(1.5,1.5); /*Safari 和 Chrome*/
-o-tr…
CSS3——文本样式
文字阴影与自动换行text-shadow文字阴影多个阴影 word-breakword-wrap 字体服务器字体font-family可以自定义默认字体根据字体样式选择对应字体 本地字体自带字体font-variantfont-weightfont-stretchfont-size 文字阴影与自动换行
text-shadow
文字阴影
后面可以跟四个参…
css基础知识十一：CSS3新增了哪些新特性？
一、是什么
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观
css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3 里都是可以使用…
【CSS】css的background属性用法详解，background常用缩写形式
background是一个简写属性，可以在一个声明中设置背景颜色、背景位置、背景大小、背景平铺方式、背景图片等样式 语法background: 颜色 图片 位置/大小 平铺方式 bg-origin 绘制区域 bg-attachment;。 background 简写属性在一个声明中设置所有的背景属性：…
【CSS】网页如何快速适应大屏显示，快速自适应，旧版网站改造
记录工作中的一次无聊需求，原来的老项目没有自适应，突然要整个改成适应7680*2160px大屏幕 解决办法
使用CSS媒体查询media与样式属性zoom:3;结合，放大整个屏幕
media:不同分辨率修改样式 zoom属性设置或检索对象的缩放比例，通俗…
移动端1px问题解决方案
产生的原因： 写代码时一般使用设备独立像素来对页面布局。而在设备像素比大于1的屏幕上，我们写的1px实际上是被多个物理像素渲染，这就会出现1px在有些屏幕上看起来很粗的现象： 解决方法： 1.小数值px 设备像素比deviceP…
25 个新鲜和非常有用的 jQuery 插件
虽然我们经常发布这样的内容，但是里面列举的插件并不完全相同，能不能找到一些你感兴趣的插件才是最重要的：） 创建漂亮的密码强度指示器 TypeButter Growing Thumbnails Portfolio blur.js Timeline Portfolio Websanova Paint Mak…
【CSS】css快速更改某个字体图标，使用content插入字符
遇到一个小问题：使用的是组件库，但是这个组件没有提供更改图标的接口，需要更改这个特定的图标，但是最好不更改dom 解决办法
由于系统已经使用了这个组件库，那么就有了他的图标内容，可以先到组件库官网找到…
css基础知识九：说说flexbox（弹性盒布局模型）,以及适用场景？
一、是什么
Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局
采用Flex布局的元素，称为flex容器container
它的所有子元素自动成为容器成员，称为flex项目item 容器中默认存在两条轴…
CSS基础：浅聊动画
动画是CSS中最令人兴奋的颠覆性特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果，相对于过渡，动画可以实现更多的变化，更多的控制，连续自动播放等效果。
需要两个步骤&…
学CSS选择器，看这篇文章就够了（近2万字详解）
📜个人简介 ⭐️个人主页：微风洋洋🙋♂️ 🍑博客领域：编程基础💡,后端💡,大数据,信息安全 🍅写作风格：干货,干货,还是tmd的干货 🌸精选专栏：【J…
CSS与CSS3美化页面
CSS与CSS3美化页面
一、简介
CSS是（Cascading Style Sheets），中文名叫层叠样式表。样式内定义的是如何显示HTML元素，目的是美化HTML页面样式通常储存在样式表中（.css文件），实现了样式和内容分…
CSS八种让人眼前一亮的HOVER效果
一.发送效果
HTML
<div id"send-btn"><button>// 这里是一个svg的占位Send</button>
</div>CSS
#send-btn{display: flex;align-items: center;justify-content: center;height: 100vh;
}button {background: #5f55af;border: 0;border-r…
CSS3-补充-伪元素
伪元素 作用：在网页中创建非主体内容，开发中常用CSS创建标签，比如装饰性的不重要的小图 区别： 1 元素：HTML 设置的标签 2 伪元素：由 CSS 模拟出的标签效果 …
uni-app轮播图实现之swiper
首先在data中定义一个图片数据的对象数组
data() {return {rotation: [{id: 1,url: https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f03300/cr/s/q.jpg},{id: 2,url: https://img12.360buyimg.com/pop/s1180x…
IE浏览器不能访问其他浏览器能正常访问
IE浏览器不能访问 而其他浏览器能正常访问
解决方法 -重置
1 win x 键，然后点击 windows powerShell （以管理员方式运行） 2 输入下面2条命令，记得回车 Netsh winsock resetnetsh advfirewall reset如下图所示： 运行…
【CSS3系列】第七章 · 过渡和动画
写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正࿰…
CSS進階：Media Query 媒體查詢
CSS 進階：Media Query 媒體查詢 文章目錄CSS 進階：Media Query 媒體查詢簡介參考正文Definition 使用語法Media Type 媒體類型Media Feature 媒體特徵視窗規格(Viewport/Page dimension)Sample顯示品質(Display Quality)色彩(Color)交互能力(Interaction…
CSS基礎：Selector選擇器
CSS 基礎：Selector 選擇器 文章目錄CSS 基礎：Selector 選擇器簡介參考正文Overview 概述基礎選擇器(Basic Selectors)標籤選擇器(Type/Tag Selectors)：tagNameSample類選擇器(Class Selectors)：.classNameSampleID 選擇器(ID Sele…
CSS進階：Grid格線佈局
CSS 進階：Grid 格線佈局 文章目錄CSS 進階：Grid 格線佈局簡介參考正文Grid Element 格線佈局元素Container 外容器1. display2. grid-template-rows / grid-template-columnsSamplerepeat & fr3. grid-template-areasSampleSample-empty4. grid-temp…
前端JavaScript入门-day03
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录
1、循环-for
1. for 循环-基本使用
1. for循环语法
2. 退出循环
2. for 循环嵌套
2、数组
1 数组是…
CSS3 animation-timing-function 属性及详解
linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。steps(int,start|end) 指定了时间函数中的间隔数量（步长ÿ…
css中易掉坑的知识点总结系列（一）
今天在写css代码的时候，忽然发现很多看起来挺简单的，但是却忽略了它们的小知识点，小细节，所以就准备把自己遇到的易忘和易忽略的css知识点整理到一起，方便自己以后查阅，也希望同时能够帮助到您(主要是针对我…
css3盒模型、弹性盒模型、怪异盒模型
一、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，它包括：边距，边框，填充，和实际内容。
盒模…
CSS3透明背景+渐变样式
直接上效果： 核心代码如下： .map-interview {background-image:-webkit-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 5%, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.6) 90%, rgba(0,0,0,0.4) 95%, rgba(0,0,0,0) 100%);background-image: li…
使用ant design vue组件（保持默认参数的存在，传更多自己需要的参数）
先允许我唠叨下，应该很多人都会，那我也记录一下。理解一下。 使用组件有一个参数的时候直接使用$event
<a-date-picker :default-value"moment(item.createTime)" change"createTimeChange($event,你需要传的参数)"/>createT…
vue中动态添加类名，点击哪个，哪个背景颜色变化
今天遇到一个需求就是，就是当点击一个按钮的让按钮的颜色不一样，因为这个是循环出来的,所以说点击的时候点哪个就把哪个的id或者下标（index）传过去就好了。就需要动态添加类名。
<a-row><a-col :span"4" v-fo…
CSS3自定义滚动条的样式
webkit浏览器是如何自定义滚动条的呢？ 滚动条demo(只在谷歌浏览器中有效)： demo1：演示一 demo2:演示二
滚动条的组成：
::-webkit-scrollbar：滚动条整体部分::-webkit-scrollbar-thumb ：滚动条里面的小…
小程序怎么用css做出与文字同行靠右的引导箭头？
引言
不知道我这样没文采、含糊其词的标题能帮助多少人，因为我当时寻找答案的时候就是这样搜的，没搜到什么有用的信息，所以我以我想的问题做个解答，希望能帮到需要解决这个问题的小白~（小声bb…我是真正的小白&#x…
模拟抖音推荐算法检测视频原创度
模拟抖音推荐算法检测视频原创度，如果我们的是通过剪辑他人的视频来制作的，那么就会存在被检测是搬运类型的非原创作品，而仅仅通过修改视频md5是没有效果的，那我们如何检测一个剪辑后的视频的原创度呢？
首先ÿ…
css：设置滚动条的样式
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{width:16px;height:16px;background-color:#F5F5F5;
}
/*定义滚动条轨道内阴影圆角*/
::-webkit-scrollbar-track
{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);border-radius:10px;backgro…
css text文本超出隐藏显示省略号、超出隐藏、省略号
css text文本超出隐藏显示省略号 overflow: hidden;text-overflow: ellipsis;//溢出用省略号显示display: -webkit-box;//将对象作为弹性伸缩盒子模型显示。-webkit-box-orient: vertical;-webkit-line-clamp: 2;//显示行数
页面整体等比例缩小,页面缩小,页面放大,页面缩放
1.当我们需要对一个页面进行等比例的缩小活着放大时,修改px显然不能达到我们的要求,那么我们可以这样做
transform-origin: 0px 0px;//在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变…
vue2使用css绘制信号值
资源下载 <!--* Description:信号强度* Author:DEMON3443002624QQ.COM* Date:2022-1-19 09:45:29* LastEditors:DEMON3443002624QQ.COM* LastEditTime:2022-1-20 09:11:42
-->
<template><divclass"signal-strength":style"{ transform: scale( …
用一个盒子包裹起来，就不是同一个BFC，不会出现塌陷问题
BFC 块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局 当两个块元素出现在一个父元素中，如果给子元素添加外边距就会产生边距塌陷，解决这种问题的办法就是给另一个子元素在套一个盒子。
外边距塌陷，以最大的外边距为主&#x…
html基础背景、边框样式、内外边框、盒子尺寸大小计算
css背景 background-color 背景顔色 background-image 背景图片 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 <!DOCTYPE html…
CSS3颜色渐变模式总结
CSS3颜色渐变模式总结 1.线性渐变：linear-gradient 语法：<linear-gradient> linear-gradient([ [ <angle> | to <side-or-corner] ,]? <color-start>[, <color-end>]) <side-or-corner> [left | right] || [top | b…
CSS3绘制8种超炫的加载动画
CSS3绘制8种超炫的加载动画 逛前端开发网站的时候，偶尔发现一组非常炫酷的CSS3加载动画，遂迫不及待的做个Demo保存下来。 这些加载动画用到了CSS3的旋转transform属性，颜色透明度设置和伪元素操作等CSS技术。奇妙的组合，产生了意想…
html 中如果更改 图片地址
html 中如果更改 图片地址
1.问题 一段html代码,如下
<a href"兔兔_one.jpg" target"_balnk"><img src"兔兔_one.jpg" width"300"/></a> <br/>我想要替换<img src"兔兔_one.jpg" width"3…
PC端轮播图与移动端轮播图的区别总结
首先，在图片的克隆问题上，PC端只需在原有最后一张图片后添加p1的克隆，而移动端因为触屏滚动的需求 在p1的前面需要再添加原有最后一张图片的克隆
其次，PC端在实现滚动动画效果时采用的方法是在 js 使用 animate 动画函数…
原生Javascript和jQuery获取元素归纳 document.getElementById,document.querySelector(““) 子节点 父节点 兄弟节点
1. 原生JS获取元素
1.1 通过标签、类名、属性获取 // 1. 获取类名是box的div的集合var box document.getElementsByClassName(box);// 1.1 返回的是伪数组，具有length属性，可以用for循环进行遍历；但是没有pop和push方法for (var i 0; i &l…
【font-size】【font-weight】【font-weight】【text-align】【overflow:hidden】CSS文字属性 文字样式 字体样式 常用不常用集合
1. 常用属性
属性作用属性值font-faimily字体一般先写英文，再写中文font-size文字大小 16px 1.25em，表示1.25*父元素字体大小（很少用） font-weight文字粗细 700,400 bold,normal, color文字颜色 white;英文 #000;十六进制 rgb(2…
CSS3中的transform详解
【原文地址：http://blog.csdn.net/wang1989sg/article/details/7773661】 Transform，顾名思义，是“变形”之意，它是CSS3中重要的动画属性之一，包含“旋转rotate”、“扭曲skew”、“缩放scale”、“移动translate”以及…
探秘Vue单文件组件中style中的scoped作用原理
简介 作为一名前端开发工程师，特别是用Vue进行开发的工程师而言相信对scoped都特别的熟悉，但是大家有没有想过、或者思考过scoped的原理到底是什么，我们为什么要给单文件组件的style标签加上scoped，这篇文章就和大家一起来探讨一下…
原生js轮播图 transform方法！
小白的我又来啦 ！！！
下面呢 给大家 整一下 轮播图 不考虑兼容性的情况下 用transform操作的方法 ！
不多说直接上代码！
首先是 我们的 结构 基本上都是大同小异 ！！！ <div…
CSS基础 position
CSS基础 position布局positionstaticrelative（相对布局）absolute（绝对布局）fixed（固定布局）sticky（粘性布局）区别static 和 relative的区别relative 和 absolute 的区别absolute 和f…
CSS3中的transition属性详解
Transition属性主要是用来对某个CSS属性的变化过程进行控制，官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.“。理解为”在某个时间段内，平滑地改变某个CSS属性。“。 Transition又…
第1章 Java入门基础及环境搭建【阿里云15年java老鸟整理java笔记，包含思维导图】
Java 是当今世界最重要、使用最广泛的计算机语言之一，在多年之前它就已经拥有这一荣誉。全球每天有超过百万的开发者在用 Java 进行各式各样程序的开发。Java 因为其方便学习、使用简单等特点，受到了越来越多人的青睐。如果你也想成为 Java 开发阵营的一…
为您服务：阿里云15年java老鸟整理java笔记。
大家好。看下面Java思维导图
Java学习路线
Java 是一门面向对象编程语言，不仅吸收了 C 语言的各种优点，还摒弃了 C 里难以理解的多继承、指针等概念。Java 不但可以用来开发网站后台、PC 客户端和 Android APP，还在数据分析、网络爬虫、云…
23-vue.js单聊和群聊以及命名空间,带你和我一起web前端工程师进阶，找到好的师傅，找到好的前端学习路线，改变自己的生活品质，why not?
第23节-单聊和群聊以及命名空间 2021【前端VUE框架】最新/最全/最细实战课程，VUE56节分享，免费拿不谢！下面的是汇总 前端的课程分享给大家，学习进阶，找到好的路子，涨工资的事自然而然。
学习目标ÿ…
flex布局左边宽度固定，右边宽度动态扩展问题
我们希望在一个固定宽度的容器中，分左右两边，左边宽度固定大小，右边占满，使用flex布局时，如下： 对应代码如下：
<!DOCTYPE html>
<html lang"en">
<head><meta…
CSS3——布局样式
多栏布局常用属性column-countcolumn-widthcolumn-gapcolumn-rule 案例 盒布局与分栏布局的区别写法 弹性盒布局盒布局的进一步应用自适应改变盒模型的顺序改变盒模型的排列方式填充空白案例 多栏布局
常用属性
column-count:
栏目数量，指定栏目的数量
column-…
用CSS添加鼠标样式
//小手样式
cursor:pointer; cursor其他取值auto ：标准光标
default ：标准箭头
pointer, hand ：手形光标
crosshair ：十字标
wait ：等待光标
text …
CSS 7种居中效果实现原理与案例
目录 1.标准盒子居中
2.定位-绝对定位实现居中
3.表格方式实现垂直居中
4.弹性盒子：实现垂直居中
5.通过行高line-height实现垂直居中
6.变形定位实现居中
7.网格实现垂直居中 1.标准盒子居中 不需要设置display，只能实现水平居中
效果࿱…
每个开发人员都需要掌握的10 个基本 SQL 命令
SQL 是一种非常常见但功能强大的工具，它可以帮助从任何数据库中提取、转换和加载数据。数据查询的本质在于SQL。随着公司和组织发现自己处理的数据量迅速增加，开发人员越来越需要有效地使用数据库来处理这些数据。所以想要暗恋数据领域，SQL是…
css布局中的BFC
1. 双边距（边距重叠）
1.什么是边距重叠？ 2.什么情况下会发生边距重叠？ 3.如何解决边距重叠？
边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠&#…
sass scss的详解
Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。
特性概览
CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预…
CSS3 自定义动画（animation）
除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外，CSS3 还有一种自由度更大的自定义动画，开发者甚至可以使用变形（transformation）和转换（transition）制作自定义动画&…
CSS中水平垂直居中的几种常用方法
效果： <div class"outer"><div class"inner">oooo.oooo</div></div> 1、flex弹性布局 外层容器设置flex弹性布局，设置主轴和交叉轴center <style>.outer{width: 200px;height: 200px;background-colo…
19，vue-cli原理，请求，真实的模块开发，一步一不到实战脚手架开发。
2021【前端VUE框架】最新/最全/最细实战课程，真实的模块开发，一步一不到实战脚手架开发学习目标：
提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习 重磅来袭：3个月掌握 vue 入门知识到实…
第十五天：初步完成了18张页面的静态网站
总结：
经过了好几天的项目实战，可谓是收获满满，从一开始的传统网页布局到html5新式标签布局，从浮动布局到flex布局，使我对整个网页布局有了更加清晰的认识，也能在短短时间内写出一个像样的页面了ÿ…
原生JavaScript练习题 12-鼠标导航器
效果如下： 完整代码：
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" c…
原生JavaScript练习题 11-移动的小盒子
效果如下： 完整代码：
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" c…
less环境搭建及VScode使用less（详细教程）
less安装步骤
1、下载安装node.js 2、下载安装less 3、打开VScode软件安装插件 Easy LESS 4、编辑保存.less文件，会在对应的目录下生成对应的.css文件
下载安装node.js
node.下载地址：https://nodejs.org/en/ 首先打开node.js网址，点击下载…
原生JavaScript练习题 07-敏感词过滤
效果如下： 想要过滤掉的敏感词可以自己去设置。
完整代码：
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">…
CSS3——动画功能
transition补间动画参数说明案例 Animations帧动画使用步骤一使用步骤二案例 transition（补间动画）
参数说明：
第一个参数：执行变换的属性 none：所有属性 all：所有属性 某个属性 ：固定某个…
CSS3的nth-child选择器的使用
在w3school网站上,对于 nth-child 的解释十分含糊,以至于我一段时间认为,这个东西实在没什么大用.可是,当我研究透了之后,我猛然间发现,这家伙实在是太厉害了啊!!当我们把 nth-child 这个选择器用到极致的时候,可以说,我们在处理任何列表的时候,是不需要给这些列加上class的.
有…
Html p标签文本缩进
<style type"text/css">p {text-indent: 2em;/*em是相对单位，2em即现在一个字大小的两倍*/} </style>
【前端样式】当 BEM 遇见 CSS Module
前言
对于前端开发者来说，css相关问题是无论如何也绕不过去的。因为样式代码是就近生效原则，即同样的选择器定义的样式，后定义的样式代码会覆盖前面定义的样式代码。
class 做为 css 中最常用的选择器，刚入门的前端开发者会很纠…
用HTML写一段制作美观表格代码
这是一段制作美观表格的 HTML 代码： <table style"border: 1px solid black; border-collapse: collapse;"><tr><th style"border: 1px solid black; padding: 10px;">姓名</th><th style"border: 1px solid b…
SVG/CSS路径动画
<template><div class"title">路径动画</div><div class"icon-box2"><div>CSS 路径动画</div><!-- 这个线是用来显示路径的，并没按照这个线进行运动 --><svg width"200" height"2…
JS和CSS实现的原生轮播图
文章目录🍗 前言🍖 JSCSS实现滑动轮播图🍔 纯CSS实现滑动轮播图🍿 JSCSS实现浅入浅出轮播图🥪 JSCSS实现滑动带遮罩轮播图🍗 前言
图片来自百度图片，可以更换成你自己喜欢的图片，宽…
CSS3_多媒体查询
文章目录多媒体查询浏览器兼容多媒体查询语法多媒体查询简单实例多媒体类型webkit-overflow-scrolling多媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情&a…
CSS_Column多列布局
文章目录CSS3 多列浏览器兼容多列属性column-countcolumn-gapcolumn-rulecolumn-spancolumn-widthBGU解决方法CSS3 多列
CSS3 可以将文本内容设计成像报纸一样的多列布局
浏览器兼容 多列属性
column-count
column-count：指定了需要分割的列数
div {-webkit-co…
CSS基础——CSS 基础（上）
目录 CSS语法
开发工具
块元素和内联元素
选择器
元素选择器
id选择器
类选择器
选择器分组(并集选择器）
交集选择器（复合选择器）
通配选择器
元素间关系
后代元素选择器
子元素选择器 CSS语法
css 注释：作用和HTML注…
css3字体@font-face
字体
对该文章的理解：文章转自http://www.w3cplus.com/content/css3-font-face
1、font-face的语法规则： font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: …
记录-有意思的气泡 Loading 效果
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 今日，群友提问，如何实现这么一个 Loading 效果： 这个确实有点意思，但是这是 CSS 能够完成的？ 没错，这个效果中的核心气泡效果&am…
CSS基础：Less的使用以及注意项
前言
CSS在开发的时候会发现一件事，就是无法使用方法以及加入逻辑运算，这个时候就有大神发明了一门兼容CSS的扩展语言Less（Leaner Style Sheet）。
简单的说就是安装less的要求，可以使用一些编程语言中的变量…
css基础及复合选择器
css选择器 css选择器是用来指定某些元素来执行一些特殊的操作，可以同时控制多种不同元素。从而达到页面更好的视觉效果 首先介绍四个基础css选择器，大致有以下几种： 通配符选择器：
/* 通配符选择器 *//* 通配符选择器针对整个界…
JavaScript动画书籍推荐(10本)
1. 《JavaScript DOM编程艺术》 这是一本非常经典的JavaScript动画书籍，读者可以学习如何使用JavaScript和DOM来创建交互式动画效果。书中有大量的实例和案例，让读者可以快速上手实践。
2. 《JavaScript高级程序设计》 这是一本非常全面的JavaScript入门…
h5新增存储localstorge
localStorage.setItem(username, 张三)localStorage.setItem(password, 123)console.log(localStorage.getItem(username))localStorage.removeItem(username)console.log(localStorage.getItem(username))加入购物车<style>* {margin: 0;padding: 0;}body {background-c…
面试题 说一说px em rem的区别
px
px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。…
QTablewidget样式滚动条表头Qss样式设置
如下图所示设置Qtablewidget样式，表头颜色设置，选中列背景色设置等 QTableWidget
{background: #303033;
}
QTableWidget::item
{color:rgba(255,255,255,150);background: #303033;text-align:center;
}
QTableWidget::item:hover
{color:#FFFFFF;backg…
前端面试题整理（vue/js/css）
什么是盒子模型
把所有的网页元素都看成一个盒子，它具有content，padding，border，margin 四个属性，这就是盒子模型
盒子模型有两种形式：标准盒子模型，怪异盒子模型
标准模式，总宽度…
58个UI UX 小知识提升你的设计能力 | Mixlab干货
很多刚入行的设计师或者是想学习设计的程序员朋友都问过我：如何提高自己的设计能力？关于此问题，我特地找时间分别咨询了shadow、熊叔、Mr.thinker等社区的资深设计师，得到了不少有价值的反馈，我提炼了他们的共同点&…
2021-09-06------5.4 CSS3 过渡与动画（transition属性 @keyframs规则 animation属性）
5.4 CSS3 过渡与动画（transition属性 keyframs规则 animation属性）
过渡效果 ：transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。 动画效果：让一个元素通过animat…
5.2 CSS3文字与文本
文本阴影text-shadow属性
text-shadow属性的参数有：水平偏移（正数向右偏移，负数相反方向）、垂直偏移（正数向下偏移，负数相反方向）、阴影大小（阴影的模糊范围，可以省略&a…
CSS基础： rem和媒体查询
rem单位
em 单位
首先说一个单位：em
em 值的大小是动态的。当定义或继承font-size属性时，1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em 16…
伸缩式动态搜索框 | CSDN创作打卡
1. 伸缩式动态搜索框页面效果 2. 设计思路 页面效果：默认状态下，为 40px 的黑色圆形图标，中心是红色的 search 搜索图标。当鼠标移入时，触发动画效果，动画过渡为 0.5s，搜索框展开至 200px，searc…
CSS选择器、属性继承、优先级 以及CSS3新增伪类、新特性
CSS 选择符：
1) id选择器(# myid)
2) 类选择器(.myclassname)
3) 标签选择器(div, h1, p)
4) 相邻选择器(h1 p)
5) 子选择器(ul > li)
6) 后代选择器(li a)
7) 通配符选择器( * )
8) 属性选择器(a[rel "…
CSS基础：flex布局子元素被撑大（文本省略号）
文本撑大子盒子
在使用flex布局中，会有下面这样一个问题。
这种问题不但会让盒子撑大，而且还有自己在再使用超过文本长度使用省略号的时候，也会再拉动窗口的时候，变的没有效果。
如下：
<!DOCTYPE html>
<…
css3 圆角 border-radius
一个属性值： 元素四个方向的圆角大小 两个属性值： 第一个值表示左上角和右下角 第二个值表示右上角和左下角 三个属性值： 第一个值表示左上角 第二个值表示右上角和左下角（对角ÿ…
Animate.css 动画效果框架
1. 从官网下载 https://raw.github.com/daneden/animate.css/master/animate.css 2. 通过npm安装 $ npm install animate.css 3. 使用在线cdn https://unpkg.com/animate.css3.5.2/animate.min.css
想要使用哪种动画，只需要把通用类animat…
css中的background属性
文章目录 一：background-repeat二：background-position三：background缩写方式三：background-size四：background-origin五：background-clip 在日常前端开发中，经常需要进行背景或背景图的处理。但…
前端实现超大量数据的list渲染-----虚拟列表 virtualList功能实现
原理图 <!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-width, i…
三种 Loading 制作方案
作者：JS_Even_JS来源：https://segmentfault.com/a/1190000038692080一、简介Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基…
postiton定位属性值
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed和sticky，这里sticky是CSS3新发布的一个属性（吸顶效果）。 一、position: static
static(没有定位)是position的默认值，元素…
5.1 CSS3圆角边框与阴影
CSS3
5.1圆角边框与阴影 圆角边框border-radius
四个子属性 每个属性的取值是这样的：如果是两个值的情况，就表示一个是水平方向的值，一个是垂直方向的值；如果是一个值的情况，就表示水平方向和垂直方向的值相等。 bor…
CSS图片和文字的对齐方式
行内元素有效：vertical-align，块级元素无效 // 垂直居中
vertical-align: middle;// 底部vertical-align: text-bottom;// 顶部vertical-align: text-top;块级元素： 如果相对块级元素有用，同时还要需要添加
dispaly: table-cell;…
究极花里胡哨的渐变是什么样子的？
本文属于 CSS 绘图技巧其中一篇，系列文章：在 CSS 中使用三角函数绘制曲线图形及展示动画[1]CSS奇思妙想 -- 使用 CSS 创造艺术[2]将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。通…
chekbox【2】 父级多选（选择父，子不能选择），字节多选（选择子，父不能选择），可限制个数
Vuex state：{"SeriesProductsAll": [ //系列-成品{ name: "ping", id: 1, disabled: false, checked: false, model: [{ name: "HW1623", id: "1_1", disabled: false, checked: false }, { name: "HW1633", id:…
总结一下HTML5和css3新特性
一、常见的块级、行级、空元素 在CSS中规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为…
vue style scoped 穿透
如果给样式中声明scop 那么页面的类会增加data-562e3wue8等属性 此时就需要用到>>> 或者 /deep/ 或者 ::v-deep 以后用后两个比较多
如果在样式类前面 ::v-deep ，则会自动找到 data-562e3wue8属性下的类或标签
注：有时::v-deep 无法识别&…
汇编程序设计-32-使用loop指令实现31中的测试
CX中存放的是循环次数，10H也就是16 每次执行循环一次CX中的值就减1.
题目：用编程进行加法计算 123*236的结果存放在AX中
项目笔记（只涉及思想，不会贴出业务代码）
项目中碰到的问题： 一、新增和修改公用一个页面，通过点击不同的按钮得到的数据来获取数据，新增时选中城市后才获取到围栏数据；而修改则是获取当前行的围栏id，mounted时得到围栏数据。 新增城市下面会默认展示 “全城配…
html圣诞树实例，快圣诞节了 给你的那个她码一颗吧
<html><head><title>圣诞快乐</title><meta charset"utf-8"><style>canvas{width: 100%;height: 100%;}html,body {width: 100%;height: 100%;margin: 0;padding: 0;border: 0;}div {margin: 0;padding: 0;border: 0;}.nav {pos…
element el-dropdown 水平居中
这个组件确实有点坑 他在每次初始化时都会根据位置自己产生定位数 而且他的父元素直接就是app 用穿透去改很多时候会带来新的问题
解决方案如下 首先 设置placement属性
<el-dropdown trigger"click" placement"bottom" ></el-dropdown> pl…
非ui线程更新ui_UI线程外CSS动画
非ui线程更新uiThis excellent Google I/O talk mentions that Chrome for Android moves the CSS animations off of the UI thread, which is, of course, a great idea. Playing around with it, heres what I found: 谷歌在I / O上的精彩演讲提到，Chrome for An…
uni-app引入iconfont图标
我们需要在iconfont官网中下载自己需要的图标 然后解压出来 这个我们需要这几个文件 在uni项目中根目录下的static下创建文件夹名字叫iconfont 将这里这个iconfont.css改名为 index.css 放在刚创建的iconfont文件夹下 然后在iconfont文件夹下创建font文件夹 里面放其他三个文…
vue打包Electron 路由无法访问
相信这是很多伙伴们第一次入坑Electron就会遇到的问题 会让人找不到头绪 但其实只要切换一下你路由的模式就可以了 一行代码解决问题 找到设置路由的router文件 找到Router对象 中的mode相信大家基本定义是值都是history 但这就是个浏览器使用的模式 Electron需要改成hash模式 …
CSS 自适应 @media 规则
应用场景
media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。
媒体查询可用于检查许多事情，诸如：
视口的宽度和高度 设备的宽度和高度 方向（手机或平板电脑处于横屏还是竖屏模式？） 分辨率
应用示例…
H5手机端手写一个图片预览盒子
最后我们将会实现这样的效果 当我们左右拉动屏幕时 就可以切换图片 主要利用了touchstart和touchmove 需要引入jquery 参考代码如下
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport…
z-index中的层叠规则使用
有关z-index的层叠规则的应用
有关z-index的应用，我们常常会误以为是z-index的值越大层级就越高，在书写项目的弹窗或遮罩层时，把z-index设置成9/99这样的形式，这样可以使页面的层级升高，展示在最上层！ 但也…
web使用的图片处理
在项目的开发，一般设计的同学都会一个文件夹，里面有对应的切图，psd（Photoshop）或者sketch（ios的sketch应用）文件，当切图不能满足我们的需求时，我们可通过源文件进行自我裁…
前端面试宝典 每日一题（11）关于css隐藏元素的一些思考
🧑🏻写在前面的话： 这个系列文章可能开始，有人会觉得很low， 我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析， 感兴趣的小伙伴可以持续关注&a…
Vue+ElementUI实现表单验证
前言
为什么要表单验证？
减轻服务器的压力保证输入的数据符合要求表单验证是减少后端工作量最好的方式之一，我们可以在前端利用表单验证和正则规范化传给服务端的数据，这样就可以大大减少服务端对数据的过滤
如何使用？
第一步…
2021【前端VUE框架】最新/最全/最细实战课程，VUE56节课程.课程链接发你，偷你的心的人在此，欢迎来撩。
Web>>>全栈>>>Vue 2021【前端VUE框架】最新/最全/最细实战课程，VUE56节课程. 视频有效期 无限期 节数: 56节 课程评分 :5.0分 你将收获 全面掌握Vue.js2.0技术栈(VueVue-RouterVuex)掌握Vue项目的搭建与开发教学全程采用笔记代码案例的形式讲解&a…
关于table设置border-collapse:collapse 之后，出现盒子占用超过自身高度的问题的解决方案
如下图，笔者因为要实现表格标题固定，内容滚动的效果，所以采用两个表格，但是在使用border-collapse:collapse;导致了两个表格中间有间隔，外层容器是flex布局，内容的flex:1 自动伸缩，表头使用原有…
html如何实现加载动画
html如何实现加载动画
在每个项目中都少不了接口的调用，而发请求出去之后都需要一定的时间才能返回数据，大多需要0.5 - 0.8秒，如果后端数据处理不当还有超过一秒的接口，甚至两秒，在这段时间里我们需要向客户表达正在加…
html+css实现3D相册全部代码
直接运行即可
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>3D旋转</title><style>body{padding: 0;margin: 0;}ul,ol{list-style: none;padding: 0;margin: 0;}div{margin: 100px aut…
CSS实现进度条和订单进度条
由于近期需要做一个订单进度条，比较直观的反应当前订单的状态，css样式借鉴了网上的相关代码，下面是效果图，以及实现说明 一.说明 1.首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多做说明，进度条CSS样式 &…
如何设置一个元素在垂直方向居中?
1、首先不考虑代码的灵活性，可以使用margin 外边距或者 padding内边距来实现元素在垂直方向居中显示具体可以给父元素设置一个垂直方向的padding内边距; 2、也可以给需要垂直居中的子元素设置垂直方向的外边距. 3、其次如果这个需要垂直居中的元素是一个单行文本&am…
定义一个简单的CSS3动画
通过CSS3，我们无需javascript也可以创建一些简易的动画效果，下面我们来看一下相关的属性和规则。
CSS3 animation属性
通过animation属性，我们可以给元素附加动画效果及样式，下表列出了animation属性的值：
属性功能…
Flex布局中元素换行设置间距问题
要生成的效果图如下： 解决办法
1. 父元素定高的情况下，直接使用 align-content: space-between; ul{list-style: none;display: flex;height: 614px;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-content: space-between…
自定义的车牌号键盘组件
<template><view class"keyboard-wrap" v-if"kbShow"><view class"head"><view class"done" tap"done"><text class"iconfont iconxiala-"></text>关闭</view></vi…
anime SVG 简单使用方法
<template><div class"title">SVG 简单使用方法</div><div class"amine-box"><div class"icon" ref"icon"></div><svg width"256" height"112" viewBox"0 0 256 112…
关于一个简易的Html5音乐播放器的制作
源代码存放在github上：https://github.com/WYKXLDZ/CollegeJoy/tree/master/SimpleMusicPlayer
效果： <!Doctype html>
<html><head><meta charset"utf-8"><title>MUSIC</title><style type"tex…
uniapp swiper组件添加点击事件
微信小程序下写法
<swiper circular duration"1000" interval"5000" autoplay><swiper-item v-for"(item, index) in bannerlist" :key"index" click"skip(item.url)"><image class"loaded" :src…
uniapp 支付宝小程序swiper组件错位
在微信开发者工具控制台可以看到默认加了position:absolute属性 而支付宝小程序运行工具没有加。。。。可以看到第二张图片跑到区域下面去了 原因：在支付宝小程序中不会给<swiper-item>标签添加**position:absolute**属性 解决办法：.swiper-item …
uniapp 选择框样式 H5
在APP.vue里面添加一下代码
/* 中间对号样式 */radio::before,checkbox::before {margin-top: -6px;right: 4px;font-size: 15px;line-height: 15px;}/* 选择框大小 */radio .wx-radio-input,checkbox .wx-checkbox-input,radio .uni-radio-input,checkbox .uni-checkbox-inpu…
面试题：说一说css3新增属性
1.border-radius
2.box-shadow
3. background-image
4.background-size
5.background-origin（规定背景图片的定位区域。）
6.background-clip （规定背景的绘制区域。）
7.渐变（gradients）
8.transitio…
面试题：介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(width、height)
CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样
标准的CSS的盒子模型的宽高：内容区的宽高
低版本IE的盒子模型的宽高：内容区内边距边框
使用 border 属性制作三角形
问题描述：
有时候我们需要使用到三角形图标，如果直接使用SVG图标，会增大项目体积（虽然不是很大），而且使用起来也比较繁琐如果直接使用 CSS 制作，使用起来会更加方便
解决方案：
添…
获取百度毛毛虫（害虫）图片批量下载
1.百度图片地址 https://image.baidu.com/search/index?tnbaiduimage&ps1&ct201326592&lm-1&cl2&nc1&ieutf-8&dyTabStrMCwzLDEsNiw0LDUsOCw3LDIsOQ%3D%3D&word%E6%AF%9B%E6%AF%9B%E8%99%AB 2.模拟关机下拉百度图片代码
driver.execute_scri…
送女朋友-css动画制作立方体相册
图片可以换成女朋友照片~
直接上代码！
嵌套立方体相册
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…
轮播图一次移动双倍距离的问题
有可能是轮播图渲染函数执行了两次，比如我的 component()动态渲染轮播图，调用一次后，在输出中又调用了一次，太憨了
点我学习html常用布局方式
1、三栏布局 圣杯布局 双飞翼布局弹性盒子布局1.1、圣杯布局 1.在主体内部外面嵌套了一个div 2.center在结构上靠前 3.center，left，right都浮动 4.清除浮动 5.center宽度为100%，left，right宽度固定 6.left通过margin-left为负值&…
CSS---用户界面样式
什么是界面样式?
所谓的界面样式, 就是更改一些用户操作样式, 以便提高更好的用户体验 更改用户的鼠标样式 表单轮廓
防止表单域拖拽 鼠标样式 curosr
li {cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
属性值描述default默认point…
CSS---flex布局中子项常见属性
flex子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序 (前后顺序) flex属性(最重要) flex属性定义子项目分配剩余空间, 用flex来表示占多少份数 align-self 控制子项自己在侧轴上的排列方式 align-self 属性允许单个项目与其他项目不一样…
CSS---flex布局中父项常见属性
复习目标:
1. 能够说出 flex 盒子的布局原理
2. 能够使用 flex 布局的常用属性
3. 能够独立完成写成移动端首页案例 传统布局与flex布局有什么区别? 传统布局flex弹性布局兼容性好操作方便, 布局极为简单, 移动端应用很广泛布局繁琐PC端浏览器支持情况较差局限性, 不能在移…
CSS深入基础篇---圆角边框, 阴影(8)-CSS3新增
圆角边框(重点)
border-radius属性用于设置元素的外边框圆角
语法:
border-radius: 参数值( 说白了就是数值 为像素单位); (这个数值代表的是圆的半径的大小) 参数值可以为 数值或者百分比的形式
小技巧: 如果是正方形, 想要设置为一个圆, 把数值修改为高度或则和宽度的…
CSS深入基础篇---CSS盒子模型(7)
目标: 能够准确阐述盒子模型的4个组成部分
能够利用边框复合写法给元素添加边框
能够计算盒子的实际大小
能够利用盒子模型布局模块案例
能够给盒子设置圆角边框
能够给盒子添加阴影
能够给文字添加阴影 网页布局要学习三大核心: 盒子模型,浮动和定位. 盒子模型有什么作用…
CSS深入基础篇---CSS的三大特性(6)
CSS三个非常重要的三个特性: 层叠性, 继承性, 优先级 层叠性
相同选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式. 层叠性有什么作用?
层叠性主要用来解决样式冲突问题 层叠性原则:
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
样…
学习H5C3Js中的随手记(1)
1.如何实现分割线? 一个 <hr> 水平线标签完事 不过实际开发中不会使用 <hr>标签 而是给通过控制盒子的边框实现 2.在实际开发中我们怎么样控制图片的大小? 第一种:使用class"名字" 在CSS中 .名字 然后通过 width 和 height 设置多少多少 px 然后控制大…
CSS样式中background-position：后的两个值代表什么？
如果提供了两个值，第一个会决定距离左边缘的偏移，即水平位置；第二个值会决定图片从上边缘向下的偏移，即竖直的位置。
例如：
background-position:-5px 10px
则代表：背景图片向左偏移5px，向下…
educoder答案-CSS3选择器-组合选择器-太原理工大学
太原理工大学 Web程序设计基础2021秋答案 educoder
本实训项目为廖丽娟老师团队自己编写的实训项目，此账号超前更新答案，助力各校友学好web 第1关：组合选择器相关的概念
A C A
第2关：群组选择器
<!DOCTYPE html>
<…
educoder答案-CSS3-文本字体样式-太原理工大学
太原理工大学 Web程序设计基础2021秋答案 educoder
本实训项目为廖丽娟老师团队自己编写的实训项目，此账号超前更新答案，助力各校友学好web 第1关：字体样式属性相关的概念
B D A
第2关：美食专栏网页的结构设置
<!doctype…
CSS3 转换解析及制作立方体相册
CSS3 转换
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。 一、它是如何工作？
转换的效果是让某个元素改变形状，大小和位置。
可以使用 2D 或 3D 转换来转换您的元素。
实例旋转30度：
<!DOCTYPE html&…
80、CSS3硬件加速
一、为什么使用GPU 3d 图形要显示在二维的屏幕上就要做投影，这个投影的过程叫做光栅化。（光栅是一种光学仪器，在这里就代表 3d 投影到 2d 屏幕的过程）
光栅化要计算 3d 图形投影到屏幕的每一个像素的颜色，计算完所有的…
css/wxss 用伪类实现竖线效果（图片+源码）before、after巧用
源代码见本文末尾~ 本文的代码片段用HTML语言书写，适用于网页、微信原生小程序、框架uniapp等…… 小程序原生开发需要实现这样一个效果。 用伪类啊，这个我熟！先讲讲思路。 因为用before和after的效果是一样的，所以我们任选一个&…
倒计时翻牌器动画实现
实现上方翻牌动画 <div class"clock" id"clock"><!-- front: 表示位于前面的纸牌 back: 表示位于后面的纸牌 --><div class"flip down"><div class"digital front number0"></div><div class"…
Failed to prettify component 。。screenMap.vue template source after compilation.
vue项目运行，出警告，项目可以正常启动 通过反复折叠代码，运行项目，警告就消失了 预计是代码格式的问题。
css3中animation 属性
animation: name duration timing-function delay iteration-count direction;animation 属性是一个简写属性，用于设置六个动画属性：
animation-name：规定需要绑定到选择器的 keyframe 名称。(默认值为none)animation-duration：规…
padding不会撑开盒子的情况
1.如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
2.代码：
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" conte…
GitHub上传代码最简单方式
首先下载Github Desktop 在点击Add local repository
选择你想上传的文件路径 没有对应的仓库就点击蓝色字新建一个 点击这个Pushing to origin来发布
less的mixin
less的官网：http://lesscss.org/
使用node下载less：
npm install -g less编译less文件：
lessc styles.less styles.csscss有什么问题，为什么要使用预编译的less？
因为样式庞大以后，层次不清晰ÿ…
原生JavaScript 10-电影票选座位
效果如下： 完整代码：
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" c…
css3样式总结--例如：颜色渐变、元素阴影、文字超长、transform、animation 和 keyframe动画的运用。
一、英文字母全部大写 英文字母全部小写 英文首字母大写
text-transform: uppercase ； text-transform:lowercase； text-transform:capitalize
二、border边框属性（简写）
border-width 边框宽度 border-style 边框样式…
文本超两行显示......
width: 100%;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
element ui Notification组件重叠问题
出现的问题 修改方法
data() { return {timer: null}
},
methods: {showNotifica() {for (let i 0; i < list.length; i) {//list是我接口返回数据，需要改成自己let str <p>单号： list[i].vender_order_no </p><p >事由&#…
CSS 主流布局进阶
CSS 主流布局进阶前言一、CSS 还原 UI 设计1、Photoshop 还原 UI 设计（1）PhotoShop 下载安装（2）添加辅助线（3）尺寸、文字、颜色等信息的获取（4）切图操作2、蓝湖 App 快速标注信息二、…
css3文字与字体样式
css3使用服务器端字体: <!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>使用服务器端字体</title><style>font-face {font-family: webFont;/*此代码会首先用客户端字体Arial，…
vh——实现根据视口的高度，自适应某一部分的高度
vh是CSS3中的相对长度单位，表示相对视口高度（Viewport Height），视口被均分为100单位的vh，即1vh 1% * 视口高度。
可以用来解决主体内容不足以撑起视口的剩余高度时，页面底部留白太多的尴尬问题。
demo: …
解决普通方式修改不了 ElementPlus 默认样式的问题
问题描述：
在使用 ElementPlus 时，有时需要修改默认样式，一般是直接复制对应的 class 名，然后在其中修改将原来的覆盖然而，有时使用覆盖的方式也解决不了
解决方案：
首先不能使用 scoped
解决方案1&…
这个中秋，我们与梦想团圆
曾几何时，我们带着梦想，远离了家乡。在异乡的办公桌前，为实现梦想而努力。缩短与梦想之间的距离，是无数次代码的奔跑，是无数个黑白颠倒的加班。这个秋天，将不多的时间分给自己，让身体放松。只要…
有云说 | 给你一个撬动“小目标”的支点
今天被“一个亿”刷屏感觉浑身充满了正能量对于首富这句话，小编只想说一句：首富的一小步，人类的一大步……网上也是各路仙家各显神通一个亿虽然看似很遥远但是梦想还是要有的，万一实现了呢？百度开放云也想说……一亿的…
Demo---progress-steps------ 2/50(详解)
看详解前 请务必具备的基础知识:
1.什么是基线 2. 元素的分类 3. justify-content; 的那些事 4.区分伪类和伪元素(以下内容 帮助理解与区分) 1 ) 1.伪元素在CSS3中使用 双冒号 :: 之前是 : 2 . 伪类选择器是用来向某些选择器来添加效果 3.伪元素选择器则是用来…
vue影院在线选座--可拖拽、缩放--A/B/C三级座位
以前练习写项目的时候，写过一个影院的在线选座页面，也看了很多插件和别人写的，大部分是移动端，类似于美团电影那种选座，页面可以放大，缩小，拖拽，我写的是PC端的，看看效果…
uni-app小程序--授权登录、分享页面
uni-app框架写小程序如何微信授权、分享页面首先明确思路：1.将判断用户是否授权逻辑放在App.vue里，每次用户进入mounted， 判断用户是否已经授权过，将授权状态存在vuex里，(我测试时先存在了storge里)
setting(){const …
CSS3：创造引人注目的Web界面
引言
CSS3作为最新版本的CSS标准，为Web界面设计师和开发人员带来了许多令人振奋的新特性和功能。本篇博客将带你深入了解CSS3的各个方面，包括选择器和样式属性、布局和盒模型、过渡和动画、响应式设计等。通过详细的代码示例和实用的技巧，我…
css 弹性盒子样式设置
1、从上至下，从左至右依次排列展示
.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap; /*换行*/align-content:flex-start;/*换行时从上至下紧挨着，和flex-wrap: wrap一起使用*/justify-content:center;…
css3字体背景颜色跑马灯
页面效果 CSS .title {border: 0px;font-size: 200%;font-weight: bold;float: left;line-height: 1.5;width: 100%;padding-left: 5px;margin-top:0px;background: -webkit-linear-gradient(left,#ffffff,#ff0000 6.25%,#ff7d00 12.5%,#ffff00 18.75%,#00ff00 25%,#00ffff 31.…
6种css3鼠标滑过动画效果
<html><head><meta charset"utf-8" /><title>6种css3鼠标滑过动画效果</title><style type"text/css">/*****全局样式*****/* {padding: 0;margin: 0;font-family: "微软雅黑"}h2 {margin: 15px 0;font-wei…
![[100天挑战100个前端效果]第十四天---旋转的炫彩小球(制作彩色计时器0.0)](https://img-blog.csdnimg.cn/20210406085518511.gif#pic_center)
[100天挑战100个前端效果]第十四天---旋转的炫彩小球(制作彩色计时器0.0)
旋转的炫彩小球让我们先来看看实现的效果吧html代码css代码知识汇总和思路分析让我们先来看看实现的效果吧 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible&qu…
![[100天挑战100个前端效果]第十一天---windows加载动画(有一种回到小时候打qq堂的时候)](https://img-blog.csdnimg.cn/20210330093001336.gif#pic_center)
[100天挑战100个前端效果]第十一天---windows加载动画(有一种回到小时候打qq堂的时候)
windows加载动画我们先来看看实现效果html代码css代码今日份知识总结我们先来看看实现效果 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content&quo…
前端基础复习笔记--08前端工具photoShop使用？
1. photoShop使用？ 组成： 菜单项 工具栏 辅助面板 快捷键： ctrl r : 显示隐藏标尺 在标尺上可以拖拽参考线 可以通过移动工具拖拽回去，也可以在视图菜单中选择清除所有的参考线…
前端基础复习笔记--06CSS选择器？CSS继承？
一. CSS选择器？ 1. ID选择器 #elem{} id"elem" 注： 1. ID是唯一值，⭐️在一个页面中只能出现一次，出现多次是不符合规范的。 2. 命名的规范，由字母、下划线、中…
前端基础复习笔记05--CSS背景样式？CSS边框样式？CSS文字样式？CSS段落样式？CSS复合样式？
1. CSS背景样式？ background-color 背景色 background-image 背景图 url(背景地址) 默认：会水平垂直都铺满背景图 background-repeat 平铺方式 repeat-x x轴平铺 repeat-y y轴平铺 repeat ( x , y …
微信小程序开发实战-第六周
第六周
加入缓存系统 获取期刊时先到缓存中查找，如果能找到就读取，不能就向服务器发送请求，然后再次写入缓存中 所有期刊在缓存有一个key，确定key，代表一个期刊和表示是哪一期期刊
定义一个私有方法_fullKey来生成ke…
请求不到接口 ＜title＞HTTP Status 500 – Internal Server Error＜/title＞
debug 接口处也跳不过去
首先 500（服务器无法响应） ，证明请求到服务了然后搜下springMVC 程序入口DispatcherServlet，在这打断点抛出了错误e，（返回没有，debug才能看到具体的信息）&a…
教你使用CSS3实现新拟态UI
教你使用CSS3实现新拟态UI
什么是新拟态？
新拟态的英文名称是“Neumorphism”，是NewSkeuomorphism的组合词，同时也叫“Soft UI”。简单讲，新拟态是一种图形样式，其原理是通过模拟真实物体来为界面的UI元素赋予真实感…
css实现内容宽度超出界限左右滑动且不显示滑动条
<ul><li></li><li></li><li></li>
</ul>ul{width: auto;overflow-x: auto;white-space: nowrap;}ul::-webkit-scrollbar {display: none;}
基于html5 css3风车乐栈在线音乐播放网站源码 大学生毕业设计源码 在线音乐网站HTML HTML5期末大作业 web课程设计网页规划与设计
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等…
关于Swiper的初尝试
Swiper是一个功能强大的轮播组件，省去了我们自己手动写轮播功能的痛苦。 建议看官网，更全面 这里就初尝Swiper做一个总结：
初始化
需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件
简单demo
结构如下:
<div class&…
设置rich-text标签样式
问题：多张图片中间存在一定的间隔 多张图片之间存在间隔只需要设置display属性为block就可以；
<rich-text nodes"{{productDetail.content}}"></rich-text>2.先打印一下rich-text标签内容看一下 这里的img标签自身带了一个style&…
纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮。css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。让人感觉有一种按钮被按下的感觉。css代码非常少，如下所示 a.css-3d-btn{position: relative;color: rgba(255, 255, 255, …
css3 -webkit-image-set 设置不同分辨率 背景图片
今天get到的一个新技能，看来好久没看css3都要out了，谨以此警醒一下自己 语法： image-set() image-set( <image-set-option># ) <image-set-option> [ <image> | <string> ] <resolution> 说明： i…
css3 伪元素的一些理解和笔记
css3 添加的伪元素对于css来说简直是惊天大爆炸，例如：after ：before ， 简直是无敌的体现！ 它最大的一点是 直接对元素渲染得改变 不会对于标签文档产生任何影响！！ 这是Nicolas Gallagher总结…
前端面试宝典 每日一题（12）一些常用css效果分享
🧑🏻写在前面的话： 这个系列文章可能开始，有人会觉得很low，我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析，感兴趣的小伙伴可以持续关注&…
CSS基础：浅聊flex布局以及常用属性
前言
导语
流式布局，这个很简单也很容易理解，就是从上而下根据布局，然后依次通过元素进行布局即可，和web前面聊的网页开发没有什么大的区别，现在现在聊了一些flex布局，这个让流式布局中的一些布局进行优化…
ES6 中的解构赋值和剩余参数
1. 解构赋值
ES6 中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。
1. 数组解构
let ary [1, 2, 3];let [a, b, c] ary; // 左边的中括号 代表--解构,a,b,c是变量console.log(a);console.log(b);console.log(c);let ary [1, 2…
CSS基础：新属性3D的转换，以及案例演示
3D 的转换，如果单独用文字来描述，我觉得绕口，同样看着也有些懵，所以对这个如果单独文章理解可能有点难度，所以尽量描述清除吧。
前面聊的2D的的时候，说有两个轴x，y，现在聊3D等于多出…
【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性
写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正࿰…
【CSS系列】第三章 · CSS三大特性和颜色的表示
写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正࿰…
弹性盒布局兼容（不支持ie10以下）
.flexbox{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. / display: -moz-box; / 老版本语法: Firefox (buggy) / display: -ms-flexbox; / 混合版本语法: IE 10 / display: -webkit-flex; / 新版本语法: Chrome 21 / display:…
HTML CSS画一朵向日葵
前几天看到一张图片，倔强的向日葵。（BGM，《倔强》） 看着挺有感触，就想用CSS做一个向日葵。
最终效果图如下：
演示地址：
http://suohb.com/work/sunflower.html 主要的难点就在花瓣的处理上&a…
前端实战系列：【2023酷炫前端特效】HTML蜂巢特效（附完整可执行代码 + 全网唯一！超详细注释分析 (熬夜换来的...)，让你看得懂，敲的出代码！
久别重逢非昨日，万语千言不忍谈。 🎯作者主页： 追光者♂🔥 🌸个人简介： 💖[1] 计算机专业硕士研究生💖 🌿[2] 2023年城市之星领跑者TOP1(哈尔滨)🌿 🌟[3] 2022年度博客之星人工智能领域TOP4🌟 🏅[4] 阿里云社区特邀专家博主🏅 🏆…
css3动画之圆形运动轨迹
css3中通过keyframes定义动画，animation设置动画属性，从而实现动画效果；
在animation属性当中，可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。
animation
animation作为一个复合属性&am…
CSS做个五颜六色的风车
做个简单的风车 身为一个Java小白会用css做点风车不过分吧Pay attention to：this is living 风车，不是 lifeless 的风车*代码：
<!DOCTYPE html>
<html><head><meta charset"utf-8"><title></tit…
两种纯CSS方式实现hover图片pop-out弹出效果
实现原理
主要图形的组成元素由背景和前景图两个元素，以下示例代码中，背景元素使用伪元素 figure::before 表示， 前景元素使用 figure img 表示，当鼠标 hover 悬浮至 figure 元素时，背景元素产生变大效果，…
让网页更美观（css3新特性）
让我们来看看，如何让自己做的网页更加美观吧 渐变效果
<!DOCTYPE html>
<html><head><meta charset"utf-8" /><title>网页</title><style >/* 渐变效果 */.bot{width: 6.25rem;height: 100px;/* 默认从上到下…
移动端MUI上拉加载列表、日期(公众号)
MUI框架的上拉加载列表使用方法
MUI官方称它轻量、原生、以iOS平台UI为基础，补充部分Android平台特有的UI控件，
开发工具指定是HBulider莫属，然后新建Web项目，结构如下： 因为你的项目里要大量引入mui扩展插件的css/…
Vue滑动隐藏图标效果
Vue实现固定定位图标滑动隐藏效果
页面滚动前 页面滚动后
<template>
<!-- 注意：我这里是Vue3，所以最外层没有套一个div盒子 --><!-- <router-view></router-view> --><div class"main"><div clas…
小黑子—多媒体技术与运用基础知识四：计算机动画与视频处理技术
多媒体技术与运用4.0 多媒体系列第四章1. 计算机动态视觉媒体1.1 动态视觉媒体产生原理1.2 动态视频文件特点1.3 技术参数1.4 动画与视频的异同 2. 计算机动画的基础2.1 计算机动画的类型2.1.1 从动画生成机制划分2.1.2 从画面透视效果划分2.1.3 从画面形成规则和制作方法划分2…
div外点击，让该div消失
借助jquery来实现这个简单的小功能
依赖
<script type"text/javascript" src"/js/jquery-1.8.2.min.js"></script> Html <div><div class"r-input-t" style"background:red;width:20px;height:30px;" οnclick…
移动端适配方法:rem+vw
1.百分比设置:几乎不用
因为各种属性百分比参照物(自身/父元素/...需要去查文档)很难统计固定,所以不用百分比进行适配
2.rem单位动态html的font-size
使用rem,因为rem参考html的fz,只需要在不同的屏幕上设置不同的html的fz即可,其他地方全用rem rem的fz尺寸 媒体查询 编写…
CSS中的 clip 属性
参考：https://baijiahao.baidu.com/s?id1757136902803734131&wfrspider&forpc
作用：
clip 属性用来设置元素的形状，用于剪裁绝对定位的元素。当一幅图像的尺寸大于包含它的元素时，clip 属性允许规定一个元素的可见尺寸…
CSS3中的animation详解
原文地址：http://www.jb51.net/css/365793.html 在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是”Keyframes”,我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是…
2023.05.17-使用Vizzy进行音乐的可视化
文章目录 1. 简介2. 官网3. 使用3.1. 进行音乐可视化 1. 简介
Vizzy是MusicVid创作者的另一个在线音乐可视化工具。虽然这款应用还处于Alpha版本，但Vizzy相当令人印象深刻，绝对值得一试。Vizzy支持动画文本对象、频谱、图像和效果。工具集的最突出的功能…
一个炎爆术分享给大家~
先来强势围观： 再看代码：
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>Title</title><script src"https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/…
CSS 实战: 纯 CSS 画三角形
CSS 实战: 纯 CSS 画三角形 文章目录CSS 实战: 纯 CSS 画三角形实现技术核心: Border 属性基础改变高度、宽度扭曲变形其他资源参考连接完整代码示例实现技术核心: Border 属性基础
使用 CSS 实现三角形的基础在于 Border 属性
首先我们先来看基础的 border 使用
#t1 {borde…
UI 实现分享: Setting 页面
UI 实现分享: Setting 页面 文章目录UI 实现分享: Setting 页面正文0. 简介1. 实现思路 & 布局规划1.1 整体布局1.2 侧边栏1.3 主页面2. 设计原 & 还原效果对比3. 实现小结其他资源参考连接完整代码示例正文
0. 简介
今天要来分享的东西看起来有点傻，但是…
【CSS】css 获取从第n个元素开始，之后的所有元素 :nth-of-type(n)与:nth-child(n)
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
html代码：
<div id"box"><div>111</div><div>222</div><div>333</div><div>444</div>
</div>css代码…
【JS】js将页面下载为图片---angular2中使用html2canvas将数据导出为图片，并下载到本地
1、安装html2canvas
官方网站https://html2canvas.hertzen.com/
npm install --save html2canvas2、在需要的组件中引入html2canvas
import html2canvas from html2canvas;3、定义方法，将数据转换为canvas
downloadPic(){html2canvas(document.querySelector(#d…
百度云生态云市场2.0版上线啦－用伙伴的力量 让企业上云更简单
5月25日，百度云云市场重磅来袭。百度云云市场建立成为百度云生态云建设的重要载体。依托第三方丰富、优质的商品服务和百度云自有产品体系，构建通用和垂直行业细分解决方案场景服务，精准满足百度云客户的多样性、深层次云服务需求；…
基础巩固 - flex宽度为内容宽度
关注公众号，每天都能领外卖红包 当设置标签display: flex则默认标签具有display: block的特性，宽度会根据父元素而撑满，如下
<div class"box-parent"> <div class"box">box</div></div>
.box…
CSS3：过渡动画及关键帧动画-案例二：小球的下落
二、关键帧动画 本文大致介绍了CSS3中的技术之一：动画，因为我也是学习者，这只是我自己的观点，如有错误，请指出。废话不多说，开始步入正题： 本文承接上文：上一篇博客仅仅介绍了动画过…
Bootstrap——网格系统，导航栏，轮播
文章目录bootstrap简介及其相关内容网格系统导航栏轮播bootstrap简介及其相关内容
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。引用其时需要具备一定的基本模板： <meta charset"utf-8"><meta http-equiv"X-UA-Compatibl…
nginx常用命令，跨域问题
在跨域问题上，nginx特别好用，本人常用的命令有
//cd到nginx文件下（即与nginx应用文件同级），或该文件下运行cmd
start nginx //启动nginx
nginx -s reload //重加载nginx文件
nginx -s stop //强制停止…
CSS让背景图适应整个屏幕（填满）
html代码如下 <body>/*此处内容省略*/</body>使用css设置背景图片并且铺满整个屏幕（不重复），代码如下
body{/*设置背景图片*/background-image: url("../images/background/back.jpg") ;background-size: 100% 100%;b…
![[100天挑战100个前端效果]第二十三天---只想做你的太阳](https://img-blog.csdnimg.cn/20210518103846116.gif#pic_center)
[100天挑战100个前端效果]第二十三天---只想做你的太阳
画个小太阳让我们先来看看实现的效果(接二十一天switch按钮)html代码css代码设计思路与今日份知识总结设计思路知识总结让我们先来看看实现的效果(接二十一天switch按钮) html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"…
让HTML5, CSS3, Bootstrap3在虐心的IE8上爬模滚打
HTML5 和 CSS3 推出已经很久了，然而在它推出之前，早就有 IE 的存在，所以不可避免地发生 IE8 及其更早版本不支持 H5 新标签新特性和 CSS3 新内容这样的尴尬局面，而且还存在着对 JavaScript 的兼容问题…… 虽然微软已经对 IE 弃疗…
advisor复合电源模型。采用新增构型方法修改的复合电源模型
advisor复合电源模型。采用新增构型方法修改的复合电源模型，比advisor书上那种在纯电基础上修改好很多，因为保留了自带的纯电模型，所以可方便比较有无超级电容的影响。模型运行完全正常 无报错id615835728630&
![[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)](https://img-blog.csdnimg.cn/20210414100006390.gif#pic_center)
[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)
人物介绍卡片效果让我们先来看看实现的效果html代码css代码今日份知识总结让我们先来看看实现的效果 html代码
<!DOCTYPE html>
<html lang"zh-Hans"><head><meta charset"UTF-8"><meta name"viewport" content&quo…
![[100天挑战100个前端效果]第八天---水滴融合(请把光的力量借给我吧！)](https://img-blog.csdnimg.cn/20210327101859123.gif#pic_center)
[100天挑战100个前端效果]第八天---水滴融合(请把光的力量借给我吧！)
水滴融合！让我们先来看看实现的效果html代码css代码今日份知识总结说到融合，我真的是激动不已，奥特融合回荡在我的脑海！系啊~~~~泽塔提姆光线-------让我们先来看看实现的效果 html代码
<!DOCTYPE html>
<html lang&quo…
强制换行和禁止换行样式 css加滚动条
在CSS里，主要有强制换行和禁止换行。
一、强制换行
1 word-break: break-all; 只对英文起作用，以字母作为换行依据。 2 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 3 white-space: pre-wrap; 只对中文起作用，…
如何用一行代码实现网页变灰效果？
今天是 2020 年 4 月 4 日，星期六，清明节。
我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国下降半旗，北京时间 10 点全国默哀三分钟…
修改了CSS样式但是在浏览器中没有生效的解决办法
我今天在练习写网站前端的时候，修改了CSS的样式，但是打开浏览器，却发现我的样式并没有生效，很多人这时候都会仔细检查自己的代码是否写错，但这次还真不是代码上的bug,解决这种问题有3种方法。
1.在浏览器中右键选择检…
![[100天挑战100个前端效果]第二天---流光按钮](https://img-blog.csdnimg.cn/20210321172131111.gif#pic_center)
[100天挑战100个前端效果]第二天---流光按钮
流光按钮我们先来看看效果的实现html代码css代码新学到的知识总结我们先来看看效果的实现 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"…
![[100天挑战100个前端效果]第一天---闪光按钮](https://img-blog.csdnimg.cn/20210320163941487.gif#pic_center)
[100天挑战100个前端效果]第一天---闪光按钮
闪光按钮我们先来看看效果的实现html代码css代码新学到的知识总结我们先来看看效果的实现 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"…
纯css美化滚动条样式
https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式！当然就会使用到滚动条了，而默认的滚动条有多丑大家清楚吧！就搜到了纯CSS美化滚动条样式的方法！…
CSS3的Columns
大家都看过报纸，报纸的内容大都是按列排布的。那在前端布局中该怎么实现类似报纸一列一列布局的效果呢？ 文章目录columnscolumn-width和column-countcolumns
首先要祭出的就是CSS3中新增的columns。columns是一个复合属性，由column-width和c…
星空样式（HTML）
星空样式写法
引入jquery库css样式代码js部分
一：引入jquery库
<head>
<script src"jquery-1.10.2.min.js"></script>
</head>二:css样式代码
body {/* 径向渐变 第一个参数是位置 *//* 这里用了background-attachment 在渐变…
layui中table表格内容过多自动换行
表格超出内容没有自动换行，超出部分需要自动换行。 允许长单词换行到下一行：p.test {word-wrap:break-word;}
前端开发中的规范 - 样式篇
CSS的引用、开头：
样式放头上，脚本放脚下。不内嵌，只外链。charset “utf-8”; 注意：必须要定义在 CSS 文件所有字符的前面（包括编码注释），charset 才会生效。注释用英文，避免解析出…
【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )
文章目录 一、需求说明二、动画代码分析1、地图背景设置2、热点动画位置测量3、热点动画布局分析4、动画定义5、小圆点实现6、波纹效果盒子实现7、延迟动画设置 三、代码示例 一、需求说明 实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ; 核心 是实现 向四周…
【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 使用动画制作热点地图 )
文章目录 一、CSS3 动画属性1、CSS3 常见动画属性简介2、代码示例 - CSS3 常见动画属性使用 二、CSS3 动画属性简写方式1、CSS3 动画属性简写语法2、animation 简写动画属性提示3、动画属性简写形式与原形式对比4、代码示例 - CSS3 动画属性简写示例 三、使用动画制作热点地图1…
前端库——按钮（我发誓你会感叹按钮玩出来的花样）
前端库——按钮前言知识点1.流布局2.线性渐变3.径向渐变4.锥形渐变5.滤镜基础按钮1修饰宽高设置颜色修饰部分：修饰边框阴影修饰部分：拟态按钮1修饰部分：拟态按钮2关键代码：非常规形状拟态关键代码：水滴效果按钮关键代码…
项目中css样式：多行自动换行，单行显示省略号（样式代码）
1.单行超出线长度显示省略号
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
//若无效，可设置display:inline-block
//若高度超出被截断，可设置line-height属性2.多行自动换行，显示省略号
word-wrap:break-word;
overflow:…
HTML如何制作在透明输入框里面添加图标
HTML如何制作在透明输入框里面添加图标
最近在写一个律师推荐前台的网站，在上面搜索框这里出现了问题，我想把搜索的图标放在搜索框里面，但是弄了半天都不大如意…… 话不多说，我们直接进入主题 ：
基本思路
其实就把…
HTML5+CSS3+JS小实例：可自由拖拽排序的表格
实例：可自由拖拽排序的表格
技术栈：HTML+CSS+JS
效果： 源码：
【html】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=…
DOM的节点操作+事件高级+DOM事件流+事件对象
一.节点操作 1.父节点:
node.parentNode 得到的是离元素最近的父级节点
2.子节点:
parentNode.childNodes 所有的子节点 包含元素节点 文本节点等等parentNode.children (非标准) 获取所有的子元素节点,实际开发常用 parentNode.firstChild 获取…
vscode格式化css文件，css文件排版
vscode格式化css文件 1.安装css格式化工具 2.在根目录下添加“.csscomb.json”文件，代码如下:
{ "exclude": [ ".git/**", "node_modules/**", "bower_components/**" ], "always-se…
css3【语法要点】
语法要点 display: -webkit-box;/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */display: -moz-box;/* 老版本语法: Firefox (buggy) */display: -ms-flexbox;/* 混合版本语法: IE 10 */display: -webkit-flex;/* 新版本语法: Chrome 21 */display: …
css3新增选择器总结
目录
一、属性选择器
二、结构伪类选择器
三、伪元素选择器
四、UI状态伪类选择器
五、反选伪类选择器
六、target选择器
七、父亲选择器、后代选择器
八、相邻兄弟选择器、兄弟们选择器 一、属性选择器
（除IE6外的大部分浏览器支持）
E&#…
css3-grid：grid 布局 / 基础使用
一、理解 grid 二、理解 css grid 布局
CSS Grid布局是一个二维的布局系统，它允许我们通过定义网格和网格中每个元素的位置和尺寸来进行页面布局。CSS Grid是一个非常强大的布局系统，它不仅可以用于构建网格布局，还可以用于定位元素…
SCSS 学习笔记 和 vscode下载live sass compiler插件配置
1、下载livelive sass compiler插件并配置 // 在 已有代码 下面 添加下面 代码，一般刚刚下载打开最后一行是：// "liveSassCompile.settings.autoprefix": [],// 所以直接 把下面复制进去保存就行"liveSassCompile.settings.autoprefix&qu…
react动态改变css样式
原文链接： https://blog.csdn.net/weixin_44638823/article/details/114287219 用到的是方式二，首先处理数据，存入state 调用方法返回样式 效果如下：
css3+js 画出爱心特效
要使用CSS3和JavaScript绘制爱心特效，可以使用CSS3的动画和过渡效果来创建爱心的形状，并使用JavaScript来控制动画的触发和交互。以下是一个简单的示例代码：
HTML:
<div class"heart"></div>
<button onclick&quo…
vue3范围选择组件封装
个人项目地址： SubTopH前端开发个人站 （自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面） SubTopH前端开发个人站…
这种鼠标悬浮，图片放大，鼠标移出，图片变回原来的大小，是如何实现的？
在Vue中实现鼠标悬浮时图片放大效果，以及鼠标移出时图片恢复原来大小，可以使用Vue的事件绑定和样式绑定功能来完成。以下是一个基本的示例：
首先，在Vue组件中，定义一个数据属性来控制图片的放大和恢复：
&…
css3 实现文字横幅无缝滚动
css3 实现文字横幅无缝滚动 使用 css3 关键帧 keyframes 和 animation 属性实现文字横幅无缝滚动。 <template><div class"skiHallBanner"><div class"skiHallBanner-text"><span>{{ text }}</span></div></div>…
定制化图标——Element UI 组件图标替换指南
本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换，提供了适用于满足个性化需求的方法和技巧。
引言 Element UI 是一款基于 Vue.js 的流行 UI 组件库，在前端开发中得到广泛应用。然而，在使用 Element UI 的组件时&#…
flex弹性盒模型与阿里图标的使用
华子目录 flex布局flex布局原理flex使用三要素 阿里图标（字体） flex布局
相关学习网站：http://c.biancheng.net/css3/flex.html 1.flex是当前最主流的布局方式：用它布局起来更方便，取代了浮动的作用。 2.浮动布局有缺…
CSS总结第八天 HTML5 + CSS3提高
目标
能够说出 3~5 个 HTML5 新增布局和表单标签能够说出 CSS3 的新增特性有哪些
HTML5新特性
概述
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9 以上版本的浏览…
CSS选择器-CSS3属性
CSS选择器-CSS3属性
持续更新…
1、CSS3的概念和优势
css3概念:是css的升级版本,新增加了一些模块
css3优点:完全向后兼容,可使用新的选择器和属性,能实现新的设计效果CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞…
Vue2向Vue3过度核心技术watch侦听器
目录 1 watch侦听器1.1 作用：1.2 语法：1.3 侦听器代码准备 2 翻译案例-代码实现3 watch侦听器3.1 语法3.2 需求3.3 代码实现3.4 总结 1 watch侦听器 1.1 作用：
监视数据变化，执行一些业务逻辑或异步操作
1.2 语法：…
requestAnimationFrame(RAF)
1、RAF介绍
requestAnimateFrame（RAF）动画帧，是一个做动画的API。 如果想要一个动画流畅，就需要以60帧/s来更新视图，那么一次视图的更新就是16.67ms。 想要达到上述目标，可以通过setTimeout定时器来手动控…
css3滤镜属性filter让网页变黑白
今天是特殊的日子，抗击疫情全国哀悼日，向英雄们致敬，一路走好！应该发现了今天很多网站页面都是黑白色的，我的博客今天都是黑白色，用css3滤镜属性filter让网页马上变黑白，一行代码就搞定。
在你…
纯CSS杂志封面折叠效果
如图所示，这是一个杂志封面图的折叠效果，折叠前后的图片内容完全不违和，瞬间对这个图片内容的排版设计很是称赞，但这块不再本次文章的讨论范围，本次文章是要用纯CSS实现这个折叠效果。
按图片的效果进行代码还原很多方…
H5 + C3基础（八）（3d转换 位移 旋转）
3d转换 位移 & 旋转 定义位移透视 perspective透视和Z轴使用场景 旋转子元素开启3d视图示例 小结 定义
3d转换在2d转换中增加了一个z轴，垂直于屏幕，向外为正，向内为负。
位移
在2d位移的基础上增加了 translateZ(z); 在Z轴上的位移 t…
transition、transform 区别和应用
先说应用
1.动画循环，复杂的动画用animation。在遇到很复杂的动画那就用animation。因为animation可以定义关键帧。那你就可以控制每一帧的动画效果。
2.简单的动画，事件触发用transition。当页面中的动画是自己执行的那么我们考虑用animation…
前端三剑客中简单的两个：HTMLCSS
HTML&CSS 1，HTML1.1 介绍1.2 快速入门1.3 基础标签1.3.1 标题标签1.3.2 hr标签1.3.3 字体标签 1.4 图片、音频、视频标签1.5 超链接标签1.6 列表标签1.7 表格标签1.8 布局标签1.9 表单标签1.9.1 表单标签概述1.9.2 form标签属性1.9.3 代码演示 1.10 表单项标签 …
CSS魔术师Houdini，用浏览器引擎实现高级CSS效果
开门见山，直接上货 🔍 CSS Houdini是什么？ “Houdini”一词引用自“Harry Houdini”，他是一位20世纪的著名魔术师，亦被称为史上最伟大的魔术师、逃脱术师及特级表演者。 我们都知道，浏览器在渲染网页显示样…
css让多个盒子强制自动等宽
1.width: calc( 100 / n% )
2.display:flex; flex:1;width:100px;
3.display:grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 但是其中某一个内容较长的时候 会破坏1:1:1的平衡 这个时候发现附件名字过长导致不等比例，通过查看阮一峰flex文…
CSS流光按钮-圆形
主要思路
仅保留一条边框 border-radius 50%drop-shadow动画 animation keyframes
代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …
【前端从0开始】HTML5+CSS3基础语法
html5发展
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持 h5添加css hack，css zoom知识点
特性
新的特殊内容元素…
css-pseudo-class锚伪类
CSS 伪类用于向某些选择器添加特殊的效果。
属性描述:active向被激活的元素添加样式。:focus向拥有键盘输入焦点的元素添加样式。:hover当鼠标悬浮在元素上方时，向元素添加样式。:link向未被访问的链接添加样式。:visited向已被访问的链接添加样式。:first-child向…
JavaScript-----个性名片案例展示
目录
前言： 效果展示
代码：
html代码 CSS代码
图片资源： 前言： 今天我们就通过刚刚学习的JavaScript知识点以及前面学习了的html和CSS的知识点去做一个小作品，这是一个个性名片的案例（有代码资源和图片…
【ES】笔记-箭头函数的实践于应用场景
箭头函数的实践于应用场景
需求-1 点击 div 2s后颜色变成[粉色]从数组中返回偶数的元素
需求-1 点击 div 2s后颜色变成[粉色]
html
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport…
tab切换，左右加箭头，点击箭头实现tab切换
和正常tab切换一样原理，点击箭头多了步计算
<template><div><div class"tab-container"><p>{{projectName}}</p><div class"banner"><div v-for"(tab, index) in tabs" :key"index&quo…
CSS3技巧36：backdrop-filter 背景滤镜
CSS3 有 filter 滤镜属性，能给内容，尤其是图片，添加各种滤镜效果。
filter 滤镜详见博文：CSS3中强大的filter(滤镜)属性_css3滤镜_stones4zd的博客-CSDN博客
后续，CSS3 又新增了 backdrop-filter 背景滤镜。
backdr…
案例:实现TodoLis（尚硅谷）
是做完后再记录的，前端我主要是要了解下，所以这里记录的比较浅 由于是做完后记录，所以你cv后的代码的效果并不一定和我展示的效果图一样 静态页面
先来实现静态页面，再考虑动态页面 组件拆分 说明(实际的组件名不是和下面一样的…
前端开发中，文本单行或多行溢出使用省略号显示
1.文本单行溢出使用省略号显示 关键代码如下： .box1{width: 200px;height: 30px;line-height: 30px;margin: 0 auto;background-color: rgba(220, 220, 220, 0.751);/* 单行文本超出隐藏 用省略号代替 */white-space: nowrap;overflow: hidden;text-overflow: ellip…
H5+Css3文本溢出添加省略号（包括插件）
一、单行 溢出隐藏 添加省略号
p{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
}二、多行 溢出隐藏 省略号
p{display: -webkit-box;-webkit-box-orient: vertical;/*设置省略号在容器第四行文本后*/-webkit-line-clamp: 4; overflow: hidden;
}局限性&…
vue3前端开发-flex布局篇
文章目录 1.传统布局与flex布局优缺点传统布局flex布局建议 2. flex布局原理2.1 布局原理 3. flex常见属性3.1 父项常见属性3.2 子项常见属性 4.案例实战(携程网首页) 1.传统布局与flex布局优缺点
传统布局
兼容性好布局繁琐局限性，不能再移动端很好的布局
flex布…
HTML5+CSS3+JS小实例：鼠标控制飞机的飞行方向
实例：鼠标控制飞机的飞行方向
技术栈：HTML+CSS+JS
效果： 源码：
【html】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" conten…
移动 Web 第一天
目标：使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。 文章目录 01-平面转换简介平移定位居中案例-双开门旋转转换原点案例-时钟多重转换缩放案例-播放特效倾斜 02-渐变线性渐变案例-产品展示径向渐变 03-综合案例导航-频道箭头旋转频道列表 渐变按钮搜索…
jq弹窗拖动改变宽高
预览效果 <div classtishiMask><div class"tishiEm"><div id"coor"></div><div class"topNew ismove"><span class"ismove">提示</span><p onclick"closeTishi()"></p&…
CSS3实现上下拉长加载动画效果
上下拉长加载动画效果
<!DOCTYPE html>
<html><head><style>.container {display: flex;justify-content: center;align-items: center;width: 150px;height: 150px;margin: 50px auto;}.rectangle {width: 20px;height: 50px;background-color: #02A…
HTML5+CSS3小实例：纯CSS实现彩虹倒映水面的唯美背景
实例：纯CSS实现彩虹倒映水面的唯美背景
技术栈：HTML+CSS
效果： 源码：
【html】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" …
HTML5与CSS3实现动态网页（下）
js
完整的javascript 是有ECMAScript （语法）
Browser Objects (DOM BOM ) 特性组成的。
// 单行注释
/**/ 多行注释
ECMASxript 中的一切 (变量 函数名和操作符) 都区分大小写
1：什么是标识符 变量 函数 属性的名字 或者函的参数
2&…
CSS3有哪些新特性
CSS3 引入了许多新特性，以增强样式设计和页面布局的能力，提供更多的视觉效果和交互性。以下是一些 CSS3 中的新特性：
圆角边框（Border Radius）：圆角的边框，而不是传统的方形边框。
<!DOCTY…
src与href的区别？
src和href的区别有以下几点1：
用途不同：src用于嵌入到文档中的资源，href用于链接到文档之外的资源。引用方式不同：src引用的资源是必需的，href引用的资源是可选的。对文档的影响不同：src会直接影响文档的加…
CSS 属性值计算过程
目录 例子1，确定声明值2，层叠冲突2.1，比较源重要性2.2，比较优先级2.3，比较源次序 3，使用继承4，使用默认值其他 例子
我们来举例说明<h1> 标签最终的样式：
<div><h1…
web之利用延迟实现复杂动画、animation
文章目录 效果图htmlstyleJavaScript 效果图 html
<div class"container"><div class"ball"></div><input type"range" min"0" max"1" step"0.01" />
</div>style
body {display…
【web前端特效源码】使用HTML5+CSS3制作一个会动的loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果： 【web前端特效源码】使用HTML5+CSS3制作一个会动的loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图： 完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><titl…
Vue2项目练手——通用后台管理项目第三节
Vue2项目练手——通用后台管理项目 首页组件布局个人信息展示使用的组件App.vueHome.vue 列表信息展示使用的组件Home.vue 订单统计Home.vue 数据的请求axios的基本使用二次封装文件目录src/api/index.jssrc/utils/request.jsHome.vue 首页组件布局
个人信息展示
使用的组件 …
HTML5+CSS3+JS小实例：科技感满满的鼠标移动推开粒子特效
实例：科技感满满的鼠标移动推开粒子特效
技术栈：HTML+CSS+JS
效果： 源码：
【html】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport&qu…
css3对文字标签不同宽，不同高使用瀑布流对齐显示
<div class"wrapper" style"padding: 0;"><span class"wf-item task-tags text-center" v-for"(item,index) in data.categorys" :key"index">{{ item }}</span>
</div>/* 名称瀑布流显示 */
.wrap…
基于JavaScript粒子流动效果
这是一个HTML文件，主要包含了一些CSS样式和JavaScript代码，用于创建一个动画效果。 在CSS部分，定义了一些基本的样式，包括页面的背景颜色、位置、大小等。特别的，定义了两种球形元素（.ball_A 和 .ball_B&am…
如何快速生成一个H5滑动的卡片（单页和分页都有）
单页 <ul class"combo"><li v-for"(item, index) in arr" :key"index"><div class"combo-name">{{ item.A }}</div><div class"combo-price">{{ item.B }}</div><div class"co…
纯css实现奥运五环、3D平移、旋转、扭曲
文章目录 前言效果图htmlcss 前言 1、不是真正的五环，因为通过形变得来。 2、不同电脑显示器的像素不同，显现的效果不同。 3、不推荐使用此方法。 4、主要通过旋转加平移的方式实现。 效果图 html
<div class"olympic_rings"><span …
vue2踩坑之项目：生成二维码使用vue-print-nb打印二维码
1. vue2安装 npm install vue-print-nb --save vue3安装 npm install vue3-print-nb --save 2. //vue2 引入方式 全局 main.js import Print from vue-print-nb Vue.use(Print) ------------------------------------------------------------------------------------ //vue2 …
【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法)
插槽
插槽是什么？ 在 Vue 2 中，插槽（slot）是一种用于定义组件内部内容分发的机制。它允许你将组件中的一部分内容替换为用户自定义的内容，并在组件内部进行渲染。
通过在组件模板中使用 <slot></slot> 标…
end value has mixed support, consider using flex-end instead
这是因为 应该用flex-end,不应该用end 所以将所有的都改好之后，就不会再报这个错了
CSS那些厉害的布局方法
1.超级居中（水平和垂直都居中）
只需要给外层父级元素加上下面代码
.parent{display: grid;place-items: center;
}
2.经典的sidebar布局
.parent{display: grid;grid-template-columns: minmax(150px,25%) 1fr;
}
3.固定的header和footer࿰…
微信小程序——CSS3渐变
SS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：
说明
1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向࿱…
CSS 文字特效运用目录
主要是记录文字相关的特效实践案例和实现思路。
章节名称完成度难度文章地址完整代码下载地址创意填充文本悬停效果完成一般文章链接代码下载发光文字跟随鼠标完成一般文章链接代码下载酷炫的文字悬停效果完成一般文章链接代码下载输入文本波形动画完成一般文章链接代码下载
css实现滚动条一直显示，并且实现滚动条样式的修改
css实现滚动条一直显示，并且实现滚动条样式的修改
自带的滚动条只有当鼠标移上去的时候才会显示，其他时候隐藏，这样用户很难看出这个是能划动的，这就需要滚动条一直显示在页面上，并且需要按照自己一定的样式去修改。 …
css3 中calc的用法？
在CSS中，calc() 函数用于执行数学计算，以便在CSS属性中动态计算值。这个函数通常用于定义元素的宽度、高度、边距、填充等属性，以便根据其他属性的值来计算最终结果。
calc() 函数的语法如下：
property: calc(expression);其中 …
为什么日本的网站看起来如此不同
首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 😜 分享个人创业过程中的趣事 该篇文章讨论了日本网站外观与设计的独特之处。作者指出日本网站设计与西方设计存在明显差异。文章首先强…
【全面】CSS3新增了哪些新特性？
目录
一、选择器的扩展
1. 属性选择器
2. 伪类选择器
3. 伪元素选择器
二、盒子模型的增强 1. box-sizing属性
2. 边框圆角（border-radius）
3. 盒阴影（box-shadow）
三、过渡和动画效果
1. 过渡效果
2. 动画效果
四、响…
详细剖析外边距折叠，轻松摆脱margin带来父子元素和相邻元素外边距塌陷
外边距区域 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度和 margin-box 高度； 外边距区域的大小由margin-top、margin-right，margin-bottom，margin-left，和简写…
毛玻璃态按钮悬停效果
效果展示 页面结构组成
通过上述的效果展示可以看出如下几个效果
毛玻璃的按钮按钮上斜边背景及动画按钮上下边缘的小按钮和小按钮动画
CSS3 知识点
backdrop-filter 属性transition 属性transform 属性
实现基础按钮结构
<div class"btn"><a href&qu…
CSS3高仿百度外卖头像波浪效果
好Q啼的头像，说好的波浪捏，浪到哪里去了，别急，静静欣赏动态效果：链接：https://pan.baidu.com/s/1gfAM3y7 密码：wxn6
技术： 1、css water wave 实现波浪效果 2、css translateY 实…
CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果
一、简介
今天在网上看到了一条言论说：子元素posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果。虽然这个场景，我还没有在实际工作中用到过，但本着多学多记、有备无患的原则…
css3图片滑过发光
现在css3渐渐的被项目开发中考虑进来了，各大网站在新做的项目中都纷纷应用了css3的一些差异体验。我前几天逛易迅看到个鼠标滑过的一个过渡效果，虽然这个在很早百度音乐听站上面就已经有了，但是这个我感觉更简洁。
Demo：http://j…
CSS 之 z-index 属性详解
一、简介
本文主要是对z-index属性进行详细的讲解，包括其使用场景、属性效果、适用范围等等。本博客的所有代码执行的浏览器环境，都是以Chrome浏览器为准。
1、属性作用
z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值…
RecyclerView 整个itemView 点击事件没有反应
一、问题 RecyclerView 整个itemView 点击事件没有反应 二、原因 因为item 最外层是一个阴影，所以我用一个阴影布局包裹在最外层，然后里面又用了约束布局来包裹布局，结果整个item 点击没有反应。 三、解决 给里面那层约束布局做点击事件&…
HTML练习之路07
本次的题目是完成下图所示效果： 首先，我们来分析结构，整体结构是上面有一个图片，下面依次有两个段落文本，且两段文本中都有特殊标记的字符，整体结构还是比较简单；
接下来，我们来搭建…
3-css高级特效-2
01-空间转换
空间转换简介
空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。空间转换也叫 3D转换属性：transform 平移
transform: translate3d(x, y, z);
transform: translateX();
transfor…
Grid布局宽度自适应中auto-fit和auto-fill的区别
文章目录概述实例Html代码Css代码使用auto-fill使用auto-fit总结概述
CSS Grid 有个非常强大的功能 —— 模式填充（repeat-to-fill）列然后对内容进行自动布局。也就是说，开发者只需要指定列数，自适应方面的事情（视口尺…
object-fit，object-position让img标签表现得像背景图那样能自适应和调整显示位置
文章目录 一、object-fit的用法二、object-position的用法 图片在网页中有2种表现形式，使用CSS的background-image或者HTML的img标签来实现。
背景图实现如notion的封面图效果可以使用background-position或者background-size轻松实现，首先来看看notion…
CSS3与HTML5
box-sizing content-box：默认，宽高包不含边框和内边距 border-box：也叫怪异盒子，宽高包含边框和内边距 动画：移动translate，旋转、transform等等 走马灯：利用动画实现animation：from…
创意填充文本悬停效果
效果展示 CSS 知识点
text-shadow 属性实现 3D 文字clip-path 属性的运用
实现页面基础结构布局
<div class"container"><!-- 使用多个h2标签来实现不同颜色的3D文字 --><h2>Text</h2><h2>Text</h2><h2>Text</h2>…
CSS3实现动画加载效果
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>加载效果</title><link rel"style…
解决下拉菜单的过渡问题
解决下拉菜单的过渡问题
使用 js 实现
基本布局如下
.text-select {width: 500px;box-sizing: border-box;
}.text {padding: 0 8px;margin: 0;width: 500px;height: 35px;border-radius: 5px;border: 1px solid #23aaf2;box-sizing: border-box;outline: #0075b7;
}.select…
CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器
一、子级选择器
CSS3 子级选择器是一种选择器，可以用来选择指定元素的直接子元素。它是通过 “>” 符号来实现的。
语法格式如下：
父级元素 > 子级元素 {/* 属性值 */
}其中，父级元素是要选择的元素的直接父元素，子级元…
仿制 Google Chrome 的恐龙小游戏
通过仿制 Google Chrome 的恐龙小游戏，我们可以掌握如下知识点：
灵活使用视口单位掌握绝对定位JavaScript 来操作 CSS 变量requestAnimationFrame 函数的使用无缝动画实现
页面结构 实现页面结构
通过上述的页面结构我们可以知道，此游戏中…
CSS结构选择器的使用
结构选择器 style>ul li:first-child {//选出第一个孩子进行变色background-color: blue;}</style><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>…
Vue.js 2 —组件（Component）化编程
一、模块与组件 模块 1. 理解 : 向外提供特定功能的 js 程序, 一般就是一个 js 文件 2. 为什么 : js 文件很多，很复杂 3. 作用 : 复用 js, 简化 js 的编写, 提高 js 运行效率 组件 组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装…
2023/10/15
文章目录 1.uniapp之Vue2升Vue3值得注意的几点1.1 页面生命周期的使用1.2 引入资源的方式 2. 浏览器本地存储之Cookie和webStorage3. CSS变量 var()的用法4. CSS之实现线性渐变背景5. 图片无法和文字对齐的正确解决方案6. 使用正则处理接口返回的富文本内的图片7. transition实…
H5+Vue3编写官网，并打包发布到同一个域名下
背景
因为html5有利于搜索引擎抓取和收录我们网站更多的内容，对SEO很友好，可以为网站带来更多的流量,并且多端适配，兼容性和性能都非常不错，所以使用h5来编写官网首页。 因为用户个人中心可以通过官网跳转，不需要被浏…
前端vue实现页面加水印文字 单个页面所有页面加水印（更新版）
随着前端技术的不断发展，组件化开发已经成为现代前端开发的重要趋势。组件化开发可以将大型复杂的系统分解为可重用的独立组件，实现模块解耦、代码复用和开发效率提升。本文将介绍一种基于Vue技术的前端页面加水印文字的组件化实现方式。
一、背景介绍 …
vue 实现数字验证码功能
需求：写了一个 手机发送验证码后 输入固定验证码的功能 封装成一个组件,如下:
<template><div class"conts"><div class"box"><div class"code_list"><div :class"[ code_item, hideIndex 0 ? co…
HTML5+CSS3小实例：网页底部间隔波浪动画特效
实例：网页底部间隔波浪动画特效
技术栈：HTML+CSS
效果： 源码：
【html】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content…
精灵图和 base64 之间如何选择?
在前端开发中，精灵图（Sprite Image）和 Base64编码的图像（Base64 Image）都是用于优化网页性能和加载时间的常见技巧。它们各自有优点和限制，选择哪种方法取决于具体的应用场景和需求。以下是对精灵图和Base6…
CSS之Flex布局的详细解析
Flex布局 目标：熟练使用 Flex 完成结构化布局 01-标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。 02-浮动
基本使用
作用：让块元素水平排列…
毛玻璃员工卡片悬停效果
效果展示 页面结构组成
通过效果展示图，我们可以看出页面布局比较常规，最核心的就是卡片，当鼠标没有悬停在卡片上时，文字和头像处于半透明状态，当鼠标悬停在卡片上是，底部会展示社交图标。
CSS 知识点
b…
请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？
解析:
CSS3的Flexbox（弹性盒布局模型）是一种强大的布局技术，用于创建灵活和响应式的布局。它解决了传统CSS布局模型在垂直和水平居中、等高列、自适应宽度等方面的一些挑战，使开发人员能够更轻松地构建各种复杂的布局。在下面的详…
CSS 效果 圆形里一个文字居中
效果实现源码：
宽度，高度必须确认，且相等
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>Title</title><style>.circlew {width: 45px;height: 45p…
前端学成在线项目详细解析二
12-banner区域-课程表布局 HTML布局
<div class"right"><h3>我的课程表</h3><div class"content">1</div>
</div> CSS样式
/* 课程表 */
.banner .right {margin-top: 60px;width: 218px;height: 305px;background-…
水性杨花：揭秘CSS响应式界面设计，让内容灵活自如，犹如水之变幻
🎬 江城开朗的豌豆：个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》
⛺️ 生活的理想，就是为了理想的生活 ! 目录 ⭐ 专栏简介 📘 文章引言
一、是…
前端移动web高级详细解析三
模拟移动设备，方便查看页面效果 屏幕分辨率
分类： 物理分辨率：硬件分辨率（出厂设置） 逻辑分辨率：软件 / 驱动设置
结论：制作网页参考 逻辑分辨率 视口
作用：显示 HTML 网页的区…
HTML5生成二维码
H5生成二维码 前言二维码实现过程页面实现关键点全部源码 前言
本文主要讲解如何通过原生HTML、CSS、Js中的qrcodejs二维码生成库，实现一个输入URL按下回车后输出URL。文章底部有全部源码，需要可以自取。 实现效果图： 上述实现效果为&#…
lable与input连用特殊动作效果
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>/*label 可以扩…
css：button实现el-radio效果
先看最终效果：
思路：
一、
首先准备好按钮内容：const a [one,two,three] 将按钮循环展示出来，并设置一些样式，将按钮背景透明：
<button v-for"(item,index) in a" :key"in…
Python之前端的学习
前端学哪些内容 1. HTML # 网页的骨架、只是负责显示一些内容，但是显示出来的内容不好看，没样式 2. CSS # 对网页骨架的美化、让网页变得更加的好看而已 3. JavaScript # html、css都是不能动的，静态的，js就是让网页能够动起来…
web前端常见开发工具汇总 你用过几个？
搬运旗下公众号的内容~ 目录
1.记事本
2.Visual studio code
3.Hbuilder
4.Eclipse
5.Webstorm
6.Notepad 随着信息时代的不断进步，互联网在人类社会中所占的地位愈发举足轻重。大大小小的网站，构成了如今光怪陆离的网络社会。我们知道，…
canvas基础2 -- 形状
七巧板
七巧板本质上就是 分别由几个直线 拼成一个个图形，再将这些图形结合起来
var tangram [{ p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" },{ p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], col…
CCS3列表和超链接样式
在默认状态下，超链接文本显示为蓝色、下画线效果，当鼠标指针移过超链接时显示为手形，访问过的超链接文本显示为紫色；而列表项目默认会缩进显示，并在左侧显示项目符号。在网页设计中，一般可以根据需要重新定…
CSS3 中 transition 和 animation 的属性分别有哪些
Transition 属性：
transition 属性用于定义元素在状态改变时从一个样式转换到另一个样式的过渡效果。它包含以下几个属性： • transition-property：指定过渡效果应用的 CSS 属性名称，多个属性可以用逗号分隔。 •…
CSS3网页布局基础
CSS布局始于第2个版本，CSS 2.1把布局分为3种模型：常规流、浮动、绝对定位。CSS 3推出更多布局方案：多列布局、弹性盒、模板层、网格定位、网格层、浮动盒等。本章重点介绍CSS 2.1标准的3种布局模型，它们获得所有浏览器的全面、一致…
解决margin-top导致的塌陷
什么是margin-top塌陷
若要使子元素距离父元素顶部有一定距离，如果只给子元素设置margin-top属性，结果发现父元素顶部出现位移，子元素相对父元素没位移，这就是margin-top导致的塌陷。
.fatherplus{width: 600px;height: 600px;b…
js写轮播图，逐步完善
目录 1、自动轮播
2、点击更换 3、自动播放加左右箭头点击切换
4、完整版轮播图 1、自动轮播
用定时器setInterval()来写，可以实现自动播放
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><met…
跟随鼠标的粒子特效分享
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。
广告打完，我们进入正题，先看效果： 上代码：
html, body {padding: 0;margin: 0;overflow: hidden;
}import * as PIXI from https://cdn.skypack.dev/pixi.js@7.2.…
css 实现文字流光效果
经过调研发现大多滑块验证码中，有一些文字流光效果，因此在这里简单实现一下。
实现主要利用background 渐变背景以及backgorund-clip:text实现。具体代码如下
css部分
.slide {width: 300px;height: 40px;border: 1px solid #ccc;border-radius: 8px;…
css3实现动态心电图折线
css3实现动态心电图折线 M（moveto）：需要两个参数（x轴和y轴坐标，移动到的点的x轴和y轴的坐标L（lineto）：需要两个参数（x轴和y轴坐标），它会在当前位置…
CSS3新特性(2-1)
CSS3新特性 前言border：radius标签属性选择器box-sizing透明度 前言
本文主要讲解CSS3有哪些新的特性和内容，那么好，本文正式开始.
border：radius
新增了圆角边框概念，可以通过具体数值或者百分比，来让边…
CSS新特性（2-2）
CSS新特性（2-2） 前言box相关box-shadow background背景rgba颜色与透明度transform:rotate(Xdeg) 2D旋转transform:tranlate 平移 前言
本文继续讲解CSS3其他的新特性，想看之前新特性点击这里，那么好本文正式开始。
box相关
box…
品优购首页快捷导航部分
目录
制作favicon图标
seo优化 顶部布局.shortcut
search模块
hotword模块
shopcar模块 制作favicon图标
1 把品优购图标切成png图片 2 png图片转换为ico图标，比特虫：http://www.bitbug.net/ 3 <link rel"shortcut icon" href"f…
阿里巴巴矢量图标转化为字体图标教程
第一步：打开阿里巴巴矢量图标网站，搜索想要的icon
https://www.iconfont.cn/?spma313x.search_index.i3.2.19f33a81gfo5r0 第二步：添加购物车，并且下载代码。如下图： 下载代码解压后得到一下文件： 第三步…
给WordPress 自带的搜索功能添加过滤只搜索文章的标题
如果想让 WordPress 自带的搜索功能只搜索文章标题，让搜索结果更加精确（其实WordPress 自带的搜索功能本来模糊查找就很弱），可以将下面的代码添加到当前主题functions.php中： 用过滤器：posts_search 就可以…
【CSS】div 盒子居中的常用方法
<body><div class"main"><div class"box"></div></div>
</body>绝对定位加 margin: auto; ：
<style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;positio…
前端小案例 | 喵喵大王立大功 | 一个带便利贴功能的todolist面板
文章目录 📚html📚css📚js🐇stickynote.js🐇todolist.js🐇clock.js 📚html
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><m…
HTML5+CSS3实现华为鸿蒙官网（课程设计完整版）
前言
这是一个用HTML5CSS3实现的一个华为鸿蒙官网。 文章结构相对简单，容易理解。适合学生当课程大作业使用！ 同时如果因要满足作业要求而需要修改内容的也可以联系我！ 下面是一些其他页面的作品，同样希望能给大家带来帮助&#…
CSS3制作3D爱心动画
1、什么是CSS css，即层叠样式表的简称，是一种标记语言，有浏览器解释执行用来使页面变得更美观。
2、选择器 css3中新增了一些选择器，如下： 3、新样式
边框 css3新增了三个边框属性，分别是： bo…
vue项目中订单完成提交按钮动画
1. 动画1
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><title>Order</title><!-- <link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/re…
HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效
实例：九宫格图片鼠标移入移出方向感知特效
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport&…
v-model(双向数据绑定)自动收集数据
v-model 是 Vue 中一个常用的指令，用于实现表单元素与数据的双向绑定。 它的实现原理主要基于以下两个方面：
语法实现： v-model 实际上是 Vue 对 :value 和 input 两个属性的语法糖。当我们在组件中使用 v-model 指令时，Vue 会根…
CSS中样式冲突及选择器权重问题
一：样式冲突
通过不同的选择器选中同一个元素，进行一样的样式设定，发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定
二：选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器…
前端学习系列之CSS
目录
CSS
简介
发展史
优势
基本语法
引用方式
内部样式
行内样式
外部样式
选择器
id选择器
class选择器
标签选择器
子代选择器
后代选择器
相邻兄弟选择器
后续兄弟选择器
交集选择器
并集选择器
通配符选择器
伪类选择器
属性选择器
CSS基本属性
优…
CSS BFC特性和应用
目录 1，介绍2，BFC布局规则3，创建BFC4，BFC应用1，浮动子元素使父级高度坍塌2，非浮动元素被浮动元素覆盖3，margin 合并1，父子 margin 合并：父级和第1个/最后1个子元素2&…
案例 - 拖拽上传文件,生成缩略图
直接看效果 实现代码
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>拖拽上传文件</title>&l…
CSS3 修改滚动条样式
上图： 上代码：
/* 修改垂直滚动条 */
.right-list::-webkit-scrollbar {width: 2px; /* 修改宽度 */height: 5px; /* 修改高度 */
}
/* 修改滚动条轨道背景色 */
.right-list::-webkit-scrollbar-track {background-color: #f1f1f1;
}
/* 修改滚动条滑块…
OpenLayer库的学习入门总结
前言：
作者跟随视频学习ol库的调用与功能实现，进行初步总结与回顾。
声明：参考新中地的文档，进行作者日后复习再次学习的简化。
1、WebGIS简介
GIS的核心概念
GIS（Geographic Information System）是一…
css3 clip-path剪切图片
大致看了一下，反正以后用到就慢慢调吧
剪切四个角 clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); 三角形 clip-path: polygon(50% 0,0 100%, 100% 100…
css实现正六边形嵌套圆心
要实现一个正六边形嵌套圆心，可以使用CSS的::before和::after伪元素以及border-radius属性。以下是具体的解析和代码：
使用::before和::after伪元素创建正六边形。设置正六边形的背景色。使用border-radius属性使正六边形的内角为60度。在正六边形内部创…
玄子Share-CSS3 弹性布局知识手册
玄子Share-CSS3 弹性布局知识手册
Flexbox Layout（弹性盒布局）是一种在 CSS 中用于设计复杂布局结构的模型。它提供了更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布
主轴和交叉轴
使用弹性布局，最重要的一个概念就是主轴与…
CSS3技巧36：让内容垂直居中的三种方式
让内容垂直居中，是一个很重要的应用情景，在很多场合都会需要。这也是面试的时候，一些考官喜欢拿来初面的小题目。
这里，小结下让内容垂直居中的三种方式。
当然，读者如果有更好的方法，也可以提出来。 基本…
HTML5+CSS3+Vue小实例：饮料瓶造型文字旋转特效
实例：饮料瓶造型文字旋转特效
技术栈：HTML+CSS+Vue
效果： 源码：
【HTML】【JS】 <!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" …
css3实现类似地图定位循环扩散光圈效果
1.效果图,重点opacity,animation,transform:scale 2.html
<div class"icon-warnCom"><icon class"icon-warns"><i class"dot"></i><i class"pulse"></i></icon></div><div class…
HTMLCSS旋转的圣诞树源码附注释
css代码附注释
*{/* 初始化 */margin: 0;padding: 0;
}
body{align-content: center;align-items: center;background-color: #9f0000;
CSS3多列分页属性
CSS3多列
Firefox浏览器支持该属性的形式是-moz-column-count，而基于Webkit的浏览器，例如Safari和Chrome，支持该属性的形式是-webkit-column-count column-count：该属性定义多列文本流中的栏数 语法：column-count:int…
jquery Tab切换，CSS3制作发光字
jquery Tab切换，CSS3制作发光字 代码如下
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta ht…
HTML网页设计 科幻风格登录界面
成品如下 HTML代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevic…
利用HTML和CSS3新特性实现太极图旋转
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>太极图</title><style>.box{box-sizing: border-box;width: 400px;height: 400px;margin: 50px auto;border: 1px solid black;position: …
Flex布局---看一篇就够了
1. flex布局是什么？ flex是flexible Box的缩写，用来为盒装模型提供的最大的灵活性，任何一个容器都可以指定为flex布局。Flex布局称为flex容器，所有的子元素为容器成员Flex项目（flex item）； 当为…
【CSS3】第4章 CSS3选择器
学习目标 熟悉属性选择器的用法，了解不同属性选择器的功能。 掌握关系选择器的用法，能够使用关系选择器选取父标签中嵌套的子标签。 掌握结构化伪类选择器的用法，能够使用不同功能的结构化伪类选择器精准控制标签样式。 掌握状态化伪类选择…
编程笔记 html5cssjs 012 HTML分块
编程笔记 html5&css&js 012 HTML分块 一、HTML 块级元素二、HTML 内联元素三、HTML <div> 元素四、HTML <span> 元素五、HTML<article>元素六、<article>元素和<div>元素的区别与联系小结 像报纸排版一样，很多时候需要把平面…
【CSS3】第3章 CSS3入门
学习目标 了解CSS的功能和作用，能够列举CSS的应用示例。 熟悉CSS的发展历史，能够厘清CSS1、CSS2和CSS3三者的关系 掌握CSS的样式规则，能够按照CSS样式规则正确书写CSS样式。 掌握CSS样式表的引入方式，能够在网页中引入CSS样式。…
Vue纯CSS实现掷色子
效果图： 实现代码 直接利用CSS3动画实现的效果，无js代码。 <template><div class"wrap"><input type"checkbox" id"roll"><label for"roll"><div class"content"><…
HTML5+CSS3③——无语义布局标签、画盒子、CSS定义、CSS引入方式
目录
无语义布局标签
画盒子
CSS定义
小结
CSS引入方式
小结 无语义布局标签 画盒子 CSS定义 小结 CSS引入方式 小结
HTML5+CSS3+JS小实例：过山车文字动画特效
实例：过山车文字动画特效
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】【JS】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" cont…
HTML5 和 CSS3 新特性（常用）
HTML5 的新特性
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 些新特性。 HTML…
编程笔记 html5cssjs 018 HTML颜色
编程笔记 html5&css&js 018 HTML颜色 一、HTML 颜色二、HTML中设置颜色值三、颜色名称和颜色值 颜色是视觉中重要因素，尤其是处理人机界面中，更是要处理颜色设置和搭配。在网页中，提供了设置颜色的一些方案，需要我们认真学…
静态网页设计——个人简介网站
前言
使用经典前端三件套HTMLCSSJavascript编写了一个关于个人简介的静态网页，可以根据自己的需要，十分简单的进行修改。
首页
首页由上方的菜单栏以及菜单栏下面的轮播图组成，再往下走，是关于自己的兴趣爱好的部分，…
编程笔记 html5cssjs 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性 Action 属性Target 属性Method 属性Autocomplete 属性Novalidate 属性所有 <form> 属性的列表 表单和其他HTML元素一样，拥有很多属性，不同的属性值，就呈现不同的表单效果或功能。本节介…
编程笔记 html5cssjs 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素 <input> 元素 最重要的表单元素是 <input> 元素。<select> 元素（下拉列表）<option> 元素定义待选择的选项。<textarea> 元素<button> 元素HTML5 表单元素 表单是由…
前端实战第一期：悬浮动画
悬浮动画 像这样的悬浮动画该怎么做，让我们按照以下步骤完成 步骤： 先把HTML内容做起来，用button属性创建一个按钮，按钮内写上悬浮效果 <button classbtn>悬浮动画</button>在style标签内设置样式,先设置盒子大小&…
编程笔记 html5cssjs 011 HTML内连框架
编程笔记 html5&css&js 011 HTML内连框架 一、内连框架（一）意义（二）属性 二、操作注意 接下来要看一下网页内的划分。通过内连框架在当前页面嵌入一个特定内容，是一种特定需要。 一、内连框架
HTML 内联框架元…
element ui图片上传组件封装+校验黑白照片
项目需求是在上传照片的时候，不能上传黑白照片。如果上传的黑白照片需要提示。所以就封装的一个组件，校验照片颜色也是我在网上找到的，但是原文链接找不见了。所以自己改了改封装的一个小功能。 // components/ImageUpload/index.vue
<tem…
dotdotdot插件快速实现多行文本的省略
jQuery.dotdotdot
前言
在“css新增文本样式（完整）”这篇，我们介绍了text-overflow属性省略多余的文本。用text-overflow属性可以直接省略单行文本，但省略多行文本，单独使用CSS是无法实现，今天我们介绍一…
image之间的间隙、button和input之间的间隙
一、image之间的间隙 块级元素包含内联元素如图片文字等时，内联元素默认是和父级元素的baseline（基线）对齐的，而baseline又和父级元素底边有一定的距离（这个距离和font有关，不一定是5px）&#x…
CSS效果（工作中常用）
1、css文字溢出省略号
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略…
第五讲_css元素显示模式
css元素显示模式 1. 元素的显示模式1.1 块元素1.2 行内元素1.3 行内块元素 2. 元素根据显示模式分类3. 修改元素的显示模式 1. 元素的显示模式
1.1 块元素
块元素的特性：
在页面中独占一行，从上到下排列。默认宽度，撑满父元素。默认高度&a…
CSS3渐变属性之重复渐变
重复渐变
在网页设计中，经常会需要在一个背景上重复应用渐变方式的情况，这时就需要使用重复渐变。
重复线性渐变 概念：重复线性渐变只是在线性渐变的基础上加个repeating,代表连续重复的意思
语法：
background:repeating-line…
Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式
Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式 今天在项目中碰到一个 UI 改造的需求，需要根据设计图把页面升级成 UI 设计师提供的设计图样式。 到最后页面改造完了，但是 UI 提供的下拉菜单样式全部是黑色半透明的，只能硬着头皮改了。…
css——box-shadow阴影效果
/* box-shadow：内外阴影(inset:内阴影,水平阴影,垂直阴影,阴影模糊距离,阴影大小,阴影颜色) */box-shadow: 0 0 50px #ccc;
引用来源：box-shadow详解_box-shadow属性详解-CSDN博客
el-table魔改样式出现BUG，表格内容区域出现滚动条
问题：el-table表格内容区域在高度自适应的情况下冒出滚动条 解决办法：
代码排查后发现时我设置了fixed:“xxx” 属性就会导致滚动条出现的问题，不设置则无。
[{ type: index, label: 序号, fixed: left },{ prop: enterprisesName, label: …
css顺时针旋转90°再3D中绕Y轴旋转180°
CSS 顺时针旋转 90 再 3D 中绕 Y 轴旋转 180 的示例代码如下：
div {transform: rotate(90deg) perspective(500px) rotateY(180deg);
}在这个示例中，元素被先进行了 2D 顺时针旋转 90，然后设置了 perspective 属性来定义元素的视角距离&…
【css】划过滚动条，滚动条加宽，划出时，变回原宽度
// 全局的滚动条样式
::-webkit-scrollbar { //滚动条的宽度width: 4px;height: 6px;
}::-webkit-scrollbar-thumb { //滚动条的滑块background-color: rgba(144, 147, 153, 0.6);border-radius: 4px;
}// 内容区滚动条划过加宽
.content>div>div::-webkit-scrollbar {…
我可能是全中国最了解 tailwindcss 的开发者
我可能是全中国最了解 tailwindcss 的开发者
我可能是全中国最了解 tailwindcss 的开发者 前言 预设小工具转化器UI 组件库 开源起始上下求索 开发之始更多的平台继续突破 兴趣还是生计？收获和结语附录
前言
首先，我要对起这样的标题感到抱歉&#x…
CSS3简单运用过渡元素（transition）
CSS3过渡
概念：在CSS3中，我们可以使用transition属性将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”，从而实现动画效果。
CSS3变形（transform)呈现的仅仅是一个结果，而CSS过渡&…
HTML5+CSS3小实例：3D发光切换按钮效果
目录 一、运行效果
图片效果
二、项目概述
三、开发环境
四、实现步骤及代码
1.创建空文件夹
2.完成页面内容
3.完成css样式
五、项目总结
六、源码获取 一、运行效果
图片效果 二、项目概述 这个项目是一个演示3D发光切换按钮效果的网页。按钮由一个开关和一个指…
CSS水平垂直居中(最常见的三种方案flex、grid、absolute)
本文简单介绍一下现代 CSS 中最常见的三种水平垂直居中方案。
html：
<div class"container"><div class"content"></div>
</div>css：
.container {width: 500px;height: 500px;border: 1px solid #000;.…
css实现0.5px宽度/高度显——属性： transform: scale
在大多数设备上，实际上无法直接使用 CSS 来精确地创建 0.5 像素的边框。因为大多数屏幕的最小渲染单位是一个物理像素，所以通常只能以整数像素单位渲染边框。但是，有一些技巧可以模拟出看起来像是 0.5 像素的边框。
这里介绍使用：…
HTML5+CSS3+Vue小实例：彩带圣诞树
实例：彩带圣诞树
技术栈：HTML+CSS+Vue
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><…
第四讲_css常用属性
css常用属性 1. css颜色表示方式1.1 颜色名1.2 rgb 和 rgba1.3 hex 和 hexa1.4 hsl 和 hsla 2. css 常用属性2.1 常用的文本属性2.2 常用的列表属性2.3 常用的边框属性2.4 表格独有属性2.5 常用的背景属性2.6 常用的鼠标属性 1. css颜色表示方式
1.1 颜色名
在css中定义了一些…
编程笔记 html5cssjs 029 HTML图像
编程笔记 html5&css&js 029 HTML图像 一、<img>：图像元素二、支持的图像格式三、属性四、练习小结 图像（图片）是网页的必备元素。 一、<img>：图像元素
<img> HTML 元素将一张图像嵌入文档。
<img …
css3 2D与3D转换
css3 2D与3D转换 前言2D变形旋转变形 rotate()transform-origin属性 缩放变形 scale()斜切变形 skew()位移变形 translate() 3D变形3D旋转 rotateX() | rotateY()perspective属性 空间移动 制作一个正方体结语 前言
网页设计不再局限于平面，而是充满了立体感和动态…
![[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页](https://img-blog.csdnimg.cn/direct/3459348837da4004922ca6eba73cbfcf.png)
[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…
Web Animation API
工作中经常会遇到需要动画的场景，连贯动画都是用CSS实现，，但是如果遇到需要用户互动介入的动画，那纯CSS很比较吃力，也不是不能实现，需要动态修改CSS变量，而且动画容易被JS代码阻塞，导…
CSS常见元素类型 盒子模型
文章目录 常见元素类型块元素内联元素空元素修改元素类型测试元素类型 盒子模型标准文本流:外边距和内边距测试盒子模型 常见元素类型
块元素
常见块元素: div p h1~h6 ul li img 这些元素结束之后自带换行，一行只能存在一个元素，无法横向排列…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-2 常用表单控件
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>常用表单控件</title>
<style>
form {width: 260px;margin: 0 auto;border: 1px solid #ccc;padding: 20px;
}
.right {float: right;
}
</style&g…
CSS3十大滤镜效果详解
滤镜效果
类似于美颜相机、美图秀秀这样的美颜工具，能够让我们轻松地应用多种特效，例如转换为黑白照片、复古风格化、调整亮度等。在之前仅凭CSS几乎很难做到这些效果。 但在CSS3的语法中，所有的这些视觉特效都是通过“filter”属性来快速实…
编程笔记 html5cssjs 026 HTML输入类型（2/2）
编程笔记 html5&css&js 026 HTML输入类型（2/2） 输入类型：date输入类型：color输入类型：range输入类型：month输入类型：week输入类型：time输入类型：datetime输入类型…
【纯CSS特效源码】(一)几款漂亮的文字特效
1.渐变文字
使用background: -webkit-linear-gradient(#d8ecec, #2d888b);定义背景渐变色 并使用-webkit-text-fill-color: transparent;指定了文本字符的填充颜色
<!DOCTYPE html>
<html><style>body {background-color: #111;}#content {position: abso…
【纯CSS特效源码】(二)精美的立体字
1.漂浮感立体 关键处：
text-shadow:2px -2px white, -6px 6px gray;给字体添加了两层shadow，右上角白色提亮，左下角灰色阴影。 参数解释：例子中2px -2px white，代表右上角白色
第一个参数2px：正数表示从左…
第十三讲_css 伸缩盒模型flex
css 伸缩盒模型flex 1. 伸缩盒模型介绍2. 伸缩盒模型的主轴方向3. 伸缩盒模型的主轴换行4. 主轴上的对齐方式5. 侧轴上对齐方式5.1 一行的侧轴上对齐方式5.2 多行的侧轴上对齐方式 6. 伸缩项目的伸缩性6.1 伸缩项目在主轴上的基准长度6.2 伸缩项目的放大6.3 伸缩项目的缩小 7. …
网页设计（八）HTML5基础与CSS3应用
一、当当网企业用户注册页面设计
当当网企业用户注册页面 改版后当当网企业用户注册页面
<!-- prj_8_1.html -->
<!DOCTYPE html>
<html><head><meta charset"UTF-8"><title>当当网企业用户注册页面设计</title><s…
css3 纯代码案例
css3 纯代码案例 前言渐变之美1.1 纯CSS3实现的渐变背景1.2 使用多重颜色和方向打造丰富渐变效果1.3 渐变色停留动画的巧妙运用 纯CSS图形绘制2.1 使用border属性制作三角形、梯形等形状伪类箭头图标2.2 利用transform创建旋转、缩放的图形 浮动的阴影敲代码css准备reset 样式复…
css实现动态水波纹效果
效果如下： 外层容器 (shop_wrap)： 设置外边距 (padding) 提供一些间距和边距 圆形容器 (TheCircle)： 使用相对定位 (position: relative)，宽度和高度均为 180px，形成一个圆形按钮圆角半径 (border-radius) 设置为 50%&…
子元素从左往右排列，均匀分布，自动换行（子元素个数不确定）
经常碰到一些页面，展示不确定个数的卡片，要求从左往右排列，均匀分布，超出指定个数需要换行，如果一行不满指定个数，仍然从左开始排列。 如果每行个数相同，那使用 flex弹性布局，设置 j…
CSS3 弹性盒子属性解析
1、CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有…
如何用CSS3转换、动画制作旋转相册，立方体相册
一、3D转换制作旋转相册 <!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><…
Echarts之gauge表盘的用法
写移动端有一个监测功率的数据展示，要用表盘类型的图示，如下是效果： 四角的数据那是自己写上去的，和echarts没关系，主要是中间的表盘：
drawLine (d) { // 参数d是后台获取的当前功率let myChart …
css3动画制作转动相册
一、CSS3 动画
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 1.CSS3 keyframes 规则
要创建 CSS3 动画，你需要了解 keyframes 规则。keyframes 规则是创建动画。keyframes 规则内指定一个 CSS 样式和动画将逐…
element ui时间格式时间戳根据时间格式显示
问题：页面通过后端获得的时间戳
先引入moment.js，具体自己百度搜索这个依赖
<script src"/vue/moment.js"></script>
页面代码：<el-table-column prop"sadTradedate" label"费用产生日期" …
设置div的文字在最右侧
效果
style"float:right;margin-right:8px;"
//或者
style"margin-right:8px;height:20px;text-align:right"
CSS 背景图片水平平铺
CSS 背景图片水平平铺 美工切的细长的图，水平平铺作为背景 body { margin: 0; background:url("<%basePath%>/static/images/background.png") repeat-x 0 0; }
css filter(滤镜)效果；图片模糊、灰度、透明、色相旋转等等
通过css能对图片进行哪些操作呢？blur(px) 给图像设置高斯模糊brightness(%)使其看起来更亮或更暗contrast(%)调整图像的对比度drop-shadow()给图像设置一个阴影效果hue-rotate(deg)给图像应用色相旋转invert(%) 反转输入图像opacity(%) 转化图像的透明程度saturate(…
CSS Day9-CSS新样式
9.1 背景相关属性 背景图片 background-image url引入图片地址 展示特点：由上到下，由左到右依次排列 背景图大小 background-size background-size：宽 高；（相比这个最优） background-size：cover…
编程笔记 html5cssjs 008 HTML图片
编程笔记 html5&css&js 008 HTML图片 一、HTML 图像二、HTML 图像- Alt属性三、HTML 图像- 设置图像的高度与宽度四、支持的图像格式五、对齐设置六、操作小结 和印刷品一样，网页上不仅要有文字，还要有图片和声音、视频、绘画等媒体形式。这一节…
2024新年烟花代码完整版
文章目录 前言烟花效果展示使用教程查看源码HTML代码CSS代码JavaScript 新年祝福 前言
在这个充满希望和激动的2024年，新的一年即将拉开帷幕，而数字科技的创新与发展也如火如荼。烟花绚丽多彩的绽放，一直以来都是新年庆典中不可或缺的元素。…
编程笔记 html5cssjs 034 HTML MathML
编程笔记 html5&css&js 034 HTML MathML 一、HTML5 MathML二、看实例小结 网页上什么都可以出现呀，数学公式是不是也需要显示出来呀？这东西就叫MathML。 一、HTML5 MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <mat…
第六讲_css盒子模式
css盒子模型 1. 长度单位2. 盒子模型的组成2.1 盒子模型内容2.2 盒子模型内边距2.3 盒子模型边框2.4 盒子模型外边距 1. 长度单位
px：像素em：相对于当前元素或父元素的 font-size 的倍数
<style>.parent {height: 500px;width: 500px;background…
three.js CSS3DObject、CSS2DObject、CSS3DSprite、Sprite的作为标签的区别
CSS3DObject、CSS2DObject、CSS3DSprite、Sprite的作为标签的区别 是否面向相机场景缩放时，是否会跟随是否会被模型遮挡CSS2DObject是否否CSS3DObject否是否CSS3DSprite是是是Sprite是是是
CSS3DObject 和 CSS3DRenderer 搭配来渲染标签；
CSS2DObject …
CSS中的特效-详解
目录 常见样式参考表
特殊样式
媒体查询
自定义字体
变换效果 transform
translate() 方法
rotate() 方法
scale() 方法
skew() 方法
matrix() 方法
过渡效果 transition
动画效果 keyframes animate
渐变效果
background-image:linear-gradient
background-imag…
css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效
css3javaScript实现一个左右钟摆-摇晃的红灯笼网页特效！前天逛博客时无意中看见了，别人的博客顶部有一个会左右钟摆的摇晃的红灯笼，产生了想法，我也想给自己做一个，但是网上找了很多方案，都没有实现。终于在…
第十五讲_css水平垂直居中的技巧
css水平垂直居中的技巧 1. 水平垂直居中（场景一）2. 水平垂直居中（场景二）3. 水平垂直居中（场景三）4. 水平垂直居中（场景四） 1. 水平垂直居中（场景一）
条件&a…
CSS3弹性盒布局详解
CSS3的弹性盒布局
简介
弹性盒（ Flexible Box 或 Flexbox） 布局是CSS3提供的一种新的布局模式，是一种当页面需要适应不同的屏幕大小及设备类型时，确保元素拥有恰当行为的一种布局方式。
弹性盒的结构:
从图中所知，…
跟着pink老师前端入门教程-day08
二十一、案例前期铺垫
21.1 CSS属性书写顺序（重点）
建议遵循以下顺序：
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式ÿ…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-7 datalist
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>datalist</title>
</head><body>
<input id"address" list"addressList">
<datalist id"addressList"…
编程笔记 html5cssjs 050 CSS表格2-1
编程笔记 html5&css&js 050 CSS表格2-1 一、表格边框二、全宽表格三、合并表格边框四、表格宽度和高度五、水平对齐六、垂直对齐七、表格内边距八、可悬停表格九、条状表格十、表格颜色十一、响应式表格十二、CSS 表格属性十三、练习小结 使用 CSS 可以极大地改善 HTML…
HTML CSS 发光字头特效
效果展示： 代码：
<html><head> </head><style>*{margin: 0;padding: 0;}body {text-align: center;}h1{/* border: 3px solid rgb(201, 201, 201); */margin-bottom: 20px;}.hcqFont {position: relative;letter-spacing: 0.07…
HTML以及CSS相关知识总结(一)
近日就开始回顾html和css相关知识啦，并且会学习html5和css3的新知识，以下是我对记忆不太深刻的地方以及新知识点的总结： Web标准： 结构：用于对网页元素进行整理和分类，即HTML 表现：用于设置网页…
编程笔记 html5cssjs 055 CSS颜色表
编程笔记 html5&css&js 055 CSS颜色表 一、代码二、小结 重新做了颜色表，前面讲HTML时已经有了一个，重新整理了一个，方便查用。将代码复制本地使用。这个内容既用于颜色的了解，也是一个网页的综合练习。将下面内容复制&am…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-11 HTML5 表单验证
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>HTML5 表单验证</title>
</head><body>
<form action"#" method"get" novalidate>请输入您的邮箱:<input type&q…
css垂直水平居中(父元素宽高有无情况）+ flex用法
垂直水平居中----6种方法
知道父元素具体宽高时：
父元素设置display:flex, 子元素设置 margin:auto.父元素相对定位，子元素绝对定位 4个属性都设置0，再设置margin:auto.父元素相对定位，子元素绝对定位，left:50%,top:…
2024 高级前端面试题之 CSS 「精选篇」
该内容主要整理关于 CSS 的相关面试题，其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 CSS模块精选篇 1. 盒模型2. BFC3. 层叠上下文4. 居中布局5. 选择器权重计算方式6. 清除浮动7. link 与 import 的区别8. CSS3的新特性9. CSS动画和过渡10. 有哪些…
【Web前端开发基础】CSS3之Web字体、字体图标、平面转换、渐变
CSS3之Web字体、字体图标、平面转换、渐变 目录 CSS3之Web字体、字体图标、平面转换、渐变一、Web字体1.1 Web字体概述1.2 字体文件1.3 font-face 规则 二、字体图标2.1 字体图标2.2 字体图标的优点2.3 图标库2.4 下载字体包2.5 字体图标的使用步骤2.6 字体图标使用注意点2.7 上…
编程笔记 html5cssjs 063 JavaScrip输出
编程笔记 html5&css&js 063 JavaScrip输出 一、JavaScript 输出方式二、弹出警告框来显示数据三、操作 HTML 元素四、写到 HTML 文档五 、写到控制台小结 JavaScript 输出。JavaScript 没有任何打印或者输出的函数。JavaScript输出主要是显示数据，以使我们看…
父元素flex:1 高度却被子元素撑开的问题
问题
当父元素设置了flex: 1; 的情况下，想在其中子元素超出父元素高度的情况下，产生滚动条，在父元素区域滚动。由于子元素高度不固定，故父元素设置为display: flex; flex-direction: column; 子元素设置flex: 1; overflow: auto;…
js动态设置关键侦@keyframes
js动态设置关键侦keyframes
1.前置知识
关键侦keyframes规则通过在动画序列中定义关键侦的样式来控制CSS动画序列的中间步骤
keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}
}
// from 等价于 0%；to 等价与 100%
// 或…
css垂直水平居中的几种实现方式
垂直水平居中的几种实现方式
一、固定宽高：
1、定位 margin-top margin-left .box-container{position: relative;width: 300px;height: 300px;}.box-container .box {width: 200px; height: 100px;position: absolute; left: 50%; top: 50%;margin-top: -50px;…
【服务器APP】利用HBuilder X把网页打包成APP
目录
🌺1. 概述
🌼1.1 新建项目
🌼1.2 基础配置
🌼1.3 图标配置
🌼1.4 启动界面配置
🌼1.5 模块配置
🌼1.6 打包成APP 🌺1. 概述 探讨如何将网页转化为APP，这似乎…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面
项目展示
三栏布局是一种常用的网页布局结构。 除了头部区域、底部区域外，中间的区域（主体区域）划分成了三个栏目，分别是左侧边栏、内容区域和右侧边栏，这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时&#x…
如何本地搭建Tale博客网站并发布到公网分享好友远程访问——“cpolar内网穿透”
文章目录 前言1. Tale网站搭建1.1 检查本地环境1.2 部署Tale个人博客系统1.3 启动Tale服务1.4 访问博客地址 2. Linux安装Cpolar内网穿透3. 创建Tale博客公网地址4. 使用公网地址访问Tale 前言
今天给大家带来一款基于 Java 语言的轻量级博客开源项目——Tale，Tale…
面试 CSS 框架八股文十问十答第一期
面试 CSS 框架八股文十问十答第一期 作者：程序员小白条，个人博客 相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
⭐点赞⭐收藏⭐不迷路！⭐
1）CSS选择器及其优先级
C…
CSS的flex弹性布局
<!DOCTYPE html>
<html>
<head> <meta charset"UTF-8" /> <title>flex弹性布局</title> <style> /* 加了flex是弹性容器 */ .box{ display: flex; height: 300px; /* justify-content: start; 默认情况 */ /* justify-c…
CSS3：最新特性和实例教程
今天简单复习一下css3的相关特性吧。
一：响应式设计
CSS3引入了媒体查询（Media Queries）和弹性盒子布局（Flexbox）等特性，使得响应式设计变得更加容易。媒体查询可以根据设备的屏幕大小、分辨率等属性来应…
【前端】快速掌握CSS-盒子模型
文章目录 一、选择器1. 结构伪类选择器基本使用:nth-child(公式) 2. 伪元素选择器 二、PxCook三、盒子模型1. 盒子模型-组成2. 边框线(1) 四个方向相同(2) 单方向边框线 2. 内边距3. 尺寸计算4. 外边距5. 版心居中6. 清除默认样式7. 元素溢出8. 外边距问题(1) 合并现象(2) 外边…
编程笔记 html5cssjs 065 JavaScrip数据类型
编程笔记 html5&css&js 065 JavaScrip数据类型 一、JavaScript 数据类型二、JavaScrip 数据类型分类：三、JavaScript 数据类型与其他语言的主要区别小结 数据类型是编程语言的基本构成，不同的编程语言的数据类型有很大区别。数据是程序的处理对象…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例5-4 Document
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>Document</title>
</head><body>
<canvas id"cavsElem" width"400" height"600">您的浏览器不支持Canvas…
《CSS3》田字网格背景（外实线内虚线）的实现
一、前言
记录一些有趣的CSS实现方式，总所周知，当一段效果可以通过CSS实现的时候，绝不使用Javascript来实现，因此记录一些有意思的CSS效果，一来是方便自己学习，另一来是方便以后在需要使用到的时候能快速找…
禁止 ios H5 中 bounces 滑动回弹效果
在开发面向 iOS 设备的 HTML5 应用时，控制页面的滚动行为至关重要，特别是禁用在 Safari 中默认的滑动回弹效果。本文旨在提供一个简洁明了的解决方案，帮助开发者在特定的 Web 应用中禁用这一效果。 1. 什么是滑动回弹效果？
在 iO…
跟着pink老师前端入门教程-day16
二十七、CSS3进阶
1、CSS3 2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换（transform）可以简单理解为变形
移动：translate；旋转ÿ…
JavaWeb之HTML-CSS --黑马笔记
什么是HTML ? 标记语言：由标签构成的语言。
注意：HTML标签都是预定义好的，HTML代码直接在浏览器中运行，HTML标签由浏览器解析。 什么是CSS ? 开发工具
VS Code --安装文档和安装包都在网盘中
链接：https://p…
编程笔记 html5cssjs 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句 循环语句1. for 循环2. while 循环3. do...while 循环4. for...in 循环5. for...of 循环 小结 在JavaScript中，有几种不同的循环语句用于执行重复的代码块。 循环语句
以下是一些主要的循环类型及其详解与示…
编程笔记 html5cssjs 076 Javascrip 表达式
编程笔记 html5&css&js 076 Javascrip 表达式 一、JavaScript表达式二、示例总结 在JavaScript中，表达式是一种可以计算出值的结构。它可以是一个简单的字面量（如数字或字符串），一个变量名，或者更复杂的结构&a…
编程笔记 html5cssjs 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式 一、JavaScript表达式二、示例总结 在JavaScript中，表达式是一种可以计算出值的结构。它可以是一个简单的字面量（如数字或字符串），一个变量名，或者更复杂的结构&…
编程笔记 html5cssjs 081 JavaScript 异常处理语句
编程笔记 html5&css&js 081 JavaScript 异常处理语句 一、结构和语法：二、示例：总结 在JavaScript中，异常处理主要通过
try...catch...finally 语句实现。这个结构允许你捕获并处理程序运行时可能出现的错误（即异常&…
跟着pink老师前端入门教程-day21
5.4 常见flex布局思路 5.5 背景线性渐变
语法： background: linear-gradient( 起始方向 , 颜色 1, 颜色 2, ...); background: -webkit-linear-gradient(left, red , blue); background: -webkit-linear-gradient(left top, red , blue); 背景渐变必须添加浏览…
蓝桥杯Web应用开发-CSS3 新特性【练习三：文本阴影】
文本阴影
text-shadow 属性 给文本内容添加阴影的效果。 文本阴影的语法格式如下：
text-shadow: x-offset y-offset blur color;• x-offset 是沿 x 轴方向的偏移距离，允许负值，必须参数。 • y-offset 是沿 y 轴方向的偏移距离，…
蓝桥杯Web应用开发-CSS3 新特性【练习二：获得焦点验证】
页面上有一个姓名输入框和一个密码输入框，当聚焦输入框时，输入框的背景颜色会发生改变， 新建一个 index3.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang"en"><head><meta charset&…
跟着pink老师前端入门教程-day14+15
2.6 main 主体模块制作 HTML： <div class"w"><div class"main"><!-- 焦点图模块 --><div class"focus"><ul><li><img src"./images/banner_bg.png" alt""></li>…
webIDE表单标签以及包含选择器的使用
IDE的使用
<!DOCTYPE html>
<html lang"zh"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, i…
mockjs使用（2）
mockjs使用（1）
4、Mock
4.1 Mock.mock()
根据数据模版生成模拟数据
Mock.mock( rurl?, rtype?, template|function(options) )问号代表该参数不必填
4.1.1 各参数及其默认值
rurl: 不必填。表示需要拦截的URL，可以使URL字符串或URL正…
编程笔记 html5cssjs 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字 一、关键字二、Javascript关键字注意 在计算机编程语言中，关键字（Keyword）是指那些被编程语言赋予特殊含义、具有预定义用途的保留字。这些词汇不能用作变量名、函数名或其他标识符&…
编程笔记 html5cssjs 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量 一、JavaScript 变量二、JavaScript 常量三、示例：小结： 在JavaScript中，变量和常量是用来存储数据的占位符。它们的主要区别在于可变性：变量的值可以改变，而…
编程笔记 html5cssjs 070 JavaScript Null数据类型
编程笔记 html5&css&js 070 JavaScript Null数据类型 一、Null数据类型二、 类型运算小结 在JavaScript中，Null 是一种基本数据类型，它是JavaScript七种原始数据类型（包括：Boolean、Number、String、Null、Undefined、Sym…
编程笔记 html5cssjs 078 JavaScript 条件判断语句
编程笔记 html5&css&js 078 JavaScript 条件判断语句 条件判断语句小结 条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。 条件判断语句
在JavaScript中，条件判断语句用于根据特定条件执行不同的代码块。以下是几种主要的条件判断结构&a…
html页面练习——公司发展流程图
1.效果图 2.html
<div class"center"><header><h1>发展历程</h1><h3>CONMPANY HISTORY</h3></header><main><div class"left"><div class"time1">2012.12</div><div cla…
css 中 flex 布局最后一行实现左对齐
问题
flex 布局最后一行没有进行左对齐显示：
<div classparent><div classchild></div><div classchild></div><div classchild></div><div classchild></div><div classchild></div><div…
踩坑实录（Fourth Day）
今天开工了，其实还沉浸在过年放假的喜悦中……今天在自己写 Vue3 的项目，虽说是跟着 B 站在敲，但是依旧是踩了一些个坑，就离谱……照着敲都能踩到坑，我也是醉了…… 此为第四篇（2024 年 02 月 18 日&#x…
![[HTML]Web前端开发技术18（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用——喵喵画网页](https://img-blog.csdnimg.cn/direct/86a845efc263486d9bdc47f20dc9c864.png)
[HTML]Web前端开发技术18（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…
![[HTML]Web前端开发技术19（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，hgroup， figcaption，figure，section——喵喵画网页](https://img-blog.csdnimg.cn/direct/67b830342a844bf598597789766dc97b.png)
[HTML]Web前端开发技术19（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，hgroup， figcaption，figure，section——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…
如何理解CSS的边框宽度？
CSS 边框宽度学习手记
CSS 边框宽度小概念
在CSS的世界里，border-width这个属性真的很实用，它能帮我指定HTML元素四周边框的宽度。这个宽度嘛，可以用像素px、点pt、厘米cm、相对单位em这些来表示，很方便吧！还有呢&am…
CSS中伪元素和伪类的区别和作用？
伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
p::before {content:"第一章…
css3实现无缝滚动，鼠标经过暂停
js也可以实现，但css3更加的平滑和资源占用更少。下面是具体代码，动画要单独用一个类名，否则暂停估计不会生效：
原理：动画向上移动，目标完全消失后，从头开始，注意 动画移动高度是文本…
CSS3的新盒子，选择器等
新增的选择器： 属性选择器： 结构伪类选择选器： nth较为重要：但公式中的字母必须是n 区别： nth-child：
认为父类下的都是儿子，此时就需要有对应的需要，如下，此时即使排1&…
HTML+CSS+JS的3D进度条
<!DOCTYPE html>
<html lang"zh-CN">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>HTMLCSSJS的3D进度条</title><style>…
18.CSS3 遮罩
CSS3 遮罩
本文主要包含以下内容：
CSS3 遮罩介绍遮罩各属性介绍
CSS3 遮罩介绍
CSS mask 遮罩属性的历史非常久远了，远到比 CSS3 border-radius 等属性还要久远，最早是出现在 Safari 浏览器上的，差不多可以追溯到 2009 年。
…
编程笔记 html5cssjs 086 JavaScript 内置对象
编程笔记 html5&css&js 086 JavaScript 内置对象 一、Object二、Array三、String四、Number五、Math六、Date七、RegExp八、Function九、示例小结 JavaScript 内置对象是 JavaScript 语言本身定义的一系列预定义的对象，这些对象在全局作用域中可以直接使用&…
width:100%和width:auto有啥区别
项目中使用了with属性，突然好奇auto 和 100% 的区别，特地搜索实践总结了一下观点 一、 width属性介绍二、 代码带入三、 分析比较四、 总结 一、 width属性介绍
width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-siz…
编程笔记 html5cssjs 090 JavaScript 文档对象模型
编程笔记 html5&css&js 090 JavaScript 文档对象模型 一、文档对象模型二、Javascript编程中文档对象的组成DOM 的主要组件：事件（Events）属性（Properties）方法（Methods） 三、编程应用四…
HTML5+CSS3+JS小实例：锥形渐变彩虹按钮
实例：锥形渐变彩虹按钮
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /…
html从零开始8：css3新特性、动画、媒体查询、雪碧图、字体图标【搬代码】
css3新特性 <!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, …
re:从0开始的CSS之旅 18. z-index
1. z-index
z-index 属性用于设置元素的叠放层次，属性值可以为一个整数，整数值越大越优先显示
注意：z-index只对开启了定位的元素有效
示例如下：
<!DOCTYPE html>
<html lang"en"><head><meta…
css3实现炫彩字体
这个字体颜色是动态变化的，直接上代码
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title&…
表单进阶（5）-文本域
默认文本框可以用自由拖动控制大小
通过设置在css中设置控制：
resize:重新设置文本框大小 horizontal（水平），vertical（垂直），none（不能控制大小），默认both&…
如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
文章目录 一、背景两栏布局三栏布局 二、两栏布局flex弹性布局 三、三栏布局两边使用 float，中间使用 margin两边使用 absolute，中间使用 margin两边使用 float 和负 margin使用 display: table 实现使用flex实现grid网格布局 参考文献 一、背景
在日常…
11.CSS3的媒介(media)查询
CSS3 的媒介(media)查询
经典真题
如何使用媒体查询实现视口宽度大于 320px 小于 640px 时 div 元素宽度变成 30%
媒体查询
媒体查询英文全称 Media Query，顾名思义就是会查询用户所使用的媒体或者媒介。
在现在，网页的浏览终端是越来越多了。用户可…
css3d制作正方体
使用css3d技术 ，制作一个可以动态动画的正方体模型 效果图：
代码如下：
<!DOCTYPE html>
<html>
<head><style>/* 设置高度宽度100%并且左右居中、上下居中 */html,body {width: 100%;height: 100%;display: flex…
Table布局显示文字横排效果，以及table 给td设置圆角
上图 上代码
<!DOCTYPE html>
<html><head><meta charset"utf-8"><title></title><style>.span-font {font-size: 18px;color: rgb(255, 255, 255);}.span-font-small {font-size: 14px;color: rgb(255, 255, 255);}.sp…
推荐 9 个超赞的 JavaScript 库
1. Algolia Places。一个 JavaScript 位置库，可用在表单自动完成组件里；
2. TensorFlow.js。在浏览器和 Node.js 训练和部署 ML 模型；
3. Animate CSS。使用时，只需导入库，并将 CSS 类添加到文本即可；
4…
你知道的前端隐藏元素的方法都有哪些？
最近在面试的时候，四场面试，问了我三次这个问题，你知道的隐藏元素的方法都有哪些？我之前没有准备过类似的问题，我脑子里面只有一个v-if/v-show那里的display:none，虽然面试官也给予了肯定，但是明…
一文带你复习CSS3关于动画的全部知识
作为前端三剑客之一的CSS，最受大家关注的就是CSS3的改变，本文带大家复习一下CSS3中关于2D（平移、旋转，缩放、倾斜），3D旋转，样式过渡，动画规则等内容，来实现页面中常用的动…
CSS3实现超好看的加载动画
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 在任何项目都中会出现需要加载的数据的场景，大多数都会给一个loading的交互提示，这期我们就做一个超级好看炫酷的加…
【poi 4.0.0写法修改】
poi 4.0.0写法修改
rgb设置 原 new XSSFColor(new Color(0, 0, 0)) 新 new XSSFColor(new Color(0, 0, 0),colorMap)
CellStyle设置单元格样式
//原
CellStyle algin_center_style wb.createCellStyle();
algin_center_style.setAlignment(HSSFCellStyle.ALIGN_CENTER);
al…
好玩的CSS---实现打字效果
代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。 CSS是前端非常重要的技术也是对于前端熟练度的考察。很多的后端程序员表示在学习前端知识的时候，JS其实不是强有力的拦路…
前端实现3D魔方旋转特效
代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。 先看一下效果
<!DOCTYPE html>
<html>
<head><title>魔方</title><meta charset"utf-8&qu…
Ajax随手记---3个月之内 进行排版和填充个人理解
1 . Ajax 的应用 1 ) 上拉加载更多数据 2) 页面中部分数据更新(比如头部 尾部 侧边栏都不改变 仅仅改变部分内容) 3) 验证(无需提交直接可以知道填写的内容是否符合格式) 4) 搜索框中的下拉列表
2 . Ajax 需要运行在网站环境中才能生效
3 . Ajax作用 1 ) 充当代理人(Ajax代替…
导航栏制作时出现的问题及解决方法
文章目录下拉菜单出现的问题1. 下拉菜单排版问题2. 下拉菜单如何在页面滚动时不被隐藏3.下拉菜单使用button按钮时不是维持一个按钮的样式背景图片添加问题4 图片双重叠加问题下拉菜单出现的问题
1. 下拉菜单排版问题
question: 在进行下拉菜单的的制作时当我想要沿着x轴的时…
10.CSS3的calc函数
CSS3 的 calc 函数
经典真题
CSS 的计算属性知道吗？
CSS3 中的 calc 函数
calc 是英文单词 calculate（计算）的缩写，是 CSS3 的一个新增的功能。
MDN 的解释为可以用在任何长度、数值、时间、角度、频率等处，语法如…
![[HTML]Web前端开发技术27（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页](https://img-blog.csdnimg.cn/direct/52c0c5fe6b45486095dede020d9194cb.png)
[HTML]Web前端开发技术27（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…
css3的var()函数
css3的var()函数
变量要以两个连字符--(横杆)(减号)为开头 变量可以在:root{}中定义, :root可以在css中创建全局样式变量。通过 :root本身写的样式，相当于 html，但优先级比后者高。 在CSS3中，var()函数是一个用于插入CSS自定义属性ÿ…
一款跳转警告HTML单页模板源码
一款跳转警告HTML单页模板,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面 代码如下
<!DOCTYPE html>
<html>
<!--QQ沐编程 www.q…
HTML5和CSS3提高
一、HTML5的新特性
增加了一些新的标签，新的表单，新的表单属性，IE9以上版本的浏览器才支持 注意：
这些语义化标准主要针对搜索引擎的
新标签可以使用多次
在IE9中需要把这些元素转化为块级元素 新增的多媒体标签
主要包含两个…
node.js使用multer在vue中实现图片上传
效果演示
点击上传选择要上传的图片。 上传成功会加载图片的缩略图。 此时，图片以保存在后端的静态目录中。 设计思路
vue中使用input标签上传图片，绑定change事件，事件负责把图片发送给后端，后端通过multer模块处理前端传来的…
编程笔记 html5cssjs 084 JavaScript 变量的作用域
编程笔记 html5&css&js 084 JavaScript 变量的作用域 一、全局作用域二、局部作用域（函数作用域）三、块级作用域（ES6引入）小结 变量作用域是程序设计中一个重要的概念，它定义了变量在何处可以被访问和使用。在…
CSS中元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
文章目录 一、背景二、实现方式利用定位margin:auto利用定位margin:负值利用定位transformtable布局flex弹性布局grid网格布局小结 三、总结内联元素居中布局块级元素居中布局 参考文献 一、背景
在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都…
web学习笔记（二十八）
目录 1.JSON
1.1JSON简介
1.2JSON的语法
1.3JSON字符串分类
1.4JSON方法
2.数据存储
2.1会话存储
2.1.1会话存储的特点
2.1.2会话存储的常用方法
2.2本地存储
2.2.1本地存储的特点
2.2.2本地存储的常用方法
2.3两者的共同点 1.JSON
1.1JSON简介
JSON&#x…
HTML5+CSS3+JS小实例：全屏背景切换动画
实例：全屏背景切换动画
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-s…
关于CSS 优先级布局应用的教程
在前端开发中，CSS 的优先级布局是非常重要的一部分。通过合理地应用 CSS 优先级，我们可以更加灵活地控制页面的布局和样式。本教程将向您介绍如何利用 CSS 优先级进行布局，并通过实例展示其应用。
1. 了解 CSS 优先级
在 CSS 样式表中&…
Swiper实现轮播效果
swiper官网：https://3.swiper.com.cn/
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title&…
前端面试题汇总（一）
1.html语义化
HTML语义化是指在编写HTML代码时，尽可能使用具有明确含义的标签来描述页面内容的结构和意义，以便让浏览器、搜索引擎和开发者更好地理解和解释页面内容。通过使用语义化的HTML标签，可以提高页面的可访问性、可维护性和可读性&a…
简单实现文字滚动效果-CSS版本
先看看效果 话不多说直接上代码
<template><div class"main"><div class"scroll-region"><div class"swiper-scroll-content"><span class"list-btn" v-for"(item, index) in overviewList" :…
【uniapp】小程序自定义一个通用的返回按钮组件
左边箭头，右边文字可以自定义，但是不要太长，太长可以自己改 .back的width值，改宽一点。 用这个组件的时候首先要在pages.json里把导航栏变成自定义的： ,{"path" : "pages/test/test","style&…
CSS 显示隐藏动画（动画失效问题）
就像这个动画一样的效果，div 先是隐藏的，点击按钮后显示并且有动画效果，隐藏的时候同样。 <button class"btn" id"btn">点击</button><div class"box" id"box"></div><s…
[小程序开发] wxml语法
一、声明和绑定数据 小程序中使用的数据均需要在Page()方法的data对象中进行声明定义。 在WXML使用Mustache语法（双大括号{{ }}）将变量包起来，从而进行数据绑定。 在{{ }}语法中，只能写表达式，不能写语句，…
前端每日一练：深入了解CSS3伪类和伪元素特点和区别
深入了解CSS3伪类和伪元素
在CSS3中，引入了许多新的伪类和伪元素，这些特殊的选择器可以更精确地定位和样式化文档结构中的元素。以下是一些常用的CSS3伪类和伪元素：
CSS3 伪类（Pseudo-classes）：
1. :hov…
uniapp直接连接wifi(含有ios和安卓的注意事项)
前言 小程序中直接连接wifi-----微信小程序 代码
启动 //启动wifistartWifi() {return new Promise((resolve, reject) > {uni.startWifi({success: (res) > {console.log(启动wifi 成功, res)resolve(true)},fail: (err) > {console.error(启动wifi 失败, err)uni.s…
css春夏秋冬，鼠标滑入动效展示
效果展示 图片素材 代码块
<!DOCTYPE html>
<html><head><meta charset"utf-8"><title></title></head><body><style>* {margin: 0;padding: 0;}.box {width: 800px;height: 300px;display: flex;}.box .ite…
纯css实现太极八卦图
感觉最近好像闯鬼了，赶紧写个八卦图避避邪，开玩笑了，不废话，上菜，看效果上代码。
效果 代码，你们都是大佬，这里就不解释代码了 （hover会转动喔）。
<!DOCTYPE html&g…
JavaScript手写轮播
html页面代码：此页面将大体的排版先做完。为后续编写js代码打下基础。
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sc…
详解css3中的:nth-of-type(n)
该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯
:nth-of-type() CSS 伪类 匹配同类型中的第n个同级兄弟元素。
先来看个简单的例子理解一下上面的意思：
…
HTML标签(元素)
常用标签：
html标题：<h1>-<h6>
标题（Heading）是通过<h1>-<h6>标签进行定义<h1>为最大标题，<h6>为最小标题默认样式：标题标签带有上下外边距，撑出元素之间…
HTML标签和元素的含义
html标签：
html标记标签通常被称为html标签（html tag）。html标签是由尖括号包围的关键词，列如<html>html标签一般是成对出现的<html>内容</html>，但也有单标签<meat>(没有结束标签)。双标签的…
uniapp引用第三方链接库
<style>/*以 elementUI 为例，在 app.vue 中导入库的样式文件*/import https://unpkg.com/element-ui/lib/theme-chalk/index.css;
</style>
前端web入门-移动web-day08
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录
平面转换
平面转换 transform
平面转换 – 平移
平移实现居中效果
平面转换 – 旋转
平面转换 – 改…
vellum 简单Bear毛发
https://www.bilibili.com/video/BV1gR4y1W7fk?p2
课程 Bear熊 梳毛
1. 添加毛发
工具架: 1.add _fur {生成 guide groom 塑性的？ hair generate 渲染用 TIP:渲染的是Hair Generate
2.毛发方向
工具加: 2.Guide process
1.方向面板参数 3.弯曲和长度 1.弯曲…
vex Learning 2/2 前5章
vex循环
array数组 修改数组中的数，eg 8号没有的话系统会自动去补充其他位数为0。
for 循环 while 语句
会无限循环
感染点
npm ERR! missing script: dev npm ERR! A complete log of this run can be found in: npm ERR! C:\U
vant 报错 解决方法
搜索的其他方法不能用
1 删除本地node_modules 依赖包；
2 执行 npm cache clean --force 清理缓存；
3 npm install 安装依赖；
4 以上过程，尝试不行以上方法不行，可以尝试这个方法 npm run serve …
Javascript 轮播图
function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer setInterval(function() {let step (target - obj.offsetLeft) / 10;step step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {// 停止动画 本质是停止定时器c…
一篇文章，让你精通css布局（Flex布局）
相信大家在学习网页的时候都会感觉听着简单，但是做的时候总时做不好，盒子布局的宽和高，总时让你头大，下面我们就进入弹性盒子布局（Flex布局），编程网页更加容易吧1 什么是Flex布局（弹…
CSS3 :nth-child()伪类选择器
原文地址为：
CSS3 :nth-child()伪类选择器CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实…
前端开发工程师VS code常用插件
今天发现自己平常用的VS code 插件使用的比较少，然后参考了一下别人的常用的插件记录在这里，可以帮我们提高开发效率
HTML Snippets： H5代码片段vscode-icons：左侧栏的图标JS-CSS-HTML Formatter ：格式化Path Autocom…
移动端h5兼容ios和Android
viewport
<meta charset"utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content"widthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalableno" name"…
![[100天挑战100个前端效果]第二十二天---荧光色旋边框](https://img-blog.csdnimg.cn/20210512105447352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2ODMy,size_16,color_FFFFFF,t_70)
[100天挑战100个前端效果]第二十二天---荧光色旋边框
荧光色旋边框让我们先来看看实现的效果html代码css代码设计思路与今日份知识总结设计思路知识总结让我们先来看看实现的效果 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-…
![[100天挑战100个前端效果]第十三天---跳动的爱心(有详细的思路分析！)](https://img-blog.csdnimg.cn/20210401091756429.gif#pic_center)
[100天挑战100个前端效果]第十三天---跳动的爱心(有详细的思路分析！)
跳动的爱心先让我们来看看实现的效果html代码css代码代码思路分析和知识总结先让我们来看看实现的效果 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" …
![[100天挑战100个前端效果]第六天---icon图标hover填充效果(如此染色甚好！)](https://img-blog.csdnimg.cn/20210325163739656.gif#pic_center)
[100天挑战100个前端效果]第六天---icon图标hover填充效果(如此染色甚好！)
icon图标hover填充效果让我们先来看看实现的效果html代码iconfont.css代码style.css代码今天份知识总结让我们先来看看实现的效果 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv&qu…
![[100天挑战100个前端效果]第四天---边框滑动按钮(带你认识skew函数)](https://img-blog.csdnimg.cn/20210323095915783.png)
[100天挑战100个前端效果]第四天---边框滑动按钮(带你认识skew函数)
边框滑动按钮我们先来看看实现效果html代码css代码学习到的知识总结我们先来看看实现效果 html代码
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"…
CSS学习笔记(十一) CSS3新特性
这篇文章我们将会介绍 CSS3 中一些常用的新特性
包括 选择器、过渡、动画、弹性布局、颜色、阴影、反射、渐变、字体、转换 等等
1、颜色
在 CSS3 之前，表示颜色可以使用以下三种方法：
关键字表示法，例如黑色可以表示为 black，…
element表格点击一行给行添加border
由于element ui有一套自己的样式，在实际工作中，我们可能不会照搬，一般会根据需求和设计对element ui进行调整，但是有时候自己写的样式会被element ui影响，不能成功应用。 这次我的工作就是给element表格点击一行给行添…
div中img居中显示
css:
.divClass{ display: flex; justify-content: center; align-items: center; } .divClass img {
/*这个宽度自己调整就可以*/ width: 35%; }
路由器web网页管理界面goahead和Lighttpd、jQuery（JavaScript(js)众多框架中的比较老的一个）、超文本标记语言html
一、路由器web网页管理界面goahead
1、开源的轻量级WEB Server很多，比如GoAhead、Shttpd、Thttpd、Lighttpd、BOA、mathopd、minihttpd、appweb，但适合于移植到嵌入式平台的并不多。
2、GoAhead是基于C语言的嵌入式WEB Serve。开发linux平台下的web监控…
CSS3 @keyframes 动画
CSS3的keyframes，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
CSS3的动画属性
下面的表格列出了 keyframes 规则和所有动画属性： 浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, …
背景虚拟化组件，透明模糊
问题当我们背景想要进行透明或者模糊处理的时候我们一般我们可以以通过 rgba 的第四个位置可以进行透明处理，但是模糊不行
需要懂得知识点，定位，属性加强，结构化，react 插槽
话不多说上代码
子组件
import logincs…
CSS中有哪些方式可以隐藏页面元素（区别详解）
文章目录 一、前言二、实现方式display:nonevisibility:hiddenopacity:0设置height、width属性为0position:absoluteclip-path小结 三、区别参考文献 一、前言
在平常的样式排版中，我们经常遇到将某个模块隐藏的场景
通过css隐藏元素的方法有很多种，它…
全栈的自我修养 ———— css中常用的布局方法flex和grid
在项目里面有两种常用的主要布局:flex和grid布局（b站布局），今天分享给大家这两种的常用的简单方法！ 一、flex布局1、原图2、中心对齐3、主轴末尾或者开始对其4、互相间隔 二、grid布局1、基本效果2、加间隔3、放大某一个元素 一、…
【JAVA】CSS3：3D、过渡、动画、布局、伸缩盒
1 3D变换
1.1 3D空间与景深
/* 开启3D空间,父元素必须开启 */transform-style: preserve-3d;/* 设置景深（你与z0平面的距离 */perspective:50px;
1.2 透视点位置
透视点位置：观察者位置 /* 100px越大，越感觉自己边向右走并看，…
HTML静态网页成品作业(HTML+CSS)——家乡漳州介绍设计制作(1个页面)
🎉不定期分享源码，关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍
🏷️本套采用HTMLCSS，未使用Javacsript代码，共有1个页面。
二、作品演示 三、代…
前端基础篇-深入了解用 HTML 与 CSS 实现标题排版
🔥博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 HTML 与 CSS 概述 2.0 HTML - 标题排版 2.1 图片标签 2.2 标题标签 2.3 水平标签 2.4 实现标题排版 3.0 HTML - 标题样式(style 样式) 3.1 CSS 的引入方式 3.2…
【微信小程序开发】如何去除scroll-view默认的滚动条
【微信小程序开发】如何去除scroll-view默认的滚动条
【解决】：在app.wxss文件中配置如下全局样式即可解决：
/* 去掉scroll-view默认的滚动条 */
::-webkit-scrollbar {display:none;width:0;height:0;color:transparent;
}
CSS中position的属性有哪些，区别是什么
position有以下属性值：
属性值概述absolute生成绝对定位的元素，相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。relative生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过…
【Web世界探险家】打开Web世界的大门
📚博客主页：爱敲代码的小杨.
✨专栏：《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》
❤️感谢大家点赞👍🏻收藏⭐评论✍🏻，您的三连就是我持续更新的动力❤️
&…
flex弹性盒子平分布局
1、布局效果 2、css布局样式
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>测试弹性盒子</title>
</head>
<body>
<div class"out-parent"><div class"…
jQuery+CSS3自动轮播焦点图特效源码
jQueryCSS3自动轮播焦点图特效源码，源码由HTMLCSSJS组成，双击html文件可以本地运行效果，也可以上传到服务器里面 下载地址
jQueryCSS3自动轮播焦点图特效源码
HTML5CSS3提高导读
HTML5CSS3提高导读
2024/2/20
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 …
CSS3DRenderer, CSS3DObject, OrthographicCamera API 结合使用案例
CSS3DRenderer, CSS3DObject, OrthographicCamera API 结合使用案例 <!DOCTYPE html>
<html><head><title>three.js css3d - orthographic</title><meta charset"utf-8"><meta name"viewport" content"widthd…
CSS3病毒病原体图形特效
CSS3病毒病原体图形特效，源码由HTMLCSSJS组成，双击html文件可以本地运行效果，也可以上传到服务器里面
下载地址
CSS3病毒病原体图形特效代码
前端基础篇-深入了解 JavaScript（一）
🔥博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 JavaScript 概述 2.0 JS - 引入方式 3.0 JS - 基础语法 4.0 JS - 数据类型 5.0 JS - 函数 6.0 JS - Array 数组 7.0 JS - String 字符串 1.0 JavaScript 概述…
flex弹性盒常用属性汇总
弹性盒的属性可分为两类，一类是父元素属性，一类是子元素属性
一、父元素属性
display:flex flex-direction主轴方向
flex-direction:{row:(默认值）：主轴为水平方向，起点在左端。row-reverse:主轴为水平方向…
前端小白的学习之路(CSS3 一)
提示：CSS3 是 Cascading Style Sheets（层叠样式表）的第三个主要版本，引入了许多新的特性和增强功能，用于设计和布局网页。本章记录CSS3新增选择器，盒子模型。 目录 一、C3新增选择器
1) 属性选择器
1.[c…
CSS3技巧38：3D 翻转数字效果
博主其它CSS3 3D的文章：
CSS3干货4：CSS中3D运用_css 3d-CSDN博客
CSS3干货5：CSS中3D运用-2_中3d-2-CSDN博客
CSS3干货6：CSS中3D运用-3_css3d 使用-CSDN博客 最近工作上烦心的事情太多，只有周末才能让我冷静一下 cod…
实现兼容性良好的前端页面开发
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…
CSS中display、float、position的关系
（1）首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。
（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效&#…
前端小白的学习之路(CSS3 三)
提示：过渡属性transition,动画属性animation，转化属性transform,裁剪属性clip-path,倒影属性box-reflect，模糊度属性filter 目录
一、transition 二、animation 三、transform 四、clip-path 五、box-reflect
六、filter 一、transitio…
CSS3DObject 分子公式demo 实现
CSS3DRenderer, CSS3DObject, CSS3DSprite API 使用方式详解 <!DOCTYPE html>
<html><head><title>three.js css3d - molecules</title><meta charset"utf-8"><meta name"viewport" content"widthdevice-widt…
HTML5、CSS3面试题（一）
1、H5 的新特性有哪些？C3 的新特性有哪些？（必会）
H5 新特性 1、拖拽释放(Drap and drop) API ondrop 拖放是一种常见的特性，即抓取对象以后拖到另一个位置 在 HTML5 中，拖放是标准的一部分，任…
CSS3新属性（学习笔记）
一、. 圆角 border-radius:; 可以取1-4个值（规则同margin） 可以取px和% 一般用像素，画圆的时候用百分比：border-radius:50%;
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8&q…
Vue2 CSS小知识点
1.1 CSS
1.1.1 选择器
1.常用选择器
id选择器（#box）——选择id为box的元素类选择器（.one） ——选择类名为one的所有元素标签选择器（div）——选择标签为div的所有元素后代选择器（#box div&…
HTML5、CSS3面试题（二）
上一章:HTML5、CSS3面试题（一）
哪些是块级元素那些是行内元素，各有什么特点 ？（必会） 行内元素: a、span、b、img、strong、input、select、lable、em、button、textarea 、selecting 块级元素࿱…
css3鼠标悬停图片特效,图片悬停效果源码
特效介绍
css3鼠标悬停图片特效,图片悬停效果源码，可以在网页上面作为自己的动态加载名片，放到侧边栏或者网站合适的位置即可
动态效果 代码下载
css3鼠标悬停图片特效,图片悬停效果源码
利用CSS3实现正在加载效果
一、代码区域
1.1css3代码
<style>* {padding: 0;margin: 0;list-style: none;}.loading {width: 300px;height: 100px;margin: 100px auto;}.loading ul {height: 100px;width: 65px;margin: 0 auto;display: flex;align-items: center;}.loading ul li {margin: 0 5p…
文字弹性跳动CSS3代码
文字弹性跳动CSS3代码，源码由HTMLCSSJS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
下载地址
文字弹性跳动CSS3代码
Vue 3项目中结合Element Plus的＜el-menu＞和CSS3创建锚点，以实现点击菜单项时平滑滚动到对应的锚点目标
安装Element Plus： 确保已经安装了Element Plus库。可以使用npm或者yarn进行安装，具体步骤与上文提到的相同。 引入Element Plus： 在你的Vue 3项目中引入所需的Element Plus组件和样式。 创建el-menu： 在Vue组件中使用<el-me…
使用CSS3画出一个叮当猫HTML源码
我们经常使用PS或者Flash制作动画，本文则介绍了如何用CSS3画出个叮当猫，实现过程很有趣，感兴趣的朋友可以参考一下 首先，先把HTML结构搭建好：
<div class"wrapper"> <!--叮当猫整体--> <di…
css的box-shadow详解
CSS的box-shadow属性用于在元素框上添加阴影效果。它可以为元素提供外阴影或内阴影，并且可以控制阴影的颜色、偏移距离、模糊半径以及扩展半径。 box-shadow属性的基本语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;下面是各个参数…
css的transition详解
CSS的transition属性是一个简写属性，用于设置四个过渡效果属性，以在元素的状态改变时创建平滑的动画效果。这四个属性分别是： transition-property： 定义应用过渡效果的CSS属性名称。当指定的CSS属性改变时，过渡效果将…
css的transform详解
CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。以下是对transform属性中各种函数和参数的详细介绍： 2D转换函数：
translate()：该函数用于移动元素。它接…
SCUI Admin：快速构建企业级中后台前端的利器 让前端开发更快乐。
欢迎加入我们的前端组件学习交流群，可添加群主微信，审核通过后入群。 随着Web技术的不断发展，中后台前端解决方案在各类企业级应用中扮演着越来越重要的角色。SCUI Admin正是一款基于Vue3和elementPlus的WebUI前端框架，旨在帮助开…
CSS3新增的语法（三）【2D,3D,过渡，动画】
CSS3新增的语法（三）【2D,3D,过渡，动画】 10.2D变换10.1. 2D位移10.2. 2D缩放10.3. 2D旋转10.4. 2D扭曲（了解）10.5. 多重变换10.6. 变换原点 11. 3D变换11.1. 开启3D空间11.2. 设置景深11.3. 透视点位置11.4. 3D 位移11…
前端开发基础（HTML5 + CSS3）【第一篇】：HTML标签之文字排版、图片、链接、音频、视频 涵盖了两个综合案例 做到了基础学得会，实战写的出
点击前往前端开发基础专栏： 文章目录 HTML5 CSS3 开发一、开发环境搭建下载 VS Code1. 2 插件的下载1.3 项目和文件的下载 二、 什么是 HTML2.1 标签的语法2.2 代码演示：2.3 小结 三 、HTML基本骨架3.1 快捷键生成HTML骨架3.2 代码展示3.3 小结 四、标…
flex:1的作用是什么？
占满剩余的高度
<div classfather><div classson1></div><div classson2></div>
</div>当给father添加display:flex之后，假设给son2添加flex:1，那么son2将会占满除son1之外的高度
用html写一个爱心
<!DOCTYPE html>
<html lang"zh-CN"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8" /><title>爱您</title><style>* {padding: 0;margin: 0;}body {background-color: pin…
CSS3新增的语法（二）
CSS3新增的语法（二） 6.CSS3新增边框属性6.1 边框圆角6.2 边框外轮廓（了解） 7.CSS3新增文本属性7.1 文本阴影7.2 文本换行7.3 文本溢出7.4 文本修饰7.5 文本描边 8. CSS3 新增渐变8.1 线性渐变8.2 径向渐变8.3 重复渐变 9. web 字体…
前端开发语言概览：现代技术的演变与应用
随着技术的不断演进，2024年的前端开发领域出现了一些新的主流语言和工具。以下是一些在2024年占据重要地位的前端开发语言：
JavaScript/TypeScript
JavaScript依然是前端开发的核心语言，它的灵活性和强大的社区支持使其成为构建交互式网页和…
第五章：CSS预处理器入门
Sass/LESS介绍与安装 Sass（Syntactically Awesome Stylesheets） Sass是最早的CSS预处理器之一，它扩展了CSS的语言特性，允许开发者使用变量、嵌套规则、混合宏、继承、函数等高级功能编写CSS。Sass有两种语法形式：SCSS&…
DIV鼠标移入背景变暗，并显示播放按钮
效果图
1.创建DIV <div class"entry" click"handlePlay"><img class"img1" src"../../assets/HomePage/icon_img77.png" alt""><img class"img2" src"../../assets/HomePage/icon_img78.png…
前端开发学习笔记4 （CSS三大特性、CSS盒子模型、CSS圆角边框、CSS盒子阴影、CSS文字阴影）
文章目录 CSS三大特性层叠性继承性优先级 CSS盒子模型网页布局的核心和过程盒子模型的组成盒子模型的边框盒子模型的内边距盒子模型的外边距 CSS圆角边框CSS盒子阴影CSS文字阴影 CSS三大特性
层叠性
基本概念：给相同的选择器设置了相同的样式，则此时一…
第一章：CSS基础入门
1. CSS简介 CSS，全称为Cascading Style Sheets（层叠样式表），是一种样式表语言，专门用于描述HTML或其他XML文档（例如SVG、MathML）的展示和格式化。CSS负责定义网页元素的布局、颜色、字体、尺寸、…
CSS - 你实现过宽高自适应的正方形吗
难度
难度级别：中高级及以上 提问概率：80% 宽高自适应的需求并不少见，尤其是在当今流行的大屏系统开发中更是随处可见，很显然已经超越了我们日常将div写死100px这样的范畴，那么如何实现一个宽高自适应的正方形呢？这里提出两种实现方案。…
前端开发学习笔记 3 (Chrome浏览器调试工具、Emmet语法、CSS复合选择器、CSS元素选择模式、CSS背景）
文章目录 Chrome浏览器调试工具Emmet语法CSS复合选择器后代选择器子选择器并集选择器伪类选择器 CSS元素选择模式元素选择模式概述CSS块标签CSS行内标签CSS行内块标签CSS元素显示模式转换 CSS背景CSS背景颜色CSS背景图片CSS背景图片平铺CSS背景图片位置CSS背景图片固定CSS背景复…
看不上日全食了，学习CSS3，实现一个日全食的动画特效
看新闻说，今年全球唯一一次日全食将于北京时间4月9日凌晨在北美洲地区上演。看来那边我是去不成了，日全食也看不见了，不过我可以用CSS3实现一个日全食的动画特效。一起来看一下吧。 目录
1. 实现思路
2. 天空的生成已经渐变
3 太阳的生成以…
第22次修改了可删除可持久保存的前端html备忘录视频背景分离，增加了本地连接，增加了纯CSS做的折叠隐藏修改说明
第22次修改了可删除可持久保存的前端html备忘录视频背景分离，增加了本地连接，增加了纯CSS做的折叠隐藏修改说明 <!DOCTYPE html>
<html lang"zh">
<head><meta charset"UTF-8"><meta name"viewport…
尚硅谷html5+css3（3）布局
1.文档流normal flow
-网页是一个多层结构
-通过CSS可以分别为每一层设置样式
-用户只能看到最顶层
-最底层：文档流（我们所创建的元素默认都是从文档流中进行排列）
<head><style>.box1 {background-color: blue;}/*它的父元…
CSS3如何实现雷达扫描图（动态样式）
动态样式控制雷达扫描和暂停：
//html部分：
<view class"radar" :style"{--state:animationPlayState}"></view>data部分：
animationPlayState: paused,
methods:
changeStatus(){this.animationPlayState …
尚硅谷html5+css3（1）html相关知识
1.基本标签：
<h1>最大的标题字号
<h2>二号标题字号
<p>换行 2.根标签<html>
包括<head>和<body>
<html><head><title>title</title><body>body</body></head>
</html> 3…
《前端面试题》- CSS - CSS选择器的优先级
行内样式1000 d选择器100 属性选择器、class或者伪类10 元素选择器，或者伪元素1 通配符0 参考网址：https://blog.csdn.net/jbj6568839z/article/details/113888600https://www.cnblogs.com/RenshuozZ/p/10327285.htmlhttps://www.cnblogs.com/zxjwlh/p/6…
第23次修改了可删除可持久保存的前端html备忘录:增加了百度引擎
第22次修改了可删除可持久保存的前端html备忘录视频背景分离，增加了本地连接，增加了纯CSS做的折叠隐藏修改说明 <!DOCTYPE html>
<html lang"zh">
<head><meta charset"UTF-8"><meta name"viewport…
Css3梳理篇——animation（动画）
1、 animation name --动画名 duration --设置动画所需时间（先） timing-function --动画类型(线性 linear) delay --延迟时间（后） iteration-count --动画的播放次数(无限循环 infinite / n --n次) direction --方向(正向/反向rev…
HTML5+CSS3小实例：具有悬停效果的3D闪耀动画
实例：具有悬停效果的3D闪耀动画
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, init…
web蓝桥杯2022省赛真题：水果拼盘
代码及注释：
/* TODO：待补充代码 */
#pond {display: flex; //flex布局flex-direction: column; //主轴方向从上到下flex-wrap: wrap; //子元素换行
}
知识点：
flex弹性布局
父元素：diasplay: flex;
flex-d…
前端基础篇-前端工程化 Vue 项目开发流程（环境准备、Element 组件库、Vue 路由、项目打包部署）
🔥博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 环境准备 1.1 安装 NodeJs 1.2 验证 NodeJs 环境变量 1.3 配置 npm 的全局安装路径 1.4 切换 npm 的淘宝镜像( npm 使用国内淘宝镜像的方法(最新) ) 1.5 查看镜像…
CSS：过渡动画 (Transition)与关键帧动画(Keyfram)
一、过渡动画 (Transition)
1.简单介绍
Transition能为样式的变化提供过渡效果，例如在下面的代码中： .main {width: 300px;height: 100px;background-color: #d26f6f;}.main:hover {width: 300px;height: 200px;background-color: #5e3e3e;transition:…
前端学习笔记 | Vue核心
一、认识Vue 1、vue特点 命令式编码：每一步都要写正确 声明式编码：提高代码复用率 2、搭建vue2环境 （1）下载开发版本的vue.js （2）安装chrome的vue调试工具vue_devtools （3）关闭开发者…
什么是响应式设计？响应式设计的基本原理是什么？如何做？
文章目录 一、是什么二、实现方式媒体查询百分比vw/vhrem小结 三、总结参考文献 一、是什么
响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)…
前端理论总结（css3）——link/import区别 // 伪类/伪元素
伪类/伪元素 1： 伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等 伪元素使用 2 个冒号，常见的有：::before&…
将字体文件 .ttf 转成 CSS @font-face 代码引入
背景 最近项目遇到设计稿存在第三方字体，要求在静态中实现相应效果 按照传统的方式步骤： 下载对应字体将字体文件转换成font-face将font-face代码片段引入项目css文件 下面以 DIN 1451 Mittelschrift.ttf 为案例： 转换工具
Online font-face…
前端基础篇-深入了解 Ajax 、Axios
🔥博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 Ajax 概述 2.0 Axios 概述 3.0 综合案例 1.0 Ajax 概述 通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。异步交互是指，可以在不…
Css提高——Css3盒子模型border-box
1、盒子模型的种类与区别
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们 计算盒子大小的方式就发生了改变。
CSS3 盒子模型 可以分成两种情况：
1. box-sizing: content-box 盒…
CSS3 中的盒模型：标准与IE盒模型的差异
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…
前端理论总结（css3）——页面布局方法
瀑布流 优点：节省空间，外表美观，更有艺术性 对于触屏设备非常友好，通过向上滑动浏览 用户浏览时的观赏和思维不容易被打断，留存更容易 缺点：用户…
前端理论总结（css3）——css优化的方法
1：首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢 2：减少css嵌套，最好不要套三层以上 3：不要在ID选择器前面进行嵌套，ID本来就是唯一…
html5+css3学习笔记
1. 超文本标记语言（HTML）简介 html是超文本（可加入图片、声音、动画、多媒体、超越了文本限制；从1个文件跳转到另1个文件，与世界各地主机的文本连接）标记语言，由一系列标记（也称为标…
【Web世界探险家】HTML5 探索与实践
📚博客主页：爱敲代码的小杨.
✨专栏：《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》
❤️感谢大家点赞👍🏻收藏⭐评论✍🏻，您的三连就是我持续更新的动力❤️
&…
前端理论总结（css3）——css新特性//盒模型
css新特性 1：新增各种CSS选择器 （:not(.input)：所有class不是“input”的节点） 2：RGBA 3：多栏布局（column-count/gap/rule） 4：多背景图（ba…
HTML5 和 CSS3 提高
一、HTML5 的新特性 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 声明…
前端常用的css以及css3技巧
前端常用的css以及css3
首先给大家推荐一个款很不错的微信小程序， 可以逗逗身边朋友，或者你有时候想脱身的时候，想找个理由接口 那么这个绝对是神器 文章目录 黑白图像使用:not()在菜单上应用/取消应用边框对图标使用 SVG继承 box-sizingCS…
耳目一新的滑块版登录注册界面~
又到了毕业季，大家做毕设的时候总会参考已有的案例，不过大多产品的样式非常单一雷同。本帖博主给大家分享一个比较别树一帜的登录界面，如下： 如果没有账号，点击“去注册”，则会产生如下的效果： …
前端学习＜二＞CSS基础——11-CSS3属性详解（一）
前言
我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。
本文主要内容： 文本 盒模型中的 box-sizing 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变
文本
text-shadow：设置文本的阴影
格式举例&…
浅模仿小米商城布局（有微调）
CSS文件
*{margin: 0;padding: 0;box-sizing: border-box;
}div[class^"h"]{height: 40px;
}
div[class^"s"]{height: 100px;
}
.h1{width: 1528px;background-color: green;
}
.h11{background-color:rgb(8, 220, 8);
}
.h111{width: 683px;background-c…
[CSS]中子元素在父元素中居中
元素居中
对于当行文字居中，比较简单，设置text-align:center和text-height为盒子高度即可
对于父元素中子元素居中，要实现的话有以下几个方法
方法1：利用定位margin：auto
<style>.father {width: 500px;heig…
css3之动画animation
动画animation 一.优点二.定义和使用三.动画序列和解释四.常见属性及解释五.简写（名字和时间不能省略）（持续时间在何时开始的时间前）（简写中无animation-play-state)六.例子1.大数据热点图2.奔跑的熊大（一个…
【BY组态】轻量化web组态编辑器插件
演示地址：http://www.byzt.nethttp://www.byzt.net BY组态是一款非常优秀的纯前端的轻量化【web组态插件工具】，大小只有2M，可无缝嵌入到vue项目，react项目等，由于是原生js开发，对于前端的集成没有框架的限…
CSS3 Transform变形理解与应用
Transform：对元素进行变形； Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。 Animation：对元素某个属…
[CSS]使用flex实现二联三联布局
1. 使用flex实现二联布局
思路：左侧为固定width，右侧为所有
<style type"text/css">.wrap {display: flex;justify-content: space-between;}
.left,.right,{height: 100px;}
.left {width: 200px;background: coral;}
.right {…
html5cssjs代码 012 我的像册
html5&css&js代码 012 我的像册 一、代码二、解释 这段HTML代码定义了一个简单的网页，实现了一个简洁、响应式的图片相册页面。 一、代码
<!DOCTYPE html>
<html lang"zh-cn">
<head><title>编程笔记 html5&css&…
HTML5、CSS3面试题（三）
HTML5、CSS3面试题（二）
rem 适配方法如何计算 HTML 跟字号及适配方案？（必会） 通用方案 1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px） 2…
html 元素宽度自适应 占据剩余宽度
弹性盒实现
父元素设置display: flex; 需要自适应宽度的子元素设置flex: 1;
<html lang"en">
<head><style>*{margin: 0;padding: 0;}.main{display: flex;}.box1,.box2{width: 100px;height: 200px;}.box1{background: rgb(134 187 233);}.box2…
element-ui divider 组件源码分享
今日简单分享 divider 组件，主要有以下两个方面：
1、divider 组件页面结构
2、divider 组件属性
一、组件页面结构 二、组件属性
2.1 direction 属性，设置分割线方向，类型 string，horizontal / vertical࿰…
在css3中如何添加圆角边框、盒子阴影以及文字阴影
注：在css3中如何添加圆角边框、盒子阴影以及文字阴影
一、圆角边框
在 CSS3 中，新增了圆角边框样式这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法:
border-radius:length; 参数值可以为数值或百分比的形式 如果…
CSS3 实现文本与图片横向无限滚动动画
文章目录 1. 实现效果2.html结构3. css代码 1. 实现效果
gif录屏比较卡，实际很湿滑，因为是css动画实现的
2.html结构
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"…
CSS3新增的语法（四）
CSS3新增的语法（四）【布局】 14. 多列布局15.伸缩盒模型1. 伸缩盒模型简介2. 伸缩容器、伸缩项目3. 主轴与侧轴4. 主轴方向5. 主轴换行方式6. flex-flow7. 主轴对齐方式8. 侧轴对齐方式8.1 一行的情况8.2 多行的情况 9.flex 实现水平垂直居中10. 伸缩性1…
3.5 CSS常用样式
3.5.1 CSS背景
3.5.1将介绍如何在网页上应用背景颜色和背景图像。和CSS背景有关的属性如表所示。 1. 背景颜色background-color
CSS中的background-color属性用于为所有HTML元素指定背景颜色。例如：
p{background-color:gray} /*将段落元素的背景颜色设置为灰色*…
用CSS实现单行、多行文本溢出隐藏
单行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
多行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出…
JavaScript基础语法–详谈
JavaScript的编写方式
这里小编写一个简单代码，展示JavaScript三种编写方式
HTML代码行内（可以理解为内联样式）
a.第一种方式 一个123的网址，通过点击实现浏览器显示welcome字样提升（与浏览器进行交互）…
建立一个简单的网页音乐盒模型效果#css#h5
“音乐盒”可以看做一个大盒子，用<div>标签进行定义。大盒子的上面为文本内容，可以在<div>标签中嵌套<h2>和<p>标签来实现；大盒子下面为图像，通过在<div>标签中嵌套<img/>标签来实现。
样式…
【样式】Html 卡片样式
【样式】Html 卡片样式 .card {width: calc(40% - 10px);height: 160px;display: inline-block; /* 或者 flex / block 根据布局需求 */position: relative;margin: 10px; /* 添加边距以确保卡片之间有间距 */padding: 15px; /* 内边距为内容提供空间 */background-color: rgba…
图文详解前端CSS中的Grid布局，你真的可以5分钟掌握
前言
网站的布局是一个网站设计的根本，CSS的Grid布局已经成为了未来网站布局的基本方式。
今天这篇文章我们通过图文，一起看看如何自己实现Grid布局方式。 CSS
第一个Grid布局
首先我们看看最基本的Grid布局是什么样的，HTML页面的代码如下…
【工作记录】css3 grid布局笔记
概述
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局
参数配置说明
属性说明可…
html+js+css+mysql实现音乐播放器
实现原理
使用html写出界面，css装饰，js实现音乐播放和控制，音乐从data.js中读取相对路径，在js中使用player播放存在项目中的音乐。
主界面（index）
<!DOCTYPE html>
<html lang"en"&g…
JAVA学习笔记（HTML+CSS）
JAVA学习笔记（HTML&CSS）1、HTML1.1 介绍1.2 快速入门1.3 基础标签1.3.1 标题标签1.3.2 hr标签1.3.3 字体标签1.3.4 换行标签1.3.5 段落标签1.3.6 加粗、斜体、下划线标签1.3.7 居中标签1.3.8 案例1.4 图片、音频、视频标签1.5 超链接标签1.6 列表标签…
html svg标签中插入img image标签不显示的问题
svg标签中插入img image标签（图片）不显示的问题
1 问题：
在使用svg画图中想要使用img标签插入图片，可以图片不显示
<!--S svg外框 -->
<div class"contentSvg"><svg><g id"gImg">…
CSS实现背景颜色循环播放效果
颜色的循环播放效果？朋友是在docker中文网站上看到的，附上链接https://docs.docker-cn.com/，一看确实很漂亮。 那他们是如何实现的呢，其实没有用什么高端的技术，只是使用了css基本的animation动画效果，网上…
【css】修改el-tree默认滚动条样式
.common-tree::-webkit-scrollbar {width: 4px;height: 10px;
}
.common-tree::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.04);border-radius: 10px;
}
【css】i标签icon图标旋转样式
【css】i标签icon图标旋转样式【css】i标签icon图标旋转样式【css】i标签icon图标旋转样式
代码示例：
<i class"el-icon-refresh"
style"font-size: 22px;
animation: rotating 2s linear infinite reverse;">
</i>图片示例&…
HTML总结，参考狂神说
HTML知识点总结
结构
<!DOCTYPE html><!--声明为 HTML5 文档-->
<html><!-- 元素是 HTML 页面的根元素-->
<head><!-- 元素包含了文档的元（meta）数据-->
<meta charset"utf-8"><!-- meta 描…
19.CSS雨云动画特效
效果 源码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cloud & Rain Animation</title><link rel="stylesheet" href="style.css">
</head>
<bo…
前端list列表自定义图标并设置大小
前端list列表自定义图标并设置大小
一、前端list列表基础知识回顾
前端公有两种列表，一种是有序列表（ol），一种是无序列表（ul），它们的子元素都是（li）。
1.1 有序列表&a…
Vue2项目练手——通用后台管理项目第四节
Vue2项目练手——通用后台管理项目 数据的请求mock数据模拟实战文件目录src/api/mock.jssrc/api/mockServeData/home.jsmain.js 首页组件布局可视化图表可视化图表布局Home.vue echarts表Home.vue 数据的请求
mock数据模拟实战
mock官方文档 前端用来模拟后端接口的工具&…
css中flex和flex-grow的区别
设置了1个class为parent且宽度为700px的div父级元素； 它有3个子元素，分别宽高为100px； 其中item2的元素flex值为1，item3的元素flex值为2
<!DOCTYPE html>
<html lang"en">
<head><style>.pare…
float浮动布局大战position定位布局
华子目录 布局方式普通文档流布局浮动布局（浮动主要针对与black，inline元素）float属性浮动用途浮动元素父级高度塌陷 position属性定位篇相对定位（relative为属性值，配合left属性，和top属性使用）…
css属性汇总-文本、字体、边框、弹性盒子
css部分属性汇总，包括文本、字体、边框和弹性盒子
Text(文本)
属性描述CSScolor设置文本颜色direction设置文本方向。letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行tex…
【HTML/CSS】入门导学篇
本文属于HTML/CSS专栏文章，适合WEB前端开发入门学习，如果有所帮助请一键三连支持，对博主系列文章感兴趣点击下方专栏了解详细。 本文内容出自B站pink老师的前端入门教程，感谢pink老师！！！ 视频链…
09_CSS3多媒体查询
1 多媒体查询
1.1 媒体查询
媒体查询能在不同的条件下使用不同的样式，使页⾯在不同在终端设备下达到不同的渲染效果。
CSS 的 Media Query 媒体查询（也称为媒介查询）用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。
使…
商品信息底部工具类实现
<!-- 商品轮播图开始 -->
<view class="product_swiper"><swiper autoplay circular indicator-dots><swiper-item wx:for="{{productObj.productSwiperImageList}}"wx:key="id"><navigator><image src="…
CSS滚动条详解(::-webkit-scrollbar )
滚动条出现的事件： 当设置定宽或者定高的元素添加overflow:scroll属性，会出现滚动条，但是原生样式的会比较丑影响美观。
<div class"content"><div class"contain"></div>
</div>.content {wid…
HTML5+CSS3小实例：脉冲波纹催眠动画特效
实例：脉冲波纹催眠动画特效
技术栈：HTML+CSS
效果： 源码：
【html】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=&qu…
HTML5+CSS3+JS小实例：霜雾玻璃图片预览特效
实例：霜雾玻璃图片预览特效
技术栈：HTML+CSS+JavaScript
效果： 源码：
【html】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" …
JavaWeb（11）——前端综合案例5（小黑记事本）
一、实例需求 ⌛ 功能需求： ① 列表渲染 ② 删除功能 ③ 添加功能 ④ 底部统计 和 清空任务 二、代码实现 ☕
<!DOCTYPE html>
<html lang"en">
<head>
<meta charset"UTF-8" />
<meta http-equiv"X-UA-Compa…
【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )
文章目录 一、需求说明二、代码分析1、动画属性2、布局分析3、动画实现 三、完整代码示例 一、需求说明 给定一张精灵图 , 其中有多个 动画帧 对应的图片 ,
下图的大小是 1600 x 100 像素 , 截图展示如下 : 实际图片 : 二、代码分析 1、动画属性 使用上图实现 逐帧动画 效果 …
htmlCSS-----案例展示
目录
前言
作品效果
html代码
CSS代码
图片资源 前言 在学习html过程中我们要试着去写写一些案例，通过这些案例让我们更加熟悉代码以及丰富我们的经验，下面是我个人写的一个案例，代码和图片也给出了大家，你们可以参考参考。…
css3 瀑布流布局遇见截断下一列展示后半截现象
css3 瀑布流布局遇见截断下一列展示后半截现象
注：css3实现瀑布流布局简直不要太香～～～～～
场景-在uniapp项目中
当瀑布流布局column-grap:10px 相邻两列之间的间隙为10px，column-count:2,2列展…
CSS3 中新增了哪些常见的特性？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 圆角（Border Radius）⭐ 渐变（Gradients）⭐ 阴影（Box Shadow）⭐ 文本阴影（Text Shadow）⭐ 透明度（Opacity）⭐ 过渡&…
BFC（Block formatting context 块级格式化上下文）
1、开启了BFC能解决什么问题？
给父元素开启BFC，其子元素不会再产生 margin 塌陷问题。自己不会被其他浮动元素所覆盖。就算其子元素浮动，元素自身高度也不会塌陷。
2、如何开启？
根元素浮动元素绝对定位、固定定位的元素行内块…
CSS实现左侧固定，右侧自适应(5种方法)
<div class"father"><!-- 左右div不能调换顺序来写 --><div class"left">固定宽度区</div><div class"right">自适应区</div>
</div>
一、利用左侧浮动float右侧margin-left /* 利用浮动floatmargin…
渐进增强和优雅降级区别
文章目录 前言一、渐进增强二、优雅降级三、两者区别四、渐进增强和优雅降级如何抉择 前言
渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等，不支持css3，但是css3的样式又特别优秀，所以在高级浏览器中应用css3样式，在低…
鼠标移动视差玻璃态效果
效果展示 页面结构组成
从页面上可以看到页面的结构比较简单，主要的元素如下：
背景图片文字带有清晰中心圆的毛玻璃
但是在怎么组织这几个元素的层次关系就需要需要考虑一下，并且中间的圆怎么实现也是需要考虑的。
CSS 知识点
clip-path…
浏览器渲染原理 - 输入url 回车后发生了什么
目录 渲染时间点渲染流水线1，解析（parse）HTML1.1，DOM树1.2，CSSOM树1.3，解析时遇到 css 是怎么做的1.4，解析时遇到 js 是怎么做的 2，样式计算 Recalculate style3，布局 la…
HTML5+CSS3+JS小实例：鼠标滚轮水平滚动
实例：鼠标滚轮水平滚动
技术栈：HTML+CSS+JS
效果： 源码：
【html】 <!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="…
用css来实现上下左右箭头
i {/* 用border值来控制箭头粗细 */border: 3px solid black;/* 上、右、下、左 四个边框的宽度 */border-width: 0px 1px 1px 0px;display: inline-block;/* padding值控制箭头大小 */padding: 5px;
}
____________________________________.right {transform: rotate(-45deg…
CloudNative Days China 2020北京站—云原生边缘计算专场强势来袭
云原生技术日渐成熟，已经成为新时代云计算的技术标准。随着5G的商用化普及及企业数字化转型催生了边缘计算, 成为云计算的新边界。云原生与边缘计算相遇会碰撞出怎样的火花？KubeEdge 作为 CNCF 首个孵化的云原生边缘计算项目，如何将云原生与边…
实现滚动条和模仿小米logo切换
css部分 <style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 12px;}.bar_in {width: 50%;height: 100%;background-color: red;border-radius: 12px;}.bar:hover .bar_in {width: 100%;transition: all ease 0.3s;}.logo {margin: 50px;width…
10个常见渐变交互效果
1、透明度渐变背景交互 <div class"fade-background"></div> Copy
.fade-background {width: 200px;height: 200px;background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));transition: background 0.5s ease;
}.fade-backgro…
Python/Spring Cloud Alibaba开发--前端复习笔记（1）———— html5和css3.html基础
Python/Spring Cloud Alibaba开发–前端复习笔记（1）———— html5和css3.html基础
1)概述和基本结构
超文本标记语言。超文本指超链接，标记指的是标签。 基本结构：
<!DOCTYPE html> 文档声明
<html lang”en”>…
uniapp scrollview 滚动最新位置
uniapp 效果是模拟发送聊天信息，需要scrollview在收到新消息时滚动到底部最新的位置
项目是vue2的，代码如下
scrollToBottom(selector) {this.$nextTick(() > {const dom uni.createSelectorQuery().in(this).select(selector)dom.boundingClientR…
CSS3盒模型+flex
1.盒模型
标准盒模型:
wwidthpaddingborderhheightpaddingborder
怪异盒模型(ie盒模型)
wwidth包含了(paddingborder)hheight包含了(paddingborder) 2.CSS3弹性盒(重点新版弹性盒)
弹性盒:
设置为弹性盒后,父元素为容器,子元素为项目弹性盒中存在两根轴,默认水平为主轴,垂…
Grid布局详解-看这篇就够了
Grid网格布局的概念，和flex布局的区别
含义：它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 区别：Gid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是&#…
JavaScript（笔记）
目录
Hello World
JavaScript 的变量
JavaScript 动态类型
隐式类型转换
JavaScript 数组
JavaScript 函数
JavaScript 中变量的作用域
对象
DOM
选中页面元素
事件
获取 / 修改元素内容
获取 / 修改元素属性
获取 / 修改 表单元素属性
获取 / 修改样式属性
新…
HTML5+CSS3+Vue小实例：路飞出海的动画特效
实例：路飞出海的动画特效
技术栈：HTML+CSS+Vue
效果： 源码：
【HTML】
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=&…
CSS3中的字体和文本样式
CSS3优化了CSS 2.1的字体和文本属性，同时新增了各种文字特效，使网页文字更具表现力和感染力，丰富了网页设计效果，如自定义字体类型、更多的色彩模式、文本阴影、生态生成内容、各种特殊值、函数等。
1、字体样式
字体样式包括类…
css position属性与js滚动
“视口”就是浏览器窗口中实际显示文档内容的区域，不包含浏览器的“外框”，如菜单、工具条和标签。文档则是指整个网页。
1 css 的position static 正常定位，是元素position属性的默认值，元素遵循常规流。 relative 相对定位&…
基于React实现：弹窗组件与Promise的有机结合
背景
弹窗在现代应用中是最为常见的一种展示信息的形式，二次确认弹窗是其中最为经典的一种。当我们在React，Vue这种数据驱动视图的前端框架中渲染弹窗基本是固定的使用形式。
使用方式：创建新的弹窗组件，在需要弹窗的地方引用并…
前端 用HTML，CSS, JS 写一个简易的音乐播放器
<!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><title>Music Player</title><style>/* 样式可自行修改 */.container {width: 600px;margin: 0 auto;}h2 {text-align: center;}.controls {displ…
CSS3 用户界面、图片、按钮
一、CSS3用户界面：
在CSS3中，增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框。CSS3用户界面属性：resize、box-sizing、outline-offset。
1、resize：
resize属性指定一个元素是否应该由用户去调整大小。
<style…
两栏布局：左侧固定，右侧自适应
左侧宽度固定，右侧宽度自适应剩余空间 方法一：float margin
方法二：flex布局 相关HTML代码
<div class"container"><div class"left"></div><div class"main"></div>
</d…
品优购：nav导航、footer部分
目录 nav导航栏
footer部分
mod-copyright nav导航栏
nav盒子通栏有高度，有下边框 1号盒子左浮动，dropdown 2号盒子左侧浮动，navitems导航栏组
先看dropdown里，先表头，这里意思是description term, 然后是一系列表…
css的概念+书写位置+CSS样式规则与应用案例
css的概念
CSS是层叠样式表（Cascading Style Sheets）的缩写。它是一种用于描述网页样式的语言，包含了文本、布局、颜色、字体、图像等方面的样式。通过CSS，可以将网页的表现和内容分离开来，从而使网页更容易进行维护和…
jq h5 图片上传回显
上 代码 <!DOCTYPE html>
<html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno" /><meta name"rendere…
CSS：calc() 函数 / 动态计算长度值 / 不同场景使用
一、理解 css calc() 函数
CSS calc() 函数是一个用于计算 CSS 属性值的函数。它可以在 CSS 属性值中使用数学表达式，从而实现动态计算属性值的效果。calc() 函数可以使用加减乘除四种基本数学运算符来计算属性值，还可以使用括号来改变优先级。
二、ca…
TailwindCSS 如何设置 placeholder 的样式
前言
placeholder 在前端多用于 input、textarea 等任何输入或者文本区域的标签，它用户在用户输入内容之前显示一些提示。浏览器自带的 placeholder 样式可能不符合设计规范，此时就需要通过 css 进行样式美化。
当项目中使用 TailwindCSS 处理样式时&a…
CSS——sticky定位
1. 大白话解释sticky定位
粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段
在最近可滚动容器没有触发滑动之前，sticky盒子的表现为相对定位relative【第一阶段】，
但当最近可滚动容…
前端面试——CSS面经（持续更新）
1. CSS选择器及其优先级
!important > 行内样式 > id选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 子/后台选择器 > *通配符
2. 重排和重绘是什么？浏览器的渲染机制是什么？
重排(回流)：当增加或删除dom节点&…
成都工业学院Web技术基础（WEB）实验五：CSS3动画制作
写在前面
1、基于2022级计算机大类实验指导书
2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样
3、图片和文字仅为示例，需要自行替换
4、如果代码不满足你的要求，请寻求其他的…
2024年跨年倒计时代码祝福！
首先，本代码借鉴了陈橘又青这位博主的代码参考
如有冒犯，请联系我删除
<!doctype html><html><head><meta charset"utf-8"><title>新年快乐</title><style>body{overflow: hidden;margin: 0;}h1{…
Vue2 通过.sync修饰符实现数据双向绑定
App.vue
<template><div class"app"><buttonv-on:clickisShowtrue>退出按钮</button><BaseDialog:visible.syncisShow></BaseDialog></div>
</template><script>
import BaseDialog from "./components…
UnoCSS 原子化开发初体验
UnoCSS 是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。再也不用为了取一个 classname 类名而烦恼了。 一、UnoCSS 特点
完全可定制：无核心工具，所有功能都通过预设提供…
javaEE -17（13000字 CSS3 入门级教程）
一：CSS3 简介
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题，CSS3 在未来会按照模块化的方式去发展：https://www.w3.org/Style/CSS/current-work.html …
CSS3 2D变形 过渡 动画
transform(2D变形)概述translate()平移scale()缩放skew()倾斜rotate()旋转transform-origin中心原点 CSS3 2D变形 3D变形 过渡 动画 在CSS3中，动画效果包括4个部分：变形（transform）、3D变形、过渡（transit…
编程笔记 html5cssjs 009 HTML链接
编程笔记 html5&css&js 009 HTML链接 一、HTML 链接二、文本链接三、图片链接四、HTML 链接- id 属性五、锚点链接六、HTML 链接 - target 属性小结 网页有了链接，就可根据需要进行跳转。纸质读物只能根据指示的页码翻页，而网页则可以通过链接直…
HTML5+CSS3+JS小实例：过年3D烟花秀
实例：过年3D烟花秀
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><…
css如何实现页面布局与五种实现方式
CSS布局实现的主要方式有以下几种：
一、盒模型布局：CSS中，每个元素都是一个盒子，包括内容、内边距、边框和外边距。通过设置盒子的属性（如宽度、高度、内边距、边框、定位等），可以实现不同的布…
css 星星闪烁加载框
今天带来的是普灵普灵的loader闪烁加载框
效果如下 开源精神给我们带来了源码 ,源码如下
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…
纯css手写switch
CSS 手写switch 纯css手写switchcss变量 纯css手写switch 思路： switch需要的元素有：开关背景、开关按钮。点击按钮后，背景色变化，按钮颜色变化，呈现开关打开状态。 利用typecheckbox，来实现switch效果(修…
CSS盒子模型的详细解析
03-盒子模型
作用：布局网页，摆放盒子和内容。
盒子模型-组成 内容区域 – width & height 内边距 – padding（出现在内容与盒子边缘之间） 边框线 – border 外边距 – margin（出现在盒子外面）
d…
css实现圆形进度条
能用现成组件就用，实现不行再自己写，因为牵扯到上传文件，进度实时出不来，所以只能使用dom元素操作；
1.实现
效果： 上图是100%，如果需要根据百分比显示，我们需要看下代码里面left和…
CSS 中的伪装大师：伪类和伪元素的奇妙世界
🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…
2024年1月12日
1 实现九宫格布局，每个格子（小盒子）都有相同的边距，同时整体容器也有边距，可以使用多种CSS布局方法 1使用Flexbox布局： .container {display: flex;justify-content: space-between; /* 分散对齐 */flex-wr…
css绘制常见的一些图形
以下是在CSS中绘制常见图形的示例代码：
线条：
.line {width: 100px;height: 1px;background-color: black;
}箭头：
.arrow {width: 0;height: 0;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right:…
css3文字环绕旋转
目录 固定数量文字环绕旋转不固定数量文字环绕旋转效果图 固定数量文字环绕旋转
<!-- 文字旋转测试 -->
<template><div class"page"><div><div v-for"(item, index) in [...Array(20).keys()]" :key"index" style&…
CSS 文字溢出:ellipsis在IE上不起效果
单行文本的溢出显示省略号
p {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}多行文本的溢出显示省略号
方法一：
p {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;
}…
编程笔记 html5cssjs 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架 一、Bootstrap简介二、使用Bootstrap布局 网页布局不只用HTML，还要用CSS和JAVASCRIPT等技术完成,这里暂时简单了解一下Bootstrap。 一、Bootstrap简介
这是一个开源的前端框架，由Twitter的前端工程师Ma…
编程笔记 html5cssjs 013 HTML布局
编程笔记 html5&css&js 013 HTML布局 一、使用 <div> 元素的网页布局二、使用 <table> 元素的网页布局三、操作小结 网页布局对改善网站的外观非常重要。请慎重设计您的网页布局。 一、使用 <div> 元素的网页布局
div 元素是用于分组 HTML 元素的块…
图片放大缩小时，图片上会出现蓝色蒙版解决方案
1. 问题描述：
页面上需要展示几张图片，并且有放大、缩小、旋转功能，在放大时，图片上出现了蓝色蒙版，如下图： 2. 解决方案： body{ -webkit-user-select:none; -moz-user-select:none; -ms-user…
css 两栏布局的实现
目录 前言
1. 浮动布局
用法
代码示例
理解
2. Flex布局
用法
代码示例
理解
3. Grid布局
用法
代码示例
理解
高质量的设计 前言
两栏布局是一种常见的网页设计模式，它将页面分为两个主要区域：主内容区域和侧边栏。这种布局方式不仅能够提…
10-动画animation
动画animation 动画-过渡和动画之间的异同-animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画-animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长-animation-timing-function 设置动画将如何完成一个周…
编程笔记 html5cssjs 028 HTML输入属性(2/2)
[TOC](编程笔记 html5&css&js 028 HTML输入属性(2/2)) HTML5新半了很多输入属性。使表单输入更加细致，减少了页面编程的复杂性。 HTML5 输入属性
HTML5 为 增加了如下属性： autocomplete autofocus form formaction formenctype formmethod for…
css3 transform:scale
transform:scale
语法：transform:scale(x,y);
<html>
<head><style>.box1 {display: inline-block;width: 200px;height: 200px;background-color: pink;}.box2 {display: inline-block;width: 200px;height: 200px;background-color: red;tran…
编程笔记 html5cssjs 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG 一、HTML5 SVG二、什么是SVG？三、SVG优势四、SVG 与 Canvas两者间的区别五、练习小结 svg也是绘图，不过绘制的是矢量图。 一、HTML5 SVG
SVG 定义为可缩放矢量图形。 HTML5 支持内联 SVG。 HTML <svg>…
通过CSS实现渐变色边框
通过CSS实现渐变色边框的几种方法：
1. 使用border-image实现渐变色边框，边框圆角
.box{border-radius: 16px;border: 10px solid;border-image: linear-gradient(#8f41e9, #578aef,#ff5277)30 30;}这种方式虽然简单但有个明显的缺陷，不支持…
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-2 CSS3 旋转缩放
代码
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>CSS3 旋转缩放</title>
<style>
div {width: 150px;height: 150px;background-color: #eee;transition: all 1s;
}
div:hover {/*改变和转换ÿ…
Vue.observable详解（细到原码）
文章目录 一、Observable 是什么二、使用场景三、原理分析参考文献 一、Observable 是什么
Observable 翻译过来我们可以理解成可观察的
我们先来看一下其在Vue中的定义 Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 返回…
编程笔记 html5cssjs 037 CSS选择器
编程笔记 html5&css&js 037 CSS选择器 一、CSS 选择器二、CSS 元素选择器三、CSS id 选择器四、CSS 类选择器五、CSS 通用选择器小结 CSS用于处理网页的样式，就像一个人的装扮，拿来一个衣物或饰品，你得知道穿着在什么部位，…
十五、CSS3DObject和CSS2DObject的区别
在3d场景中我们会遇到很多标签，主要分为三种，css3dobject、css2dobject、css3dsprite三种，今天主要说说css3dobject和css2dobject的相似点和区别。
Threejs版本：0.138.3
下面看实现的效果： 相似点 使用方法都是差不多的，下面讲解下css2dobject的使用方法在index.html增…
【CSS3线性渐变·元素转换·HTML】
线性渐变
线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。 background-image: linear-gradient(); .gradient2 {margin-left: 10px;width: 100px;height: 100px;background-image: linear-gradient(to right, #ff9d72, #c6c9ff);}/*从左上角到右下角的渐变*/.gradien…
前端：布局（用于div中有多行元素，一行只显示四个，最左或最右要紧贴父div，最顶层和最底层也要紧贴父div）
效果 一、flex实现
html
<!DOCTYPE html>
<html><head><title>Flexbox Layout</title><style>.container {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 10px;border: 1px solid red;}.box {flex: 1 0 calc(25% …
编程笔记 html5cssjs 043 CSS尺寸属性
编程笔记 html5&css&js 043 CSS尺寸属性 一、CSS 设置高度和宽度二、CSS 高度和宽度值三、设置 max-width四、设置 CSS 尺寸属性五、练习小结 块的宽度和高度，决定了块的大小，也就是尺寸。 一、CSS 设置高度和宽度
height 和 width 属性用于设置…
html中，元素width和height的单位px、cm、mm、in、pc、pt、ch、em、rem、vh、vw、vmin、vmax的含义
在 HTML 中，元素的 width 和 height 属性可以使用多种单位来表示尺寸。下面是这些单位的含义： 像素（px）：像素是最常见的单位，表示固定的像素值。例如，width: 200px; 表示元素的宽度为 200 像素。…
跟着pink老师前端入门教程-day09
二十二、定位
22.1 为什么需要定位
1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
2. 当我们滚动窗口时，盒子是固定屏幕某个位置的
解决方法：
1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排…
编程笔记 html5cssjs 054 CSS默认值
css属性在没有设置的时候，也是有值的，这就是默认值。列在下面，方便查看。 元素 默认的 CSS 值a:link color: (internal value);text-decoration: underline;cursor: auto;a:visited color: (internal value);text-decoration: underline;curs…
【Web前端开发基础】CSS3之空间转换和动画
CSS3之空间转换和动画 目录 CSS3之空间转换和动画一、空间转换1.1 概述1.2 3D转换常用的属性1.3 3D转换：translate3d（位移）1.4 3D转换：perspective（视角）1.5 3D转换：rotate3d（旋转&a…
css3前端开发，动态特效transform案例1-沿X轴倾斜和旋转
css3前端开发，动态特效transform案例1-沿X轴倾斜和旋转！内容可能有点长，请大家仔细看代码。
案例展示地址：【沿X轴倾斜特效】。 <!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-…
web前端之不一样的居中方式、解决tabBar选项卡居中问题、css支持嵌套、auto
MENU 前言htmlstyle效果 前言 这里不能使用justify-content: center;，因为在小屏幕上，这种方式无法显示最前面的两个tabBar。 html
<div id"box" class"d_f o_a mt_50 mb_50 ml_20 mr_20"><div class"ws_n">…
Web04--Flex布局
1、flex布局
1.1 flex认识 1.2 flex组成 1.3 flex布局 1.3.1 主轴对齐方式
<!DOCTYPE html>
<html lang"CN">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.…
编程笔记 html5cssjs 056 CSS不透明度
编程笔记 html5&css&js 056 CSS不透明度 一、CSS 不透明度 / 透明度二、使用 RGBA 的透明度三、透明盒中的文本小结 不透明度/透明度。利用透明度可以提高页面的层次效果。 一、CSS 不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。 opacity 属性通常与 :h…
编程笔记 html5cssjs 058 css计数器
编程笔记 html5&css&js 058 css计数器 一、带计数器的自动编号二、嵌套计数器三、CSS 计数器属性练习小结 CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。计数器使您可以根据内容在文档中的位置来…
编程笔记 html5cssjs 061 JavaScrip简介
编程笔记 html5&css&js 061 JavaScrip简介 一、JavaScript概述二、JavaScript的主要特点三、历史延革四、JavaScript与前端开发小结 JavaScript 是 web 开发者必学的三种语言之一：HTML 定义网页的内容；CSS 规定网页的布局；JavaScript…
编程笔记 html5cssjs 068 JavaScrip Boolean数据类型
编程笔记 html5&css&js 068 JavaScrip Boolean数据类型 一、Boolean数据类型二、运算符三、代码示例小结 JavaScript中的Boolean数据类型详解及示例。在JavaScript中，Boolean（布尔）数据类型是一种基本数据类型，它有两个可…
【CSS3】flex布局实践篇 | 7种常见网页布局方案
1、垂直居中 垂直居中一度是前端面试时必问知识点。 目前的垂直解决方案 使用了 从负外边距 到 display:table-cell 等荒谬的奇技淫巧，包括全高的伪元素。这些方法是又复杂又难写。
不知道大家第一次使用flex布局做什么，反正我是用来做垂直居中…
布局技巧及CSS初始化
一，margin负值巧妙应用
二，文字围绕浮动元素
三，行内块
四，CSS三角强化
五，CSS初始化
一，margin负值巧妙应用
制作盒子的细线边框： 鼠标经过li后变色： 二，文字围绕…
three.js CSS3DRenderer、CSS3DObject渲染HTML标签
有空的老铁关注一下我的抖音： 效果： <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red;position: relative;"><…
编程笔记 html5cssjs 069 JavaScrip Undefined数据类型
编程笔记 html5&css&js 069 JavaScrip Undefined数据类型 一、undefined数据类型二、类型运算小结 在JavaScript中，undefined 是一种基本数据类型，它表示一个变量已经声明但未定义（即没有赋值）或者一个对象属性不存在。 一…
Cesium.js三维地图的实现（依托天地图CDN文件）
零、技术选型： Vue2、VueCli5、天地图、Cesium.js 一、通过天地图官网案例实现
需要引入天地图官方提供的CDN链接访问Cesium.js相关文件 相关文件： https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js https://api.tianditu.gov.cn/…
使用css实现旋转木马HTML
使用css实现旋转木马HTML
效果图 实现代码如下
<!DOCTYPE html>
<html lang"zh-cn"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…
flex布局的所有属性和应用场景（建议收藏）
目录 一、是什么二、属性flex-directionflex-wrap# flex-flowjustify-contentalign-itemsalign-contentorderflex-growflex-shrinkflex-basisflexalign-self 三、应用场景参考文献 一、是什么
Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、…
css3 属性 backface-visibility 的实践应用
backface-visibility 是一个用于控制元素在面对屏幕不同方向时的可见性的CSS3特性。它有两个可能的值：
visible：当元素不面向屏幕（即背面朝向用户）时，元素的内容是可以被看到的。hidden：当元素不面向屏幕…
跟着pink老师前端入门教程-day13
品优购案例
一、品优购项目规划
1. 品优购项目整体介绍
项目名称：品优购
项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作
2. 品优购项目学习目的
1. 电商类网站比较综合，里面需要大量的布…
Vue3 vant4 解决引入的Toast和dialog样式丢失的bug
情景再现： 正确做法：
在main.ts中单独引入
import vant/es/toast/style
import vant/es/dialog/style
import { Toast, Dialog } from vantapp.use(Toast)
app.use(Dialog)效果如下 轻松拿下。
编程笔记 html5cssjs 075 Javascrip 常量和变量
编程笔记 html5&css&js 075 Javascrip 常量和变量 一、JavaScript 变量二、JavaScript 常量三、示例：小结： 在JavaScript中，变量和常量是用来存储数据的占位符。它们的主要区别在于可变性：变量的值可以改变，而…
编程笔记 html5cssjs 069 JavaScript Undefined数据类型
编程笔记 html5&css&js 069 JavaScript Undefined数据类型 一、undefined数据类型二、类型运算小结 在JavaScript中，undefined 是一种基本数据类型，它表示一个变量已经声明但未定义（即没有赋值）或者一个对象属性不存在。 …
HTML5和CSS3强化知识总结
HTML5的新特性 HTML5的新增特性主要是针对于以前的不足，增一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
HTML5新增的语义…
![[HTML]Web前端开发技术22（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，animation ，@keyframes，Transition——喵喵画网页](https://img-blog.csdnimg.cn/direct/20cfcba1ff6f4627b49be9e82a75e1e0.png)
[HTML]Web前端开发技术22（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，animation ，@keyframes，Transition——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录
前言
CSS3 转换transform 属性
2．CSS3 3D 转换
web游戏-飞机大战
H5小游戏源码、JS开发网页小游戏开源源码大合集。无需运行环境，解压后浏览器直接打开。有需要的，私信本人，发演示地址，可以后再订阅，发源码，含60+小游戏源码。如五子棋、象棋、植物大战僵尸、开心消消乐、扑鱼达人、飞机大战等等 <!DOCTYPE html> <html lang=&q…
编程笔记 html5cssjs 072 JavaScript BigInt数据类型
编程笔记 html5&css&js 072 JavaScript BigInt数据类型 一、BigInt 数据类型二、BigInt 的创建和使用三、BigInt 操作与方法三、示例小结 JavaScript BigInt 数据类型是一种内置的数据类型，用于表示大于 Number.MAX_SAFE_INTEGER（即2^53 - 1&…
前端每日一练：深入理解渐进增强与优雅降级：构建更可靠的前端体验
在前端开发中，处理不同浏览器和设备的兼容性问题是至关重要的。渐进增强和优雅降级是两种策略，它们都旨在确保网站在各种环境中能够提供尽可能良好的用户体验。让我们深入探讨这两种策略，并通过示例展示如何更好地构建可靠的前端体验。
渐进…
前端每日一练：如何隐藏一个元素？
css 中隐藏元素的方法有很多，但他们也各有差异，不同场景选择合适的方式能事倍功半！ 方式 占位 点击事件 display: none ❌ ❌ opacity: 0 ✅ ✅ visibility: hidden ✅ ❌ clip-path: circle(0) ✅…
HTML5+CSS3+JS小实例：暗紫色Tabbar
实例：暗紫色Tabbar
技术栈：HTML+CSS+JS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scal…
跟着pink老师前端入门教程-day23
苏宁网首页案例制作
设置视口标签以及引入初始化样式 <meta name"viewport" content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0"> <link rel"stylesheet" href"css/normaliz…
为什么元素显示的样式跟我设置的不一样？CSS优先级详解
一、什么是CSS中的选择器优先级？ 在CSS中，选择器优先级是指确定应用于元素的最相关CSS声明的算法。这个优先级决定了哪个样式规则将被应用到元素上。根据选择器的类型和特定性，CSS规定了不同的优先级，例如ID选择器比类选择器具有更…
蓝桥杯（Web大学组）2022省赛真题：展开你的扇子
思路： transform-origin: center bottom;使盒子旋转时，以底部的中心为坐标原点（题目已给出）
对每个盒子使用transform: rotate();实现旋转
笔记：
设置悬浮旋转时， #box div:hover #item6{ } 为什…
re:从0开始的CSS之旅 20. 渐变（暂完结撒花）
1. 渐变
渐变：使背景颜色有逐渐变化的效果
1. 线性渐变
background-image: linear-gradient(to left top, #c7edcc, #fde6e0, #dce2f1);
第一个参数可选值为： to top/right/left/bottom/top right/…… 第二个参数到第n个参数为需要渐变的颜色&#…
[前端开发] CSS基础知识 [下]
上篇:CSS 基础知识 [上] CSS基础知识 [下] CSS 新特性媒体查询雪碧图字体图标 CSS 新特性 圆角 (border-radius) 通过 border-radius 属性为元素添加圆角。类型: border-radius: a b c d: 四个值分别为左上|右上|右下|左下角border-radius: a b c : 三个值分别为左上|右上和左下…
解决弹性布局父元素设置高自动换行，子元素均分高度问题（align-content: flex-start）
案例：
<view class"abc"><view class"abc-item" v-for"(item,index) in 8" :key"index">看我</view>
</view>
<style lang"less">.abc{height: 100px;display: flex;flex-wrap: …
【Web前端笔记10】CSS3新特性
10 CSS3新特性
１、圆角
２、阴影
（１）盒阴影
３、背景渐变
（１）线性渐变（主要掌握这种就可）
（２）径向渐变
&…
![[HTML]Web前端开发技术30（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页](https://img-blog.csdnimg.cn/direct/44fefd513d784403b46ad2e442f96f9b.png)
[HTML]Web前端开发技术30（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录
前言
网页标题：手机批发业务-商品备选区<
HTML5 CSS3 提高
一，HTML5的新特性
这些新特性都有兼容性问题，基本是IE9以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
1.1新增语义化标签 注意：
1这种语义化标签主要是针对搜索引擎的
2这些新标签在页面…
用CSS实现一个三角形
CSS绘制三角形主要用到的是border属性，也就是边框。
平时在给盒子设置边框时，往往都设置很窄，就可能误以为边框是由矩形组成的。实际上，border属性是右三角形组成的，下面看一个例子：
div {width: 0;heigh…
使用“弹性盒布局和媒体查询”实现一个响应式布局
要求实现如下布局：
当屏幕宽度大于640时 显示如下 当屏幕宽度小于640时 显示如下 <!DOCTYPE html>
<html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,…
html5新增标签+css3新增标签
新增标签 一.html5新增标签1.语义化标签2.多媒体标签（1）视频video（2）音频audio（3）.总结 3.input属性4.表单属性 二.css3新增选择器1.新增选择器（1）属性选择器（2ÿ…
利用textarea和white-space实现最简单的文章编辑器 支持缩进和换行
当你遇到一个非常基础的文章发布和展示的需求，只需要保留换行和空格缩进，你是否会犹豫要使用富文本编辑器？实际上这个用原生的标签两步就能搞定！ 1.直接用textarea当编辑器
textarea本身就可以保存空格和换行符，示例如…
【Threejs进阶教程-效果篇】1.Threejs文字与css2d/css3d技术
Threejs文字与css2d/css3d技术 学习ThreeJS的捷径学习之前先搞清楚自己想要什么样的效果贴图文字准备一张带文字的png贴图使用sprite来进行贴图实现2D始终面朝相机的文字使用planeGeometry来贴图实现3D文字使用planeGeometry来贴图实现伪3D文字动态贴图文字html2Canvas 文字几何…
解决前端性能瓶颈：高效处理大量数据渲染与复杂交互的策略与优化方法
✨✨祝屏幕前的小伙伴们每天都有好运相伴左右，一定要天天开心！✨✨ 🎈🎈作者主页： 喔的嘛呀🎈🎈 目录 引言
一、分页加载数据
二、虚拟滚动
三、懒加载
四、数据缓存
五、减少重绘和回流 …
尚硅谷html5+css3（2）CSS5基本知识
1.网页分为三个部分：
结构：HTML
表现：CSS
行为JavaScript
CSS:层叠样式表，网页实际上是一个多层结构，通过CSS可以分别为网页的每一个层来设置样式，最终用户只看最上面的一层，总之࿰…
探索LESS：与CSS预处理器的比较及实践指南
前言
在现代Web开发中，样式表的管理变得越来越复杂。LESS（Leaner Style Sheets），一种层叠样式表（CSS）预处理器语言，应运而生，旨在使CSS的编写更加高效、可维护。通过引入变量、混合…
css3中nth-child属性作用及用法剖析
hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 标题：CSS3中nth-child属性作用及用法剖析
摘要：CSS3中的nth-child选择器允许我们根据元素位置来定位特定的元素…
打造经典游戏：HTML5与CSS3实现俄罗斯方块
🌟 前言 欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍 &#x…
数字孪生一文扫盲，知否值得做
hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验！希望我的分享能帮助到您！如需帮助可以评论关注私信我们一起探讨！致敬感谢感恩！ 数字孪生一文扫盲：知否值得做
一、引言
近年来，数字孪生&…
表单进阶（3）-上传文件和隐藏字段
上传文件：<input type"file">
隐藏字段：<input type"hidden" name"" id"" value"带给后端的信息">
禁用disabled：<button disabled"disabled">注册</bu…
【JAVA】CSS定位与CSS3属性、渐变、CSS3字体、2D变换
1 定位
1.1 相对定位
相对定位没有脱离文档流
定位元素的显示层级比普通元素高
定位元素可以通过margin，float调整位置，但不推荐
包含块：父元素
left和right同时写，右失效
上下同时写，下失效 <head><s…
【JAVA】CSS3伸缩盒案例、响应式布局、BFC
1.CSS3伸缩盒案例
效果：用伸缩盒模型 <html lang"en">
<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>&…
yudao-mall-uniapp电商商城App平台：基于 Vue + Uniapp 的全功能开源电商平台实现（更新版）
yudao-mall-uniapp电商商城App平台：基于 Vue Uniapp 的全功能开源电商平台实现
摘要： 本文主要介绍了yudao-mall-uniapp电商商城App平台，一个基于 Vue 和 Uniapp 技术的全功能开源电商平台。文章首先概述了yudao-mall-uniapp电商商城App平台…
HTML5 CSS3常见新特性
HTML新特性
新增特性：
语义化标签：，如<header>、<footer>、<nav>、<article>、<section>等，能够更准确地描述网页结构视频和音频：添加了<video>和<audio>标签，…
CSS3的一些常用语句以及解释
margin和padding position
static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面…
css3实现3D立方体旋转特效源码
源码介绍
CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效
效果展示 下载地址
css3实现3D立方体旋转特效代码
使用html+css制作一个发光立方体特效
使用htmlcss制作一个发光立方体特效
<!DOCTYPE html>
<html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Documen…
web学习笔记（三十）
目录 1.jQuery选择器
2. jQuery祖宗的相关方法
3.jQuery子代的相关方法
4.jQuery同胞的相关方法
5.jQuery的class类操作
6.jQuery动画
6.1显示show()和hide()
6.2滑入slideDown()和滑出slideUp()
6.3淡入fadeIn()和淡出fadeOut()
7.自定义动画 animate() 1.jQuery选…
2024-3-13,14(CSS)
1.复合选择器
有两个或者多个基础选择器，通过不同的方式组合而成。
目的是更加准确高效的选择目标元素（标签）
分类：
后代选择器：选中某个元素的所有后代元素
写法：父选择器 子选择器 {CSS属性}&#x…
HTML5、CSS3面试题（四）
HTML5、CSS3面试题（三）-CSDN博客
简述弹性盒子 flex 布局及 rem 布局？（必会） rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root html{font-size:10px} 则 2rem2…
前端Vue与uni-app中的九宫格、十二宫格和十五宫格菜单组件实现
欢迎加入我们的前端组件学习交流群，可添加群主微信，审核通过后入群。 在前端 Vue 开发中，我们经常会遇到需要开发九宫格、十二宫格和十五宫格菜单按钮的需求。这些菜单按钮通常用于展示不同的内容或功能，提供给用户快速访问和选择…
web学习笔记（三十三）
目录 1.严格模式
1.1严格模式的概念：
1.2严格模式在语义上更改的地方：
1.3如何开启严格模式
1.4严格模式应用上的变化
2.原型链 1.严格模式
1.1严格模式的概念： 严格模式有点像es5向es6过渡而产生的一种模式，因为es6的语法…
前端小白的学习之路(CSS3 二)
提示：网格布局，背景与阴影 目录
一、网格布局
二、背景
1.图片背景
2.边框背景图
三 、阴影
1.盒子阴影
2.字体阴影 拓展：自定义字体 一、网格布局
开启网格布局
display: grid;设置多少行，每行的高度是多少
/*写法一*/…
CSS3DRenderer, CSS3DSprite API 使用案例demo
CSS3DRenderer, CSS3DSprite API 使用案例demo <!DOCTYPE html>
<html><head><title>three.js css3d - sprites</title><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, user-scalabl…
会员项目定价卡css3特效
会员项目定价卡css3特效，源码由HTMLCSSJS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面
下载地址
会员项目定价卡css3特效代码
uniapp样式穿透修改uview的按钮button图标
需求： 想给按钮icon和text改字体颜色，结果发现图标颜色并没有改变
.u-button{width: 300rpx;background-color: aliceblue;color: #aaaa7f;margin-top: 20rpx;
}接下来用样式穿透解决
1、首先，给UI组件包裹一层view
<view class"t…
css常用选择器用法和示例说明
标签选择器 (Element Selector)： 语法：element { property: value; }案例： Css 1p { color: green; } 说明：这个例子将会把所有<p>标签内的文本颜色设置为绿色。 类选择器 (Class Selector)： 语法：.…
Css提高——Css3的新增选择器
目录 1、Css3新增选择器列举
2、属性选择器
2.1、语法 2.2、代码： 2.3、效果图
3、结构伪类选择器 3.1、语法
3.2、代码 3.3、效果图
3.4、nth：child（n）的用法拓展 nth-child（n）与nth-of-type&#x…
CSS案例-5.margin产品模块练习
效果1
相关数据
整体长：298px，高：415px 效果2 知识点
外边距margin
块级盒子水平居中
条件：
必须有宽度左右外边距设为auto
三种写法：
margin-left：auto；margin-right：auto&…
用CSS实现一个扇形
用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个90的扇形：
div{border: 100px solid transparent;width: 0;heigt: 0;border-radius: 100px;border-top-color: red;
}
css 各种方位计算 - client系列 offset系列 scroll系列 x/y 系列
offset系列
HTMLElement.offsetTop - Web API 接口参考 | MDN 一文读懂offsetHeight/offsetLeft/offsetTop/offsetWidth/offsetParent_heightoffset-CSDN博客
client系列
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop-CSDN博客
scroll系列 秒懂scr…
带你玩透浮动float布局，详解（一）
文章目录 一 认识浮动二 浮动的规则浮动的规则一代码展示 浮动规则二代码展示 浮动规则四代码展示代码展示 浮动规则五 空隙的解决方案代码展示:第一种方式 放在一行第二种解决方式（不推荐使用这种方式）第三种方式采用浮动（推荐，统…
基于CSS3制作专属可自由旋转的立方体
一、代码区域
1.1 css3代码区域 <style>* {padding: 0;margin: 0;list-style: none;}/* 1) 定义动画 */keyframes loop {0% {transform: rotateX(348deg) rotateY(67deg) rotateZ(95deg);}50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}100% {transform:…
css的border详解
CSS的border属性是一个简写属性，用于设置以下四个边框属性： border-width：定义边框的宽度。可以使用具体的像素值，或者使用预定义的关键字如thin、medium和thick。border-width不支持百分比值。默认情况下，边框的宽度是…
HTML5和CSS3笔记
一：网页结构(html)：
1.1：页面结构： 1.2：标签类型：
1.2.1：块标签： 1.2.2：行内标签： 1.2.3：行内块标签： 1.2.4：块标签与行…
手机号验证码重新发送
前文叙述 很久以前做的一个 demo ，纯 HTML 、CSS、js 制作，一定时间段之后才可以重新发送验证码，如 60s 后再次发送验证码，在该时间段内发送验证码按钮为禁用状态，实战开发过程也亦是同理，因此记录一手。 一…
JS13-事件的绑定和事件对象Event
绑定事件的两种方式/DOM事件的级别
DOM0的写法：onclick element.onclick function () {}举例：
<body>
<button>点我</button>
<script>var btn document.getElementsByTagName("button")[0];//这种事件绑定的方式…
前端理论总结（css3）——三角形/梯形 // 一边固定另一边自适应
三角形/梯形 三角形
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000; 梯形
width: 50px;
height: 0;
border-bottom: 50px solid red;
border-l…
小谈HTML5和CSS3的一些重要特性，页面重构需要注意的方面？
HTML5和CSS3是当前前端开发中最重要的技术之一。它们提供了丰富的功能和效果，使得页面设计更加灵活和交互性更强。在进行页面重构时，我们需要注意一些方面，以确保页面的质量和性能。下面将详细介绍HTML5和CSS3的一些重要特性，并讨…
HTML5+CSS3小实例：文字边框视觉错位
实例：文字边框视觉错位
技术栈：HTML+CSS
效果： 源码：
【HTML】
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scal…
HTML元素语义化补充之css函数（三)
文章目录 CSS中的函数css函数–varcss函数–calccss函数–blurcss函数–gradientlinear-gradient的使用 CSS中的函数
◼ 在前面我们有使用过很多个CSS函数: 比如rgb/rgba/translate/rotate/scale等; CSS函数通常可以帮助我们更加灵活的来编写样式的值； ◼ 下面有几…
三栏布局——面试/笔试题
目录 三栏布局(两端指定宽度，中间自适应)三栏布局(平均分布) 三栏布局(两端指定宽度，中间自适应)
只介绍简单的写法，圣杯布局之类的比较复杂，实际上越简单越好，所以复杂的就不介绍了
flex布局
<!DOCTYPE html>…
css3之3D转换transform
css3之3D转换 一.特点二.坐标系三.3D移动（translate3d)1.概念2.透视（perpective)(近大远小）（写在父盒子上） 四.3D旋转（rotate3d)1.概念2.左手准则3.呈现（transfrom-style)（写父级盒子…
基于uQRCode封装的前端二维码生成组件实践
在前端开发中，二维码生成已成为一种常见需求。二维码凭借其简洁、方便的特点，被广泛应用于产品推广、信息交互等多个场景。在此背景下，开发一个易于使用且性能优越的二维码生成组件变得至关重要。本文基于uQRCode封装了一个前端二维码生成组件…
CSS基础语法-黑马跟课笔记-供记录与查询
一.CSS简介
1.1HTML局限性
只关注内容的语义，可以做简单的样式但是很臃肿且繁琐
1.2CSS优势
CSS层叠样式表，标记语言
设置HTML页面中的文本内容，图片外形，可以美化HTML，让页面布局更美观
HTML做框架，…
vue3+elementPlus：实现数字滚动效果（用于大屏可视化）
自行封装注册一个公共组件
案例一：
//成功案例：
//NumberScroll.vue
/*
数字滚动特效组件 NumberScroll
*/<template><span class"number-scroll-grow"><spanref"numberScroll":data-time"time"class&qu…
图片或视频充当网页背景+过渡动画
这是目前的主页预览图。上一个版本带有学校logo，根据比赛规则，删掉了学校logo。
图片背景
也就是将图片作为背景。 这个需求产生的场景是：如果直接用img标签显示界面左上角的logo，那么鼠标右键是可以直接选中图片的，…