前端学习第三周

已于 2022-11-17 14:00:37 修改
阅读量764 收藏
点赞数
文章标签： 前端 学习 css
于 2022-11-04 19:56:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishunyu1226/article/details/127680416
版权

前端学习第三周

一.CSS选择器

1.ID选择器

#elem{ } id=“elem”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{background: red;}
        #div2{background: blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这是另一个块</div>
</body>
</html>

1.在一个页面中，ID值是唯一的。
2.命名规范，字母 ，下划线，中划线，数字（命名的第一位不能是数字）
3.命名方式

驼峰写法：searchButton（小驼峰） SearchButton（大驼峰） searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button

<div id="searchButton"></div>

2.CLASS选择器

.elem{ } class=“elem”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box{background: red;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
</body>
</html>
  • 1.class选择器可以复用的（一条样式可以作用许多内容）
  • 2可以添加多个class样式（用空格来添加）
<style>
    .box{background: red;}
    .content{font-size: 30px;}
    </style>
</head>
<body>
    <div class="box content">这是一个块</div>
</body>
</html>
  • 3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序（先识别CSS中的后一个）
  • 4.标签+类的写法：在样式前添加标签，则作用< body>中相同的一类
    例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p.box{background: red;}
    </style>
</head>
<body>
    <div class="box content">这是一个块</div>
    <div class="box content">这又一个块</div>
    <p class="box content">这还一个段落</p>
</body>
</html>

则该代码运行结果为段落那一层!

3.标签选择器(TAG选择器）

  • css: div{}
  • html：< div >
  • 使用的场景：

1.去掉某些标签的默认样式时
2.复杂的选择器中，如 层次选择器

4.群组选择器

  • css：div,p,span{}
  • 可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用
  • 例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
	div,#text,.title{background: red;}
    </style>
</head>
<body>
    <p id="text">这是一个段落</p>
    <div>这是一个块</div>
    <h2 class="title">标题</h2>
</body>
</html>

5.通配选择器

  • #{ } → div，ul，li，p，h1，h2…{ }
  • 注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。

使用场景：1.去掉所有标签的默认样式

6.层次选择器

  • 后代M N{ }

M,N之间用空格隔开。使得选择M下的N做出样式，可以有作用嵌套内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #list li{border:1px red solid}  
    </style>
</head>
<body>
    <ul id="list">
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>
  • 父子 M>N { }

无法嵌套

  • 兄弟M~N { }

当前M下面的所有兄弟N标签

  • 相邻M+N { }

当前M下面的相邻的N标签

7.属性选择器

  • M[attr]{ }

attr为属性

  • = ：完全匹配
  • *=：部分匹配
  • ^=: 起始匹配
  • $=: 结束匹配
  • [ ] [ ] [ ]:组合匹配
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
	div[class][id]{background: red;}
    </style>
<body>
    <div>aaaa</div>
    <div class="box" id="elem">bbbb</div>
    <div class="search">cccc</div>
    <div class="search-button">dddd</div>
    <div class="button-search">eeee</div>
</body>
</html>

8.伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

M:伪类{ }

  • :link 访问前的样式（只能添加给a标签）
  • :visited 访问后的样式 （只能添加给a标签）
  • :hover 鼠标移入时的样式 （可以添加给所有标签）
  • :active 鼠标按下时的样式（可以添加给所有标签）

如果四个伪类都生效，一定要注意顺序：LVHA
一般网站只这样去设置：a{ } →（用于link visited active）和 a:hover{ }

效果如下：

    <style>
        a{color: blue;}
        a:hover{color: red;}
    </style>
</head>
<body>
    <a href="1">这是一个链接</a>
</body>

9.after等伪类选择器

  • :after, :before 通过伪类的方式给元素添加一段文本内容，使用content属性

after是添加在元素最后边；before是添加在元素的最前面
例：

 	<style>
      		div:after{content: "world"; color: red;}
    </style>
</head>
<body>
    <div>hello </div>
</body>
  • :checked, :disabled, :focus 都是针对表单元素的
 <style>
       :checked{width: 100px; height: 100px;}
       :disabled{width: 100px; height: 100px;}
       :focus{background: red;}
    </style>
</head>
<body>
   <input type="checkbox">
   <input type="checkbox" checked>
   <input type="checkbox" disabled>
   <input type="text">
</body>

10.结构伪类选择器

  • nth-of-type()

角标是从1开始的，1表示第一项，2表示第二项| n值 表示从0到无穷大
所定义项的第n个

	<style>
        li:nth-of-type(2n+1){background: red;}
        li:nth-of-type(2n){background: blue;}
        li:nth-of-type(2){background:green;}
    </style>
</head>
<body>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</body>
  • nth-child

所有项的第n个

二.CSS继承

  • 文字相关的样式可以被继承（颜色，字体大小）
  • 布局相关的样式不能被继承（宽高，边框；默认是不能继承的，但是可以设置继承属性inherit值，使得布局样式也可被继承）

继承就是如下：p标签继承div的样式

	<style>
        div{width: 300px; height: 300px; border: 1px red solid; color: red; font-size:30px ;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

通过设置继承属性改变继承

 <style>
        div{width: 300px; height: 300px; border: 1px red solid; color: red; font-size:30px ;}
        p{border: inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

三.CSS优先级

1.一般样式优先级

  • 相同样式优先级：当设置相同样式是，后面的优先级较高，但不建议出现重复设置样式的情况
  • 内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入式优先级高

2.单一样式优先级

style行间 > id > class >tag > * > 继承

style行间 权重 1000
id 权重100
class 权重1 0
tag 权重 1

3.！important选择器

  • ！important 提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）

如下例子：使得本该运行style的样式变为id

	<style>
        #elem{color: red !important;}
    </style>
</head>
<body>
    <div id="elem" style="color:blue ;">这是一个块</div>
</body>

4.标签+类与单类

标签+类 > 单类 （优先级）

例子：块运行div .box样式

	<style>
        div .box{color: blue;}
        .box{color: red;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
</body>

5.群组优先级

群组选择器与单一选择器的优先级相同（相同的选择器），靠后写的优先级高。

6.层次优先级

  • 权重比较(比较级别，不看数量）
    ul li .box p input{ } 1+1+10+1+1
    .hello span #elem{ } 10+1+100

数字相同的级别，类别相同

  • 约分比较
    ul li .box p input{ } 1+1+10+1+1
    .hello span #elem{ } 10+1+100
    将相同的类型进行约分，剩下：
    li p input{ }
    #elem{ }
    则#elem{ }层次高

四.CSS盒子模型

1.基本结构

组成：content→padding→border→margin
类比快递（物品→填充物→包装盒→盒子与盒子之间的间距 ）

  • content：内容区域，width和height组成的
  • padding：内边距（内填充）
    只写一个值：30px（上下左右）
    写两个值:30px 40ps (上下，左右）
    写四个值：30px，40px，50px，60px（上，右，下，左）
    单一样式只能写一个值：
    padding-left
    padding-right
    padding-top
    padding-bottom
  • margin:外边栏（外填充，填的值代表上下左右空出多px）

用法与padding相同

  • 注意：
    1.背景颜色会填充到margin以内的区域。
    2.文字会在content区域
    3.padding不能出现负值，margin是可以出现负值

2.box-sizing改变盒模型

允许你以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）| border-box

  • 盒尺寸：可以改变盒子模型的展示形态/

content-box（默认值）： width，height→content（width和height仅由content来分配）
border-box: width，height→content，padding，border(width和height的值由这三个分配）

  • 使用场景：
    1.不用再去计算一些值
    2解决一些百分比的问题

3.盒模型之margin叠加问题

  • margin叠加问题：
    出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。
    例子：
    其中取30px作为值
<style>
        #box1{width: 200px;height: 200px;background: blue;margin-bottom: 30px;}
        #box2{width: 200px;height: 200px;background: red;margin-top: 20px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
  • 解决方法
    1.BFC规范
    2.想办法只给一个元素添加间距（如下所示，使得间距为50px）
  <style>
        #box1{width: 200px;height: 200px;background: blue;margin-bottom: 0px;}
        #box2{width: 200px;height: 200px;background: red;margin-top: 50px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>

4.margin传递

  • margin传递问题：
    出现在嵌套结构中，只是针对margin-top的问题
  • 解决方案：
    1.BFC规范
    2.给父容器加边框
    3.margin换成padding（padding-top添加在父容器内使得容器上部填充，再缩减height的值）

5.CSS盒子模型之扩展

  • margin左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，需要后面学习）

例子：
添加margin-left:100px则盒子左边外边距就变成100px
添加margin-left:auto则盒子就会自适应使得左边变为空白

如下代码，使得盒子左右都自适应则盒子自适应居中

<style>
        #box{width: 200px;height: 200px;background:red;margin-left: auto;margin-right:auto ;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
  1. width，height不设置的时候，对盒子模型的影响→会自动去计算容器的大小，节省代码 。

五.标签分类

1.按类型

block(块）: div , p , ul , li , h1 .......

1.独占一行
2.支持所有样式
3.不写宽的时侯，和父元素的宽相同
4.所占区域是一个矩形

inline（内联）: span,a ,em, strong , img......

1.挨在一起的
2.有些样式不支持，例如：width，height，margin，padding
3.不写宽的时候，宽度由内容决定
4,所占的区域不一定是矩形
5.内敛之间会有空隙，换行产生的

inline-block: input , select......

1,挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

2.按内容

Flow:流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的

具体内容：W3C

3.按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容

img ，input…

	<input type="text">
 	<img src="" alt="">

非替换元素：将内容直接告诉浏览器，将其显示出来

div， h1，p…

<h1>标题</h1>

六.显示框类型

  • display属性→主要用来控制元素的布局，通过 display 属性您可以设置元素是否显示以及如何显示。

block
inline
inline-block
none→表示隐藏，指定的标签在页面上不显示

<style>
    div{width: 100px;height: 100px;background: red;display:inline-block;}
    span{width: 200px;height: 200px;background: red;display: inline-block;}
    </style>
</head>
<body>
    <div>块1</div>
    <div>块2</div>
    <span>内联1</span>
    <span>内联2</span>
</body>
  • display:none与visibility:hidden区别
    1.display:none不占空间的隐藏
    2.visibility:hidden占空间的隐藏（类似透明效果）

七.标签嵌套规范

ul，li
dl，dt，dd
table，tr，td

  • 块能够嵌套内联
<div>
    <span></span>
    <a href=""></a>
</div>
  • 块嵌套块
<div>
    <div></div>
</div>

特殊：p标签里面不能写div标签

  • 内联是不能嵌套块
    错误的写法：
<span>
    <div></div>
</span>

正确的写法：

<a href="">
    <div></div>
</a>

特殊：a标签里面可以嵌套块

八.overflow溢出隐藏

visible：默认
hidden：截取
scroll：x、y轴滚动条
auto：自动感知 内容多就会出现滚动条
x轴、y轴：overflow-x、overflow-y针对两个轴分别设置

九.透明度与手势

1.opacity

opacity：0（透明）~1（不透明）
0.5（半透明）

<style>
        div{width: 100px;height: 100px;background: red;opacity: 0;}
    </style>
 </head>
 <body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
 </body>

注意：占空间，所有子内容也会透明

2.rgba

0~1
可以让指定的样式透明，而不影响其他样式

3.手势

cursor：手势
default:默认 鼠标的样式
要实现自定义手势 ，需要准备图片： .cur、.ico 格式
cursor : url(./img/cursor.ico),auto;

十.最大最小宽高

min-width
max-width
min-height
max-height

注：强化对百分比单位的理解

%单位：换算–>以父容器大小进行换算
一个容器适应屏幕高：容器加height：100%；body：100%；html：100%
html，body{height:100%;}
.contrainer{height:100%;}

十一.CSS默认样式

有些标签有默认样式，有些标签没有默认样式

  • 没有的：div，span，…
  • 有的：
    1.body→margin（边距）:8px
    2.h1→margin:上下 21.440px
    font-weight:bold（加粗）
    3.p→margin: 上下 16px
    padding（内填充）：左40px
    4.默认点：list-style:disc
    5.a→text-decoration:underline

十二.float浮动

1.float浮动概念及原理

  • 1.文档流
    文档流是文档中可显示对象在排列时所占用的位置
  • 2.float特性
    加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
  • 3.float取值
    left
    right
    none（默认）
<style>
        body{border:1px black solid;}
        #box1{width: 100px;height: 100px;background: yellow ;float: right;}
        #box2{width: 200px;height: 200px;background: red;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

2.float注意点

  • 只会影响后面的元素

如下面所示，只有float下面的blue方块受到影响

 <style>
        body{border:1px black solid;}
        #box1{width: 100px;height: 100px;background: yellow ;}
        #box2{width: 200px;height: 200px;background: red;float: left;}
        #box3{width: 300px;height: 300px;background: blue;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
  • 内容默认提升半层

输入文字在块中

<div id="box3">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

输出结果：

在这里插入图片描述

  • 默认宽根据内容决定

内容多长，宽就多长

  • 换行排列

浮动元素放不下了就换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
ul{margin: 0px;padding: 0px;list-style: none;width: 300px;height: 300px;border: 1px solid black;}
li{width: 100px;height: 100px;background: red ;border: yellow 1px solid;box-sizing: border-box;float: left;}
li:nth-of-type(1){height:120px;}
li:nth-of-type(2){height:80px;}
</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

在这里插入图片描述

  • 主要给块元素添加，但也可以给内元素添加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{margin: 0px;padding: 0px;}
	#a2{float: right;}
</style>
</head>
<body>
<ul>
    <span id="a1">111</span>
    <span id="a2">222</span>
</ul>
</body>
</html>

很少将浮动用于内联

3.清除float浮动

  • 上下排列：clear属性→表示清除浮动的，left，right，both（不论浮动是左还是右都清除浮动）

clear属性要与float相同

<style>
        #box1{width: 100px;height: 100px;background: red; float: right;}
        #box2{width: 200px;height: 200px;background: blue;clear :both;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    
</body>
  • 嵌套排列：
    在这里插入图片描述
浪漫季
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
『前端实习笔记』11月 第3周
猪窝
11-30 651
文章目录日记11.1611.1711.1811.1911.20周报 日记 11.16 code review 个别代码嵌套层数过多，个别代码嵌套层数太少：本来放一个文件模块能解决的事情，来来回回引了好几次，放了好几个没用的文件来回引来引去；一个函数方法，里面包含了大概3个部分，分别对应不同的操作，我直接写在一起了，应该把他们再拆成3个函数。 import引入顺序太乱了。库相关的放在最前，css类的放在中间，本地文件放在最后，每一个part之间空出一行。逻辑清晰。 下面以我的demo为例：(有些库本地
前端基础第三天
04-04
前端基础第三天的知识点,包含很多,配合着前面html和css专栏里面的博客学习更佳
前端实习第三周总结
qq_43957263的博客
12-03 2017
摘要 本周我就一直在开发上周开始负责的那个小程序前端项目。和以前自己开发相比，这周我最大的感触就是公司开发和自己开发的时候的区别。 自己开发 在学校学习期间：因为一直处于一种学习的状态，虽然自己也写过一两个项目练手，但是基本上也是全部都是自己独立开发处理。一般就是自己用node写一些简单的接口，然后使用mysql保存数据。因为我本身是做前端的，所以后台接口就非常简单的写一下，也不用考虑并发之类的问题。一般情况下，想要做一个什么样的页面效果也只是自己简单的设计一下，有一个...
前端之路--第三周学习
sjdxcg的博客
10-21 505
html网页标签、列表
第三周总结（前端）
m0_63374484的博客
11-13 283
第三周学习css总结 css的背景 a.背景颜色 使用background-color属性定义元素的背景颜色 background-color:颜色值； b.背景图片 使用background-image属性描述元素的背景图像 background-image:none/url(“图片地址") c.背景平铺 使用background-repeat属性在html页面上对背景图像进行平铺 background-repeat:repeat/no-repeat/repeat-x/repeat-y 默认情况下，背
(前端学习)寒假第三周周报
Vevean2545116309的博客
02-11 527
这周学完了css的所有视频
Web前端开发第三季：CSS特效
06-14
◆ 实现三维空间中的图像的移动、旋转、缩放等 ◆ 在页面中灵活使用过度的特效 ◆ 在页面中使用动画的特效 ◆ 使用下拉菜单等内容。 在本季课程的讲解中结合了大量的案例演示，通过案例演示可以清楚的加深对CSS...
shecodes-workshop:3周的研讨会，学习基础的前端开发
05-08
谢编码车间 第一本SheCodes课程，学习前端。
老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料
05-15
├─(100) 04 python全栈3 day54 Django内容回顾（三）.avi ├─(101) 05 python全栈3 day54 Django请求生命周期之Http请求.avi ├─(102) 06 python全栈3 day54 Django请求生命周期之FBV和CBV.avi ├─(103) 07 ...
网游剑网三页面html+css
01-05
所以在学习一周后，自己尝试着第一次将学习的知识点运用起来。图中也是刚做是记得插入视频、图片点击后变换位置、图片等是遇到的最大的困难之处。现在想想觉得很简单，毕竟已经学会有一年多的时间了。一直没有发，...
『前端实习笔记』12月 第3周
猪窝
12-25 425
文章目录日记12.1412.1512.1612.1712.18周报OJ 日记 12.14 任务：调研vega-lite库，增加动态渲染表格，按钮控制，可取最大最小值 过程 tooltip收尾：因为我搞编译器耽搁了，碰到致命错误，但没说。leader让我下次碰到这种错误第一时间告诉他。 加表格：简单的很，每一列加一个按钮控制是否显示。这里唯一注意的就是，表格渲染必然是v-for，而控制是否显示有两个v-if和v-show，文档里再三强调v-for不可以和v-if同时出现，其他case下v-if用于惰性
前端实习周记01
热门推荐
weixin_42841738的博客
06-03 2万+
前端实习周记01 上周是进入公司实习的第一周。 本来计划是上周末写周记。无奈有论文要写，把第一周的周记拖到了现在。 我是星期三进入公司的，第一天学习Vue cli 3项目搭建，配置webpack4，试着运行、编译等。公司是在做一个很大的网站重构项目，前端这边工期也很紧，所以并没有给我安排demo来测试我的业务能力2333。 聊一聊公司的重构项目 之前是用jsp写的电商平台，重构是用的vue.js...
2019/01/07 一位前端实习生 艰辛过程 励志 实习周记（三）——第二 三周
徐磊
05-27 9512
经过第一周的努力，我们第二周就把之前的项目给完成了，也是获益匪浅，到了第二周，大哥就安排我们去了解React框架，为以后编程的道路奠定一些框架的基础，还有可能后面会用到这个框架做项目。 这个React框架是前端三大框架之一，除了这个框架之外，还有Vue，Angular。还有其他什么UI框架，服务器框架等等，都会用到。 我们也是按照以前自学的方法，看视频看文档，来自学，好在我在b站屯了一波前端教程，...
前端第三周学习总结
weixin_52226680的博客
06-06 191
学习了框架，div以及css各种属性等相关知识。 框架是一种特殊的网页，它可以根据需要把浏览器划分为多个区域，每个框架区域都对应一个单独的网页。框架由框架集和单个框架组成。 div全称Division，意为“区分”，它是用来定义网页内容中逻辑区域的标签，可以通过插入div标签并对它们应用的css样式来创建网页布局。 css的属性包括类型、背景、区块、方框、列表、定位、扩展、过渡等属性。 ...
element-ui的bug记录
nick_zhang的博客
04-29 317
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 883
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 261
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 244
createWs("测试数据", (res) => {
前端学习路线 csdn
11-02
前端学习路线可以分为以下几个方面： 1. HTML/CSS基础：学习HTML标签和CSS样式的基本语法和用法，掌握页面布局和样式设计。 2. JavaScript基础：学习JavaScript的基本语法和常用API，掌握DOM操作和事件处理等技术。 3. 前端框架：学习常用的前端框架，如Vue.js、React等，掌握组件化开发和数据驱动等技术。 4. 前端工具：学习常用的前端工具，如Webpack、Gulp等，掌握自动化构建和打包等技术。 5. 前端性能优化：学习前端性能优化的方法和技巧，如减少HTTP请求、压缩代码等。 以上是前端学习路线的主要内容，当然还有很多其他的技术和工具需要学习。建议初学者可以先从HTML/CSS基础和JavaScript基础入手，逐步深入学习其他技术和工具。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值