HTML与CSS进阶

于 2024-05-12 02:40:00 发布
阅读量672 收藏 29
点赞数 15
分类专栏： 程序员 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84150191/article/details/138737414
版权

content: ‘德’;

background-color: lightskyblue;

}

div::before {

content: ‘道’;

background-color: mediumaquamarine;

}

伪元素字体图标

p {

position: relative;

width: 220px;

height: 22px;

border: 1px solid lightseagreen;

margin: 60px;

}

p::after {

content: ‘\ea50’;

font-family: ‘icomoon’;

position: absolute;

top: -1px;

right: 10px;

}

「4. 2D 转换之translate」

  • 2D转换

    • 2D转换是改变标签在二维平面上的位置和形状

  • 移动：translate

  • 旋转：rotate

  • 缩放：scale

  • translate语法

    • x就是X轴上水平移动

  • y就是y轴上水平移动

transform: translate(x, y)

transform: translateX(n)

transfrom: translateY(n)

  • 重点知识点

    • 2D的移动主要是指水平、垂直方向上的移动

  • translate最大的优点就是不影响其他元素的位置

  • translate中的100%单位，是相对于本身的宽度和高度来进行计算的

  • 行内标签没有效果

div {

background-color: lightseagreen;

width: 200px;

height: 100px;

/* 平移 */

/* 水平垂直移动 100px */

/* transform: translate(100px, 100px); */

/* 水平移动 100px */

/* transform: translate(100px, 0) */

/* 垂直移动 100px */

/* transform: translate(0, 100px) */

/* 水平移动 100px */

/* transform: translateX(100px); */

/* 垂直移动 100px */

transform: translateY(100px);

/百分比用法/

transform: translateY(100%);

}

让一个盒子水平垂直居中

div {

position: relative;

width: 500px;

height: 500px;

background-color: pink;

/* 1. 我们tranlate里面的参数是可以用 % */

/* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */

/* 这里的 50% 就是 50px 因为盒子的宽度是 100px */

/* transform: translateX(50%); */

}

p {

position: absolute;

top: 50%;

left: 50%;

width: 200px;

height: 200px;

background-color: purple;

/1.* margin-top: -100px;

margin-left: -100px; */

/2.* translate(-50%, -50%)

盒子往上走自己高度的一半 */

transform: translate(-50%, -50%);

}

span {

/* translate 对于行内元素是无效的 */

transform: translate(300px, 300px);

}

「5. 2D 转换之rotate」

  • rotate 旋转

    • 2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转

/* 单位是：deg */

img:hover {

transform: rotate(360deg)

}

  • rotate语法

    • rotate 里面跟度数，单位是 deg

  • 角度为正时，顺时针，角度为负时，逆时针

  • 默认旋转的中心点是元素的中心点

  • 设置元素旋转的中心的(transform-origin)

transform-origin: x y;

  • 注意

    • 后面的参数 x 和 y 用空格隔开

  • x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center

  • 还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)

「6. 2D 转换之scale」

  • scale的作用：用来控制元素的放大与缩小

transform: scale(x, y)

  • 知识要点：

    • 注意，x与y之间用逗号进行分隔

  • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

  • transform: scale(2, 2): 宽和高都放大了二倍

  • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

  • transform:scale(0.5, 0.5): 缩小

  • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

div:hover {

/* 注意，数字是倍数的含义，所以不需要加单位 */

/* transform: scale(2, 2) */

/* 实现等比缩放，同时修改宽与高 */

/* transform: scale(2) */

/* 小于 1 就等于缩放*/

transform: scale(0.5, 0.5)

}

「7. 2D 转换综合写法以及顺序问题」

知识要点

  • 同时使用多个转换，其格式为 transform: translate() rotate() scale()

  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

  • 当我们同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {

transform: translate(200px, 0) rotate(360deg) scale(1.2)

}

动画(animation)

**「动画」**是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

