自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(17)
  • 收藏
  • 关注

原创 Mac homebrew 切换为国内源

M1版本安装homebrew官网方法:macOS(或 Linux)缺失的软件包的管理器 — Homebrew$(curl-fsSL)Mac 下 brew 切换为国内源以下引用自:Mac 下 brew 切换为国内源 - 云+社区 - 腾讯云。

2022-12-18 16:56:19 1380 1

原创 CSS的盒模型

盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。

2022-11-05 01:50:12 121

原创 Echart 多Y轴 和 多X轴

多Y轴案例蓝色的线,对应左Y轴。绿色的线,对应右Y轴特殊配置项yAxis当只需要一个Y轴时,Y轴定义为 当需要多个Y轴时, 用来定义两个Y轴是否对其,默认为不对其两者区别为:为不对其为对其刻度线 用来定义是否把Y轴倒过来,默认为区别:不反向为反向多X轴和多Y轴,类似特殊配置项xAxis和y轴一样...

2022-07-08 19:50:18 1034 1

原创 Flex布局

Flex布局/弹性布局:是一种浏览器提倡的布局模型布局网页更简单、灵活避免浮动脱标的问题Flex布局模型构成作用基于 Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生。Flex布局非常适合结构化布局设置方式父元素添加 display: flex子元素可以自动的挤压或拉伸组成部分弹性容器弹性盒子主轴侧轴 / 交叉轴flex布局极大的提高了我们布局的效率,更简单、灵活。示例:<style> .bo.

2022-04-02 18:51:37 209

原创 移动端特点

PC端/移动端不同?PC端屏幕大,网页固定版心端浏览器繁多,更多考虑兼容性问题。(布局: 浮动+定位+标准流)移动端手机屏幕小,网页宽度多数为100%,是适配手机屏幕宽度移动端则基本不需要考虑兼容性问题,放心大胆使用CSS新特性物理分辨率和逻辑分辨率物理分辨率:硬件所支持的,屏幕出厂就设定无法修改逻辑分辨率:软件可以达到的, 我们开发中写的是逻辑分辨率视口视口(viewport)就是浏览器显示页面内容的屏幕区域。视口的分类:布局视口 。 iOS, Android基本

2022-04-01 19:21:20 162

原创 perspective 和 transform-style 区别

perspective 是透视,可以让电脑模拟 3d效果, 实现近大远小的效果。transform-style 立体呈现 可以让 子元素 里面按照设置位移,旋转,缩放,扭曲等。如果不给父元素这个属性,这里面所有的子盒子都是平面的。正常情况下:爷爷设置perspective父亲设置transform-style: preserve-3d孩子们设置位移,旋转,缩放,扭曲等。...

2022-04-01 19:04:00 274

原创 transition 和 animation的区别

transition: 属性 花费时间 速度曲线 延时时间;transition: width 2s ease 1s; animation: 动画名称 花费时间 速度曲线 延时时间 重复次数 动画方向 执行完毕的状态;过渡经常配合鼠标经过使用,只能设置起始和结束状态。动画可以自动执行,而且无限循环等。(其中 动画名称和花费时间必须要写),里面可以有很多的形态,比如 0%, 10% … 100%...

2022-04-01 19:01:45 122

原创 动画属性 @keyframes

