自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 useRef 的使用

展示

2023-06-14 13:52:10 87

原创 useEffect 的使用

数组中有 state 中定义的值的时候,那个值的变换会触发生命周期钩子函数 componentDidUpdate, 其余的state 中定义的值 改变不会触发 componentDidUpdate。当第二个参数存在的时候且为[],参数1 这个函数就代表了 生命周期钩子函数 ​​​​​​​ ​​​​​​​ ​​​​​​。当第二个参数不存在的时候,参数1 这个函数就代表了生命周期钩子函数的。

2023-06-14 11:45:01 131

原创 hello_react react 基础使用

你好,React

2023-06-13 14:56:14 85

原创 css网格布局的用法

* 有几个auto 就有几个值,还可以设置成px *//*网格之间的空隙为10px是grid-row-gap 行空隙 和 grid-column-gap: 列空隙 的简写*/: 10px;/*: 1 / 4;//与下边相同, span 省略了*//*和的简写属性 *//*表示跨越几行 *//*: 1 / 3;//与下边相同, span 省略了*//*和的简写属性 *//* span 表示跨越几列 */您可使grid-area。。

2023-06-06 14:02:21 131

原创 z-index 的基本使用

h2 class="jsj words">这个是很长的一段文字可能会被挡住</h2>z-index 的值为负数 元素显示在底层;数值越大,展示层级越高;/*z-index 的值为负数 元素显示在底层*/

2023-06-06 10:18:52 109

原创 position 的使用

固定/相对于视口定位,即使这意味着即使滚动页面,它也始终位于同一位置</tag></button><button class="btn abso">absolute<tag>绝对/相对于最近的定位祖先元素进行定位</tag></button><button class="btn stick">sticky<tag>粘性/根据用户的滚动位置进行定位

2023-06-06 10:17:31 48

原创 line-height 深究

当line-height:150%的效果,父元素的行高为150%时,会根据父元素的字体大小先计算出行高值然后再让子元素继承。当line-height:1.5em的效果,父元素的行高为150%时,会根据父元素的字体大小先计算出行高值然后再让子元素继承。当line-height:1.5的效果,父元素行高为1.5时,会根据子元素的字体大小动态计算出行高值让子元素继承

2023-06-06 10:11:56 37

原创 css保持元素纵横比:新属性

/* 纵横比 css 新属性 */ aspect-ratio: 1/2;

2023-06-05 11:44:00 172

原创 清除浮动的方式除了overflow 还可以用clear

清除浮动的方式除了overflow 还可以用clear;在外层元素的伪元素中 设置clear:both; content: "";display:table;

2023-06-05 11:40:59 42

原创 酷炫 css 按钮 边框霓虹

按钮动画效果:通过层级 伪元素 css 动画实现

2023-06-05 11:39:11 229

原创 元素是浮动的,如何让其居中?

浮动的元素 要设置居中 可以在外层包裹一个div 然后加上 width: fit-content; margin: 0 auto ; 这样可以设置为水平居中;

2023-06-05 11:22:53 301

原创 css 选择器基本使用

选择器的基本使用,选择 元素内的所有 元素;父元素是 元素的所有 元素;紧随 元素之后的 元素; 前面有 元素的每个 元素

2023-06-05 11:16:57 32

原创 css 实现下拉的方式

css实现下拉的方式: 要下拉的容器,默认给样式display: none; hover的时候display:block;

2023-06-03 10:21:23 230

原创 常用伪元素的使用

*::selection 用于用户选择的部分,可以设置样式为背景background 颜色color 鼠标cursor 和轮廓 outline*//*::before 伪元素可用于在元素内容之前插入一些内容。/*::first-letter 作用于块状元素,内容的首字母*//*::first-line 作用于块状元素 ,内容的首行*//* ::after 用于在元素后边插入一些内容 */

2023-06-03 10:12:15 44

原创 图像精灵的基本使用

img id="home" src="trans.gif"> - 仅定义小的透明图像,因为 src 属性不能为空。而实际显示的图像将是我们在 CSS 中指定的背景图像。- 定义背景图片及其位置(left:0px, top:0px)-- trans.gif 是一张透明图片,因为没有这个图片,所以显示出来的有问题 -->width: 46px;- 定义我们要使用的图像部分大小。

2023-06-03 10:03:16 92

原创 属性选择器

属性选择器的用法

2023-06-03 09:37:13 48

原创 带三角箭头的悬浮提示

画一个三角形:容器宽高为0;其中一条border 有颜色、实线、宽度;其余三条border 宽度、实线、transparent。

2023-06-03 09:32:01 132

原创 canvas_10_裁剪路径

canvas__裁剪路径

2023-06-02 12:58:15 60

原创 canvas_9_合成

2: source-in 仅仅会出现新图像与原来图像重叠的部分,其他区域都变成透明的。3: source-out 仅仅显示新图像与老图像没有重叠的部分,其余部分全部透明。7: destination-out 仅仅老图像与新图像没有重叠的部分。注意显示的是老图像的部分区域。8: destination-atop 老图像仅仅仅仅显示重叠部分,新图像会显示在老图像的下面。6: destination-in 仅仅新老图像重叠部分的老图像被显示,其他区域全部透明。老图像仍然可以显示。

2023-06-02 12:56:37 41

原创 canvas_8_变形

translate(x, y) 用来移动 canvas 的原点到指定的位置rotate(angle) 旋转坐标轴 它是顺时针方向的,以弧度为单位的值。scale(x, y) 对形状,位图进行缩小或者放大。 值比 1.0 小表示缩 小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。

2023-06-02 12:54:54 32

原创 canvas_7_状态保存和恢复

save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。

2023-06-02 12:51:32 97

原创 canvas_6_绘制图片

drawImage(imageResource, dx, dy, dWidth, dHeight)

2023-06-02 12:49:21 25

原创 canvas_5_绘制文本

canvas_5_绘制文本绘制文本的两种方式:ctx.fillText(text, x, y , maxWidth)ctx.strokeText(text, x, y , maxWidth)

2023-06-02 12:43:46 96

原创 canvas_4_样式与颜色

【代码】canvas_4_样式与颜色。

2023-06-02 12:38:27 27

原创 canvas_3_绘制弧形

【代码】canvas_3_绘制弧形。

2023-06-02 12:37:49 116 1

原创 canvas_2_绘制路径

【代码】canvas_2_绘制路径。

2023-06-02 12:36:12 34

原创 canvas_1_绘制两个矩形

【代码】canvas_绘制两个矩形。

2023-06-02 11:35:23 291

空空如也

空空如也

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

TA关注的人

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