「动画的使用」

  1. 先定义动画

  2. 再调用定义好的动画

/1. 定义动画/

@keyframes 动画名称 {

0% {

width: 100px;

}

100% {

width: 200px

}

}

div {

/* 调用动画 */

animation-name: 动画名称;

/* 持续时间 */

animation-duration: 持续时间；

}

「动画序列」

  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

  • 在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

  • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

  • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

「动画常见属性」

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VAuYMH6M-1614129598271)(Untitled.assets/640)]

div {

width: 100px;

height: 100px;

background-color: aquamarine;

/* 动画名称 */

animation-name: move;

/* 动画花费时长 */

animation-duration: 2s;

/* 动画速度曲线 */

animation-timing-function: ease-in-out;

/* 动画等待多长时间执行 */

animation-delay: 2s;

/* 规定动画播放次数 infinite: 无限循环 */

animation-iteration-count: infinite;

/* 是否逆行播放 */

animation-direction: alternate;

/* 动画结束之后的状态 */

animation-fill-mode: forwards;

}

div:hover {

/* 规定动画是否暂停或者播放 */

animation-play-state: paused;

}

「动画简写方式」

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */

animation: name duration timing-function delay iteration-count direction fill-mode

知识要点

  • 简写属性里面不包含 animation-paly-state

  • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

  • 要想动画走回来，而不是直接调回来：animation-direction: alternate

  • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

animation: move 2s linear 1s infinite alternate forwards;

「速度曲线细节」

animation-timing-function: 规定动画的速度曲线，默认是ease

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U86plZv9-1614129598272)(Untitled.assets/640)]

/打字机效果/

div {

width: 0px;

height: 50px;

line-height: 50px;

white-space: nowrap;

overflow: hidden;

background-color: aquamarine;

animation: move 4s steps(24) forwards;

}

@keyframes move {

0% {

width: 0px;

}

100% {

width: 480px;

}

}

CSS 过渡transition

通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。

深入理解CSS过渡transition

https://www.cnblogs.com/xiaohuochai/p/5347930.html

「定义」过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

transition-property: 过渡属性(默认值为all)

transition-duration: 过渡持续时间(默认值为0s)

transiton-timing-function: 过渡函数(默认值为ease函数)

transition-delay: 过渡延迟时间(默认值为0s)

.test{

height: 100px;

width: 100px;

background-color: pink;

transition-duration: 3s;

/* 以下三值为默认值，稍后会详细介绍 */

transition-property: all;

transition-timing-function: ease;

transition-delay: 0s;

}

.test:hover{

width: 500px;

}


<div class="test"></div>







![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMf9QKF2-1614129598273)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/b2de8a86768d5775a8c0b09db721ae1d.gif#pic_center)



**「复合属性」** 过渡transition的这四个子属性只有是必需且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0s



*   **注意:**



*   *   transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。





.test{

height: 100px;

width: 100px;

background-color: pink;

/*代表持续时间为2s，延迟时间为默认值0s*/

transition；2s;

}    

.test:hover{

width: 500px;

}

<div class="test"></div>







`延迟时间delay 案例`





.test{

height: 100px;

width: 100px;

background-color: pink;

/*代表持续时间为1s，延迟时间为2s*/

transition: 1s 2s;

}    

.test:hover{

width: 500px;

}

<div class="test"></div>







![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C5PFyFPk-1614129598275)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/2e32a51751eb569807377048ae744b83.gif#pic_center)



**「过渡属性」**



*   值: none | all | \[,\]

*   初始值: all

*   应用于: 所有元素

*   继承性: 无





none: 没有指定任何样式

all: 默认值，表示指定元素所有支持transition-property属性的样式

<transition-property>: 可过渡的样式，可用逗号分开写多个样式







![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkXIlJgQ-1614129598276)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/img_convert/3653de48f5f44794aa2b67ad292003d1.gif#pic_center)



**「过渡持续时间」**