动画最大的特点可以不用鼠标触发,自动的,反复的执行某些动画。动画使用分为定义和调用:定义:/* 1. 定义的动画 */@keyframes dance { from { transform: scale(1) } to { transform: scale(1.5) }}或者是 /* 1. 定义的动画 */ @keyframes dance { 0% { transform: sc

2022-03-31 20:14:57 449

原创 transform(3D)空间转换

3D坐标系3D 坐标系比2D 多了一个Z轴。一定要记住3个坐标轴取值的正反:X 轴 往右越大,是正值, 否则反之Y 轴 往下越大,是正值,否则反之Z轴 (指向我们)越大,是正值,否则反之3D位移transform: translate3d(x, y, z);transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);透视透视的作用: 空间转换时,为元素添加近

2022-03-31 17:12:16 528

原创 变形 transform(2D)

变形可以改变盒子在平面内的形态(位移、旋转、缩放等等)位移 translatetranslate可以让盒子沿着x轴或者y轴来移动。语法:transform: translate(x, y);transform: translateX(x);transform: translateY(y);translate和margin的区别margin移动盒子会影响其余的盒子。把其他人挤走。位移translate移动盒子不会影响其他的盒子。不脱标。位移经常需要的场景:比如 盒子上下移动不影响

2022-03-29 22:55:42 122

原创 transform实现动态效果

实现如上图动态效果<style> .box { position: relative; width: 500px; height: 500px; margin: 50px auto; } .box:hover .img1 { transform: translate(-50%, -50%) rotate(360deg); } .box:hover .img2 { transform: translate(-50%, -5.

2022-03-29 21:05:44 1163

原创 使盒子水平垂直居中

定位写死<style> .father { position: relative; width: 500px; height: 400px; background-color: pink; }​ .son { position: absolute; left: 50%; top: 50%; margin-top: -100p

2022-03-29 18:56:41 93

原创 iconfont 字体图标

下载字体图标具体的步骤:使用字体图标引入相关文件复制相关的文件,到 fonts文件夹里面。引入 css<link rel="stylesheet" href="./fonts/iconfont.css">使用类名引入字体图标如果是一个标签来使用字体文件,可以采取2个类名的形式。(开发最常用)<span class="iconfont icon-a-2-caidan"></span>iconfont :目的是告诉这个盒子里面的文字是

2022-03-29 18:07:46 623

原创 uniCloud基础操作 增删改查

新建项目新建一个uni-app项目 启动云开发 选择想要的云服务在此之前要先完成uniCloud的实名认证确认应用的应用标识appleID已经获取云空间有在Web控制台创建过云空间,就选择:关联云服务空间或项目如果没有,就创建cloudfuctions目录 用来放置云函数创建云函数在cloudfunction目录新建一个云函数,以test为例云函数新云函数的基础样式选择上传并运行,等待控制台完成上传成功上传成功可以去web端云函数列表查看是否有云函数出现在页面请求

2021-08-02 22:36:08 2279

原创 ES6块级作用域

ES6块级作用域var声明作用域使用var操作符定义的变量会成为包含他的函数的局部变量使用var在一个函数内部定义一个变量没就意味着该变量将在函数退出时被销毁function test() { var message = 'hi'; //局部变量}test();console.log("message: " + message); // 出错这里message变量是在函数内部使用var定义的,函数名为test(),调用他会创建这个变量,并给他赋值。调用之后变量随即被销毁,所以在

2021-07-31 22:44:49 131

原创 企业微信素材管理的使用

素材管理使用场景在使用企业微信API接口中,开发者需要使用自定义的资源,比如发送本地图片消息,设置通讯录自定义头像等。为了实现资源文件,一次上传可以多次使用,提供了素材管理接口:以media_id来标识资源文件,实现文件的上传与下载。上传临时素材调试工具素材上传得到media_id,该media_id仅三天内有效media_id在同一企业内应用之间可以共享请求方式:POST(HTTPS)请求地址:https://qyapi.weixin.qq.com/cgi-bin/media/upl

2021-07-31 21:37:07 2236

原创 uni-app优秀插件

组件库ThorUIColorUIUI界面和组件轮播图系列高级轮播图精致的图片展示组件,自定义面板指示点,可配置性强大小图轮播,类似手机相册图片轮播,商品详情图QSwiper组件切换动画很强大一款由自定义元素组成的有过渡动画及背景渐变的swiper、引导页,切分为元素解决了小程序占内存大问题画廊(ynGallery)组件类似轮播但不是通用画廊(ynGallery)组件 流畅的滑动感 类似于猫眼影廊 体验感不错带缩放的轮播轮播不能用于H5 uni.createAnimat

2021-07-20 20:49:14 5811

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除