*   值: \[,\]\*

*   初始值: 0s

*   应用于: 所有元素

*   继承性: 无

*   \[注意\]该属性不能为负值

*   \[注意\]若该属性为0s则为默认值，若为0则为无效值。所以必须**带单位**

*   \[注意\]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间





/*DEMO中的过渡属性值*/

transition-property: width,background;







![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VkNW9hpm-1614129598276)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]](https://img-blog.csdnimg.cn/img_convert/faeb22e2cb1d67db83a9b440899c02c9.gif#pic_center)  

**「过渡时间函数」**



**过渡时间函数**用于定义元素过渡属性随时间变化的过渡速度变化效果



*   值: \[,\]\*

*   初始值: **ease**

*   应用于: 所有元素

*   继承性: 无



**「取值」** 过渡时间函数共三种取值，分别是**关键字**、**steps函数**和**bezier函数**



**「关键字」** 其实是bezier函数或steps函数的特殊值





ease: 开始和结束慢，中间快。

linear: 匀速。

ease-in: 开始慢。

ease-out: 结束慢。

ease-in-out: 和ease类似，但比ease幅度大。







* * *



[]( )3D转换

-----------------------------------------------------------------------



### []( )认识3D转换



**「3D的特点」** 近大远小，物体和面遮挡不可见



**「三维坐标系」**



*   x 轴：水平向右 – `注意：x 轴右边是正值，左边是负值`

*   y 轴：垂直向下 – `注意：y 轴下面是正值，上面是负值`

*   z 轴：垂直屏幕 – `注意：往外边的是正值，往里面的是负值`



![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z2blcoas-1614129598277)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/20210224093052662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc0NTA3NQ==,size_16,color_FFFFFF,t_70)



### []( )3D转换



**1\. 3D 转换知识要点**



*   `3D` 位移：`translate3d(x, y, z)`

*   `3D` 旋转：`rotate3d(x, y, z)`

*   `透视` ：`perspctive`

*   `3D`呈现 `transfrom-style`



**2\. 3D 移动translate3d**



*   `3D` 移动就是在 `2D` 移动的基础上多加了一个可以移动的方向，就是 z 轴方向

*   `transform: translateX(100px)`：仅仅是在 x 轴上移动

*   `transform: translateY(100px)`：仅仅是在 y 轴上移动

*   `transform: translateZ(100px)`：仅仅是在 z 轴上移动

*   `transform: translate3d(x, y, z)`：其中x、y、z 分别指要移动的轴的方向的距离

*   `注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充`





transform: translate3d(100px, 100px, 100px)

/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */

transform: translate3d(100px, 100px, 0)







### []( )透视perspective



*   知识点讲解



*   *   如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上)

*   实际上模仿人类的视觉位置，可视为安排一只眼睛去看

*   透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离

*   距离视觉点越近的在电脑平面成像越大，越远成像越小

*   透视的单位是像素

*   知识要点



*   *   **透视需要写在被视察元素的父盒子上面**

*   注意下方图片

*   d：就是视距，视距就是指人的眼睛到屏幕的距离

*   z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大



![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UXDwhg7T-1614129598278)(Untitled.assets/640)]代码演示](https://img-blog.csdnimg.cn/2021022409320640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc0NTA3NQ==,size_16,color_FFFFFF,t_70)





body {

/*透视需要写在被视察元素的父盒子上面 */

perspective: 1000px;

}

translateZ与perspective的区别







*   `perspecitve` 给父级进行设置视距的，`translateZ` 给 子元素进行设置不同的大小



### []( )3D 旋转rotateX



**3D 旋转**指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转



*   `语法：`



*   *   **transform: rotateX(45deg)** – 沿着 x 轴正方向旋转 45 度

*   **transform: rotateY(45deg)** – 沿着 y 轴正方向旋转 45 度

*   **transform: rotateZ(45deg)** – 沿着 z 轴正方向旋转 45 度

*   **transform: rotate3d(x, y, z, 45deg)** – 沿着自定义轴旋转 45 deg 为角度

*   `左手法则：`



*   *   左手的手拇指指向 x 轴的正方向

*   其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向



![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMaHAGfe-1614129598279)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/20210224093223446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc0NTA3NQ==,size_16,color_FFFFFF,t_70)





div {

/*透视写在被视察元素的父盒子上面 */

perspective: 300px;

}

/*被观察元素*/

img {

display: block;

margin: 100px auto;

transition: all 1s;

}



img:hover {

transform: rotateX(-45deg)

}







### []( )3D 旋转rotateY



*   `左手法则：`



*   *   左手的拇指指向 y 轴的正方向

*   其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)



![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uqW6Efqj-1614129598279)(Untitled.assets/640)]](https://img-blog.csdnimg.cn/20210224093337743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc0NTA3NQ==,size_16,color_FFFFFF,t_70)





div {

perspective: 500px;

}



img {

display: block;

margin: 100px auto;

transition: all 1s;

}



img:hover {

transform: rotateY(180deg)

}







### []( )3D 旋转rotateZ





div {

perspective: 500px;

}



img {

display: block;

margin: 100px auto;

transition: all 1s;

}



img:hover {

transform: rotateZ(180deg)

}







**「rotate3d」**



*   **transform: rotate3d(x, y, z, deg)** – 沿着自定义轴旋转 deg 为角度



*   x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度



*   *   **transform: rotate3d(1, 1, 0, 180deg)** – 沿着对角线旋转 45deg

*   **transform: rotate3d(1, 0, 0, 180deg)** – 沿着 x 轴旋转 45deg





div {

perspective: 500px;

}



img {

display: block;

margin: 100px auto;

transition: all 1s;

}
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/3cc0968e42600d74ec8c318b5324704e.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/91abc495787aeeb0fffff9ebf108c7be.png)

![](https://img-blog.csdnimg.cn/img_convert/04f6b35225c7342bccfac4cf5d2372ed.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
form: rotateY(180deg)

}







### []( )3D 旋转rotateZ





div {

perspective: 500px;

}



img {

display: block;

margin: 100px auto;

transition: all 1s;

}



img:hover {

transform: rotateZ(180deg)

}







**「rotate3d」**



*   **transform: rotate3d(x, y, z, deg)** – 沿着自定义轴旋转 deg 为角度



*   x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度



*   *   **transform: rotate3d(1, 1, 0, 180deg)** – 沿着对角线旋转 45deg

*   **transform: rotate3d(1, 0, 0, 180deg)** – 沿着 x 轴旋转 45deg





div {

perspective: 500px;

}



img {

display: block;

margin: 100px auto;

transition: all 1s;

}
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中...(img-Uk3Acaxm-1715452788918)]

[外链图片转存中...(img-O9nTnJmn-1715452788919)]

[外链图片转存中...(img-HiuyMC0k-1715452788919)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
2401_84150191
关注
  • 15
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习日记——axios安装出错
weixin_59820248的博客
11-17 2415
解决axios安装出错问题
vue前端项目安装axios失败，以及安装vue-axiox，笔记
热门推荐
Coldmood的博客
02-07 1万+
记录一下错误解决方法。 安装axios的时候报错： npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.13.1 postinstall: `node scripts/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-sass@4.13...
elementUi 可编辑表格
Dimples_320的博客
10-17 304
elementUi 可编辑表格。
Element-ui upload 手动上传文件
weixin_45333397的博客
01-31 2098
前端vue使用element-ui做手动上传文件，初级代码，复制急用
安装 axios插件报错显示 code ERESOLVE 和 ERESOLVE could not resolve
qq_59534189的博客
06-22 317
安装axios插件时报错显示code ERESOLVE 和 ERESOLVE could not resolve
html+css进阶.md
05-02
html+css进阶.md11
CSS进阶
02-13
在深入探讨"CSS进阶"这个主题之前，我们先来理解一下CSS的基础概念。CSS，全称Cascading Style Sheets，即层叠样式表，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要功能是...
HeadFisrt HTML与CSS 源码
03-28
4. **CSS进阶**：包括媒体查询（Media Queries）用于响应式设计，CSS预处理器如Sass和Less，以及如何使用CSS实现复杂的布局，如网格系统和Flexbox。 5. **网页布局**：讲解如何通过CSS控制元素的布局，如浮动元素、...
Head First HTML与CSS 第2版
04-20
总的来说，《Head First HTML与CSS 第2版》是一本全面且易懂的教程，它涵盖了从基础到进阶的HTML和CSS知识，旨在培养读者构建美观、功能齐全且适应多设备的网页的能力。通过阅读这本书，你将能够熟练掌握网页开发的...
HTML+CSS 1号店
最新发布
06-11
【HTML+CSS 1号店】是一个学习HTML和CSS基础及进阶知识的资源集合，主要涵盖网页布局、响应式设计以及图像应用等关键领域。在这个项目中，我们可以看到几个核心知识点： 1. **HTML（超文本标记语言）**：HTML是网页...
VUE-axios统一增加请求头并根据接口返回的状态码判断用户登录状态并跳转登录页
2401_83739821的博客
03-21 413
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
修改ElementUI默认滚动条的样式
一掬净土
07-30 2627
在全局样式里加入以下代码： #17B3A3 滚动条颜色，可以自行修改。 /**修改全局的滚动条*/ /**滚动条的宽度*/ ::-webkit-scrollbar { width: 8px; } //滚动条的滑块 ::-webkit-scrollbar-thumb { background-color: #17B3A3; border-radius: 3px; } //修改表格的滚动条 .el-table__body-wrapper::-webkit-scrollbar { width:
JS事件(Event)兼容性探究
u013485911的专栏
01-15 1346
事件（Event）即为用户的动作，例如：用户点击鼠标，产生onclick事件；按下键盘，产生onkeyDown事件；改变输入框的值，产生onchange事件... W3C标准规定，事件是作为函数的参数传入的，例如： 点击我将获得屏幕坐标 document.getElementById("demo").onclick=function(e) {     alert(e.screenX)
npm ERR! ENOTEMPTY: directory not empty, npm 错误！安装 npm 时编码 ENOTEMPTY
Quinta12的博客
03-21 2211
这将删除node_modules存储库中的文件夹。然后安装你需要安装的第三方插件就可以了。
element-ui滚动条样式修改
weixin_52630329的博客
07-13 2993
element-ui滚动条样式修改
JS的 event 对象属性、使用实例、兼容性处理(极大提高代码效率、减少代码量)
极客神殿
05-02 501
下面讨论一下 js 中的 Event 对象，主要从以下三个方面详细的描述(点击标题可跳转到对应部分)： 1.什么是event 2.怎么用event，用他该注意什么，几个简单实际应用 3.event在不同浏览器的存在的兼容问题，及如何去解决 什么是event Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。说的通俗一点就是，event是J...
el-upload组件中使用el-button都会触发上传事件的问题
LiXiu_zhe的博客
05-07 3123
<el-upload show-file-list ref="updataDocx" class="upload-demo" :headers="uploadHeaders" action="https://blog.csdn.net/LiXiu_zhe?spm=1018.2226.3001.5343" accept=".doc,.docx" :data="getIdData" multiple :file-list="fileList" :auto-upl..
二、Mysql_Html_Css_Jdbc-（进阶提升、新手必看）
03-01
Mysql_Html_Css_Jdbc-（进阶提升、新手必看） 本文将介绍MySQL、HTML、CSS和JDBC这四个重要的技术领域，并深入探讨如何在Java程序中使用它们。MySQL是一种用于组织、存储和管理数据的关系型数据库管理系统。借助...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值