WEBVTT

00:01:40.020 --> 00:01:40.980
也可以提前开始

00:01:40.980 --> 00:01:42.980
行 那我们就开始吧

00:01:42.980 --> 00:01:46.520
行 大家好

00:01:46.520 --> 00:01:51.040
我那个就是本次那个培训的老师姓周

00:01:51.040 --> 00:01:52.660
然后呢

00:01:52.660 --> 00:01:57.180
我们主要是今天给大家培训一下这个web前端

00:01:57.180 --> 00:02:00.800
相关的一些知识

00:02:00.800 --> 00:02:02.700
然后本次培训呢

00:02:02.700 --> 00:02:04.940
会分三天分三个部分

00:02:04.940 --> 00:02:07.140
第一天呢

00:02:07.140 --> 00:02:10.540
主要是聚焦于这个前端的核心基础

00:02:10.540 --> 00:02:15.540
会讲一些比较基础的一些内容

00:02:15.540 --> 00:02:17.260
比如说HTML

00:02:17.260 --> 00:02:18.420
CSS

00:02:18.420 --> 00:02:19.840
还有这个JavaScript

00:02:21.580 --> 00:02:26.560
然后上午会跟大家去过一遍这些基础知识

00:02:26.560 --> 00:02:27.340
然后呢

00:02:27.340 --> 00:02:33.040
下午会安排一个那个后端的一个集成

00:02:35.100 --> 00:02:39.100
会涉及到Node.js相关的一些后端开发知识

00:02:40.540 --> 00:02:46.240
然后第二天我们会开始聚焦于那个view

00:02:46.240 --> 00:02:49.000
我们会根据现在当前最新的版本

00:02:49.000 --> 00:02:55.600
Viu3去讲一下这个怎么样用view来给我们前端赋能

00:02:57.160 --> 00:02:58.060
然后呢

00:03:00.100 --> 00:03:03.640
一样就是第二天也会有一个实操

00:03:03.640 --> 00:03:08.500
然后会带领大家用view和nodejs

00:03:08.500 --> 00:03:11.380
来实现一个前后端分离的一个项目

00:03:14.600 --> 00:03:15.580
第三天呢

00:03:15.580 --> 00:03:19.060
我们会聚焦于这个微信小程序开发

00:03:20.560 --> 00:03:21.520
这个也是一样

00:03:21.520 --> 00:03:29.980
就是这属于一个结合前面第一天跟第二天的一个支持的一个综合训练

00:03:29.980 --> 00:03:32.020
通过第三天呢

00:03:32.020 --> 00:03:34.540
大家可以使用vue

00:03:34.540 --> 00:03:37.500
然后开发一个微信小程序

00:03:37.500 --> 00:03:42.040
这就是我们三天的课程规划

00:03:42.040 --> 00:03:49.560
今天我们先跟大家讲一下

00:03:49.560 --> 00:03:50.800
这个前端的核心基础

00:03:50.800 --> 00:03:55.900
我们前端其实有很多技术

00:03:55.900 --> 00:04:00.280
比如说像是我们现在网上经常说的

00:04:00.280 --> 00:04:02.820
Vue, React, Node.js

00:04:02.820 --> 00:04:06.380
什么JavaScript, TypeScript

00:04:06.380 --> 00:04:08.720
很多的知识点

00:04:08.720 --> 00:04:09.740
很多的名词

00:04:09.740 --> 00:04:31.920
其实但是万变不离其宗的,最后都会聚焦到这三个东西上,最终我们落实到网站上,不管你是阿里巴巴,还是一个小的个人block,最终都会变成这个HTML跟CSS和JavaScript这三样东西,我们就挨个先过一下吧。

00:04:31.920 --> 00:04:38.640
这个HTML呢,我们就是中文翻译就是超文版标记语言。

00:04:38.640 --> 00:04:41.680
它就是定义

00:04:41.680 --> 00:04:44.440
作用就是定义网页的结构和内容

00:04:44.440 --> 00:04:48.160
我们可以把这个教室的框架

00:04:48.160 --> 00:04:49.900
类比成一个HTML

00:04:49.900 --> 00:04:51.780
我们会有墙

00:04:51.780 --> 00:04:54.220
会有一些吊顶

00:04:54.220 --> 00:04:55.240
这些东西

00:04:55.240 --> 00:04:57.420
但是它只是一个骨架

00:04:57.420 --> 00:05:01.740
像我们声明的这些table下面

00:05:01.740 --> 00:05:03.660
这table form input

00:05:03.660 --> 00:05:05.640
select button label

00:05:05.640 --> 00:05:07.540
这些标签呢

00:05:07.540 --> 00:05:09.420
就是告诉我们的浏览器

00:05:09.420 --> 00:05:12.700
我们这个股价会有这些东西

00:05:12.700 --> 00:05:15.340
然后下一个呢

00:05:15.340 --> 00:05:19.160
就是现在我们HTML现行的最新标准

00:05:19.160 --> 00:05:20.500
就是HTML5

00:05:20.500 --> 00:05:23.120
这个其实也是十年

00:05:23.120 --> 00:05:24.880
十二年以前定义的

00:05:24.880 --> 00:05:29.120
之前还有HTML1234这些版本

00:05:29.120 --> 00:05:33.680
最新的HTML5呢

00:05:33.680 --> 00:05:35.280
就是引入了一些比较

00:05:36.280 --> 00:05:42.120
因为它是 Facebook 和 Twitter 这些社交媒体的流行

00:05:43.080 --> 00:05:48.160
所以说 html25 增加了一些比较有利于社交网站

00:05:48.880 --> 00:05:50.400
展示内容的一些标签

00:05:51.040 --> 00:05:55.360
比如说 header, footer, article, section 这些东西

00:05:56.600 --> 00:06:02.800
都是比较利于社交媒体网站他们去展示内容的

00:06:03.680 --> 00:06:05.400
还有像是这个audio啊

00:06:05.400 --> 00:06:06.180
video啊

00:06:06.180 --> 00:06:11.420
这些其实是在YouTube这些视频网站流行之后

00:06:11.420 --> 00:06:14.960
这个HTML5又是新增了这些标签

00:06:14.960 --> 00:06:17.000
顾名思义就是播放视频跟音频嘛

00:06:18.660 --> 00:06:21.840
然后像下面还新增了一些email data

00:06:21.840 --> 00:06:22.400
这些

00:06:23.720 --> 00:06:24.320
API

00:06:25.580 --> 00:06:30.620
这也就是帮助那个浏览器来验证用户的输入的

00:06:30.620 --> 00:06:34.760
就是这个也是根据那个时间推移

00:06:34.760 --> 00:06:37.940
HTML也是一步一步的在进化

00:06:37.940 --> 00:06:39.620
后续呢

00:06:39.620 --> 00:06:42.980
可能现在我们AI又开始流行了

00:06:42.980 --> 00:06:49.220
可能HTML5会变成一个根据AI的更新啊

00:06:49.220 --> 00:06:50.280
会再增加一些东西

00:06:51.500 --> 00:06:55.160
这也是我们也要根据时代往前跟着学习

00:06:56.760 --> 00:06:59.180
然后CSS好了

00:06:59.180 --> 00:07:00.920
我们现在就是有了这个框架了

00:07:00.920 --> 00:07:03.320
我们有墙有吊顶

00:07:03.320 --> 00:07:05.860
那么css是作用的

00:07:05.880 --> 00:07:07.420
就是说去装饰

00:07:09.680 --> 00:07:10.360
告诉浏览器

00:07:10.380 --> 00:07:12.980
比如说我们这个墙是面白墙

00:07:12.980 --> 00:07:15.320
然后白墙上有一幅画

00:07:15.320 --> 00:07:16.760
然后这个画是什么颜色

00:07:16.760 --> 00:07:18.560
然后吊顶是什么颜色

00:07:18.560 --> 00:07:20.000
然后吊顶上有灯啊

00:07:20.000 --> 00:07:20.780
有这些东西

00:07:20.780 --> 00:07:25.060
我们这个灯是白灯红灯还是黄灯

00:07:25.060 --> 00:07:27.680
然后就做一些这些这些操作了

00:07:27.680 --> 00:07:32.320
然后它涉及了一个比较重要的东西

00:07:32.320 --> 00:07:33.460
就是选择器

00:07:33.460 --> 00:07:35.460
这概念就是说

00:07:35.460 --> 00:07:37.280
比如说我们现在吊顶上有灯

00:07:37.280 --> 00:07:38.740
我们要选中

00:07:38.740 --> 00:07:39.600
好

00:07:39.600 --> 00:07:42.160
我们先把它布局成白光灯

00:07:42.160 --> 00:07:44.220
但是我们有个要求

00:07:44.220 --> 00:07:46.460
就是说我们第二排灯

00:07:46.460 --> 00:07:48.200
我们希望它是红光灯

00:07:48.200 --> 00:07:51.780
这个时候就需要选择器来帮忙实现这个功能

00:07:51.780 --> 00:07:54.200
告诉浏览器

00:07:54.200 --> 00:07:56.820
我们第二排要选中它变成红色

00:07:56.820 --> 00:07:59.820
这是选择器

00:07:59.820 --> 00:08:04.640
然后Flex布局是比较重点的一个东西

00:08:04.640 --> 00:08:08.680
现在我们大部分网站都是用Flex布局

00:08:08.680 --> 00:08:12.420
我们稍后会重点讲这个东西

00:08:12.420 --> 00:08:17.340
它会帮助我们实现更容易的实现网页的布局

00:08:17.340 --> 00:08:23.480
然后另一个重点的东西就是响应式设计

00:08:23.480 --> 00:08:29.140
如果大家年纪有一定年纪的话

00:08:29.140 --> 00:08:38.780
可能会对2000年2005年左右的WAP网站会有一个印象

00:08:38.780 --> 00:08:42.680
就是我们那时候还用那种诺基亚姆图拉拉

00:08:42.680 --> 00:08:47.920
然后会访问一个WAP.中国移动.com之类的东西

00:08:47.920 --> 00:08:53.740
那时候我们实现这个移动端跟桌面端的那个布局呢

00:08:53.740 --> 00:08:54.960
是分开的

00:08:54.960 --> 00:08:59.960
我们会出现以WAP打头的域名

00:08:59.960 --> 00:09:03.080
然后我们用手机访问的时候就是访问这个WAP

00:09:03.080 --> 00:09:04.980
然后呢

00:09:04.980 --> 00:09:06.100
我们用PC访问的话

00:09:06.100 --> 00:09:07.380
它可能就没有WAP了

00:09:07.380 --> 00:09:09.680
就是一个标准的一个网站

00:09:09.680 --> 00:09:13.600
比如说百度.com或者wap.百度.com

00:09:13.600 --> 00:09:15.420
早期呢

00:09:15.420 --> 00:09:21.680
我们是这样来实现这个移动端跟那个网页端的不同布局的

00:09:21.680 --> 00:09:25.300
但是随着这个时代进步呢

00:09:25.300 --> 00:09:26.020
技术进步呢

00:09:26.020 --> 00:09:28.640
我们现在是用这个显示式设计了

00:09:28.640 --> 00:09:32.260
主要就是用这个atmedia这个标签

00:09:32.260 --> 00:09:36.400
根据这个我们的展示设备的这个屏幕大小呢

00:09:36.400 --> 00:09:39.440
去动态的适配你这个网页的布局

00:09:39.440 --> 00:09:42.680
比如说我们现在手机端是个324

00:09:42.680 --> 00:09:44.680
一个这种小小屏幕

00:09:45.280 --> 00:09:47.680
就是宽度是324px

00:09:47.680 --> 00:09:49.080
就像素的一个小屏幕

00:09:49.380 --> 00:09:51.080
我们通过这个atmedia的标签呢

00:09:51.080 --> 00:09:53.380
会给它进行一个单独的布局

00:09:54.080 --> 00:09:54.980
如果说

00:09:55.980 --> 00:09:58.580
是个1024一个那个笔记本

00:09:58.680 --> 00:09:59.780
一个分辨率的话

00:10:00.780 --> 00:10:02.580
我们就会用atmedia

00:10:03.080 --> 00:10:06.080
然后匹配这个1024去实现一个笔记本的一个

00:10:06.680 --> 00:10:07.280
适配

00:10:07.280 --> 00:10:08.080
然后

00:10:08.680 --> 00:10:10.980
正常情况下就是我们会有一套

00:10:10.980 --> 00:10:13.580
对 PC 这种宽屏的适配

00:10:13.580 --> 00:10:17.940
这样就是省去了去建多个不同的

00:10:17.940 --> 00:10:25.980
域名网站去匹配不同设备这种繁复的这种操作

00:10:25.980 --> 00:10:29.580
然后再就是上下一些比较常用的像是 transaction

00:10:29.580 --> 00:10:31.220
这个就页面过渡动画

00:10:31.220 --> 00:10:35.940
然后还有一些这样比如说鼠标放在元素上面

00:10:35.940 --> 00:10:37.380
会有一些什么变化

00:10:37.380 --> 00:10:40.180
或者鼠标聚焦的时候会有什么变化

00:10:40.180 --> 00:10:42.460
这都比较是一些常规的一些操作

00:10:44.410 --> 00:10:47.090
这是css这边

00:10:48.490 --> 00:10:52.330
然后再就是java script

00:10:53.810 --> 00:10:56.690
现在我们有了 html框架

00:10:56.690 --> 00:11:00.490
然后我们用css把框架

00:11:00.650 --> 00:11:02.730
把房间装饰的比较漂亮

00:11:03.250 --> 00:11:05.570
但是有个问题就是说这个灯

00:11:06.010 --> 00:11:06.930
我们虽然有灯

00:11:06.930 --> 00:11:08.050
但是没有电

00:11:08.050 --> 00:11:09.290
没有给它供电

00:11:09.730 --> 00:11:10.890
它是不会亮的

00:11:10.890 --> 00:11:15.190
我们这个呃投影仪也没有供电也是不会亮

00:11:15.490 --> 00:11:19.690
这种时候现在呢我们就需要加script给他编写逻辑

00:11:20.890 --> 00:11:29.290
就是说这个加script就会写一些逻辑当比如说墙面上的这个控制开关按下了时候我们这个灯要亮

00:11:29.890 --> 00:11:31.890
他再按一次这个灯就灭掉了

00:11:31.890 --> 00:11:38.590
然后这个呃投影仪也是比如说供电了之后要要开始投影

00:11:38.590 --> 00:11:46.050
相关的一些这种给就是给这个房间内的设备去编写它的相应的功能

00:11:46.050 --> 00:11:47.730
相应的功能

00:11:47.730 --> 00:11:50.170
对应的网站呢

00:11:50.170 --> 00:11:52.410
就是说我们这个网站已经设计好了

00:11:52.410 --> 00:11:53.090
有图片

00:11:53.090 --> 00:11:53.990
有按钮

00:11:53.990 --> 00:11:55.010
有表单

00:11:55.010 --> 00:11:56.330
有各种元素

00:11:56.330 --> 00:11:58.230
我们JavaScript呢

00:11:58.230 --> 00:12:00.830
就要去给这个相应的元素进行编程

00:12:00.830 --> 00:12:02.770
提交了表单之后

00:12:02.770 --> 00:12:04.550
会把这个数据发送到哪

00:12:04.550 --> 00:12:07.070
然后点了这个按钮之后

00:12:07.070 --> 00:12:08.390
会给用户一个什么反馈

00:12:08.390 --> 00:12:11.330
然后点了一个超级链接

00:12:11.330 --> 00:12:12.290
会跳转到哪

00:12:12.290 --> 00:12:16.310
这是这个JavaScript的一个主要作用

00:12:16.310 --> 00:12:19.730
它可以就是说是这个

00:12:19.730 --> 00:12:22.310
一个智能控制器了

00:12:22.310 --> 00:12:25.250
然后它涉及到一些概念

00:12:25.250 --> 00:12:27.510
就是比如说我们要声明变量

00:12:27.510 --> 00:12:29.370
要定义函数

00:12:29.370 --> 00:12:31.030
要进行判断

00:12:31.030 --> 00:12:33.250
要做一套循环

00:12:33.250 --> 00:12:36.490
还有去操作一些动物

00:12:36.490 --> 00:12:42.190
嗯,然后还有去监听事件,做这些操作。

00:12:42.190 --> 00:12:47.990
动物这个东西呢,嗯,也是一个比较重要的一个点。

00:12:47.990 --> 00:12:57.190
我们在这个网页里面呢,每一个呃,每一个元素呢,我们可以称之称之为一个动物。

00:12:57.190 --> 00:13:05.510
它呢就是说一个会映射到比如说button或者说图片

00:13:05.510 --> 00:13:13.990
然后呢我们这个JavaScript就可以根据这个dom来进行一些相应操作

00:13:13.990 --> 00:13:18.870
比如说去更改它的一些既定的属性

00:13:18.870 --> 00:13:22.930
比如说我们现在有一个button

00:13:22.930 --> 00:13:24.850
CSS就是样式表

00:13:24.850 --> 00:13:26.150
我们规定它为蓝色

00:13:26.150 --> 00:13:28.530
但是运行过程中呢

00:13:28.530 --> 00:13:29.770
用户浏览呢

00:13:29.770 --> 00:13:30.850
过程中呢

00:13:30.850 --> 00:13:32.110
在一个特定条件下

00:13:32.110 --> 00:13:33.650
我们希望把它变成绿色

00:13:33.650 --> 00:13:35.350
这种情况下

00:13:35.350 --> 00:13:38.090
我们也可以用这个GS来实现

00:13:38.090 --> 00:13:39.230
主要是动态的去

00:13:39.230 --> 00:13:41.710
在用户使用过程中去做一些修改

00:13:41.710 --> 00:13:47.460
然后呢

00:13:47.460 --> 00:13:49.680
我们先看一下这个

00:13:49.680 --> 00:14:20.660
大家看这儿就是一个标准

00:14:20.660 --> 00:14:22.180
一个HTML页

00:14:22.180 --> 00:14:23.380
我们分了三部分

00:14:23.380 --> 00:14:25.040
这部分呢

00:14:25.040 --> 00:14:26.300
就是这个HTML

00:14:26.300 --> 00:14:28.020
这部分呢

00:14:28.020 --> 00:14:30.160
就是CSS压制表和JavaScript

00:14:30.160 --> 00:14:32.740
最终他们三部分结合呢

00:14:32.740 --> 00:14:34.720
会生成一个这个网页

00:14:34.720 --> 00:14:36.580
这网页呢

00:14:36.580 --> 00:14:38.240
就会有一个标题

00:14:38.240 --> 00:14:40.320
然后有一个那个

00:14:40.320 --> 00:14:42.800
一个description

00:14:42.800 --> 00:14:43.440
就标数

00:14:43.440 --> 00:14:46.120
然后会有相应的一些元素啊

00:14:46.120 --> 00:14:50.730
然后会有这个

00:14:50.730 --> 00:14:51.750
比如说我们你看

00:14:51.750 --> 00:14:54.210
这是一个标准的日期选择空页

00:14:54.210 --> 00:14:56.450
可以进行日期选择

00:14:56.450 --> 00:14:58.170
选择了之后呢

00:14:58.170 --> 00:14:59.970
如果说要点提交的话

00:14:59.970 --> 00:15:02.310
后续就会交给JavaScript

00:15:02.310 --> 00:15:04.650
去把这个数据提交给后端服务器

00:15:04.650 --> 00:15:12.250
然后这是一个那个输入框

00:15:12.250 --> 00:15:15.370
用户可以选择输入一个数量

00:15:15.370 --> 00:15:29.100
然后比如说我们要去改一下这个背景颜色

00:15:29.100 --> 00:15:35.130
我们可以在CSS这里面改成一个纯白

00:15:35.130 --> 00:15:44.210
这边也会跟着更新

00:15:44.210 --> 00:15:46.510
或者说我们改成一个红色

00:15:46.510 --> 00:15:51.100
这边就会变成红色

00:15:51.100 --> 00:15:54.310
嗯

00:15:54.310 --> 00:15:55.690
可以可以的

00:15:55.690 --> 00:16:00.770
我们这边是可以支持这种阉纹单词的

00:16:00.770 --> 00:16:04.940
但是这个

00:16:04.940 --> 00:16:07.220
这个呢

00:16:07.220 --> 00:16:12.300
属于浏览器一个内定了一个属于常数吧

00:16:12.300 --> 00:16:13.780
嗯

00:16:13.780 --> 00:16:17.440
大家看现在我这边打开的是一个chrome浏览器

00:16:17.440 --> 00:16:20.360
现在的浏览器比较主流浏览器

00:16:20.360 --> 00:16:22.120
其实现在就上了两种了

00:16:22.120 --> 00:16:22.880
一种是chrome

00:16:22.880 --> 00:16:30.440
那么一种是然后微软之前还有微软的阿姨也现在也慢慢淘汰了

00:16:30.440 --> 00:16:35.900
问题就是说我如果我们在用这个常识常数的时候

00:16:35.900 --> 00:16:38.780
这个需要确定浏览器是支持的

00:16:38.780 --> 00:16:39.860
但是你改颜色

00:16:39.860 --> 00:16:42.320
比如说改成软的改成外套

00:16:42.320 --> 00:16:44.000
这些一般都是支持的

00:16:44.000 --> 00:16:45.740
这是那个标准的那个

00:16:47.720 --> 00:16:49.620
标准的浏览器的一个

00:16:49.620 --> 00:16:52.220
他们也有一个浏览器的一个标准委员会

00:16:52.220 --> 00:16:54.380
也会制定浏览器的一些规则

00:16:54.380 --> 00:16:55.860
然后这个chrome

00:16:55.860 --> 00:16:58.580
FiveFox这浏览器都会根据这个标准进行实现

00:17:00.140 --> 00:17:02.420
但是有一些比如说有一些特别的东西呢

00:17:02.420 --> 00:17:03.860
可能就是只有chrome有

00:17:03.860 --> 00:17:04.500
FiveFox没有

00:17:04.500 --> 00:17:05.860
或者FiveFox有

00:17:05.860 --> 00:17:06.740
那个chrome没有

00:17:09.740 --> 00:17:14.300
另一个话题就是说我们现在我们你看我们现在实现的HTML呢

00:17:14.300 --> 00:17:17.300
还有CSS还是JavaScript

00:17:17.300 --> 00:17:21.860
这背后其实是这个浏览器在支撑这些东西的运行

00:17:22.220 --> 00:17:24.820
并不是一个其他的什么东西,

00:17:24.820 --> 00:17:27.820
也就是说你这个这套东西在浏览器中,

00:17:28.520 --> 00:17:29.820
预制了他的行为,

00:17:29.820 --> 00:17:32.420
他会解析你这个HTML,

00:17:32.420 --> 00:17:33.120
CSS,

00:17:33.120 --> 00:17:34.120
跟JavaScript的,

00:17:34.620 --> 00:17:35.820
嗯,

00:17:36.520 --> 00:17:37.120
行,

00:17:37.520 --> 00:17:38.420
然后呢,

00:17:38.420 --> 00:17:41.920
我们可以打开,

00:17:41.920 --> 00:17:43.620
大家可以连上这个桌面,

00:17:45.220 --> 00:17:47.020
打开这个PREGRAM,

00:17:47.020 --> 00:17:49.620
就是这个Devaluable,

00:17:53.600 --> 00:17:54.800
就打开这个网址,

00:17:54.800 --> 00:17:59.040
下面我们先打开它

00:17:59.040 --> 00:18:03.560
我们会结合实操去讲一下Flex布局这个东西

00:18:03.560 --> 00:18:09.840
先从HTML开始

00:18:09.840 --> 00:18:28.890
我们现在加入了HTML标签

00:18:28.890 --> 00:18:33.570
这其实就是一个标准的HTML页里一个开头

00:18:33.570 --> 00:18:36.410
这样浏览器就会认为你这个是个HTML

00:18:36.410 --> 00:18:37.310
他又好多

00:18:37.310 --> 00:18:40.490
他又会做好下一步进行解析的准备

00:18:41.810 --> 00:18:43.250
然后HTML呢

00:18:44.870 --> 00:20:33.300
我们有header打不开吗

00:20:33.300 --> 00:20:37.140
你能打开吗

00:20:37.140 --> 00:20:39.420
那我们继续

00:20:41.400 --> 00:20:44.340
然后我们这边就会定义一个header

00:20:44.340 --> 00:20:47.600
header这个就是告诉这个浏览器

00:20:47.600 --> 00:20:51.780
我们这个这个网页会有一些什么什么元素

00:20:52.760 --> 00:20:54.300
然后呢

00:20:54.300 --> 00:20:56.100
这个基本上是

00:20:57.680 --> 00:20:59.800
就是其实就是告诉浏览器

00:20:59.800 --> 00:21:03.840
我们一些比较怎么说呢

00:21:03.840 --> 00:21:06.540
就是内在的一些信息

00:21:06.540 --> 00:21:08.220
比如说有举个例子

00:21:08.220 --> 00:21:09.840
就是说我们个人的话

00:21:09.840 --> 00:21:11.400
我们用人做比方的话

00:21:11.400 --> 00:21:12.540
就会告诉我浏览器

00:21:12.540 --> 00:21:14.460
我这个人是个AB型血型

00:21:14.460 --> 00:21:16.800
然后会是个什么

00:21:18.960 --> 00:21:22.440
一个潜在的一个说他的智商是多少

00:21:22.440 --> 00:21:24.000
或者类似的一个比喻吧

00:21:24.300 --> 00:21:27.620
这个东西不会被用户去关注

00:21:27.620 --> 00:21:36.620
比如说现在就是我告诉我定义一个header

00:21:36.620 --> 00:21:39.140
然后放进了一个title

00:21:39.140 --> 00:21:40.860
这个呢就告诉浏览器

00:21:40.860 --> 00:21:43.180
我这个网页叫一个example

00:21:43.180 --> 00:21:44.500
他的名字叫一个example

00:21:44.500 --> 00:21:49.260
他呢只会在这个在这儿显示

00:21:49.260 --> 00:21:54.500
就是他这个标签页上会显示

00:21:54.500 --> 00:21:58.140
并不会会在这个正门上去显示

00:21:58.140 --> 00:22:01.120
然后还会相应的会有一些

00:22:01.120 --> 00:22:02.700
比如说metal data

00:22:02.700 --> 00:22:05.120
就是叫原数据

00:22:05.120 --> 00:22:10.400
这个会在那个像推特啊

00:22:10.400 --> 00:22:13.420
或者是Facebook用的比较多

00:22:13.420 --> 00:22:18.360
他们会把这个用一些用户的信息

00:22:18.360 --> 00:22:20.900
比如说你这个这是一个推特啊

00:22:20.900 --> 00:22:23.580
他的一个那个link

00:22:23.580 --> 00:22:27.520
他的个人profile link会放在这里面

00:22:27.520 --> 00:22:30.340
然后这这个主要的用途是什么呢

00:22:30.340 --> 00:22:32.960
主要用途是提供浏览器抓取

00:22:32.960 --> 00:22:38.020
这个在浏览器不是浏览器是那个搜索引擎的抓取

00:22:39.040 --> 00:22:40.540
我们常看百度啊

00:22:40.540 --> 00:22:43.580
比如说你我们常看的就是说在搜索的时候

00:22:43.580 --> 00:22:47.020
他有的网页可能会比较比较特别一点

00:22:47.020 --> 00:22:49.960
他可能左上角会有一个图片

00:22:49.960 --> 00:22:50.680
然后呢

00:22:50.680 --> 00:22:54.260
右边会有不同颜色的一些文字的描述

00:22:54.260 --> 00:22:55.780
然后会有个抬头

00:22:55.780 --> 00:22:58.520
然后下面还会有大多数的一个门子解释

00:22:59.440 --> 00:22:59.920
这些呢

00:22:59.920 --> 00:23:01.300
可能就是说这个

00:23:02.440 --> 00:23:06.540
这个元数据提供了一些信息提供浏览器抓取

00:23:06.540 --> 00:23:08.500
如果你不提供这些信息呢

00:23:08.500 --> 00:23:12.540
就像百度搜索返回结果下面的那些信息一样

00:23:12.540 --> 00:23:15.640
他可能只有一个抬头和剪剪短的一个提示

00:23:15.640 --> 00:23:16.320
这用途呢

00:23:16.320 --> 00:23:19.420
就是帮这些网站呢

00:23:19.420 --> 00:23:20.620
更好去抓取用户

00:23:20.620 --> 00:23:23.860
然后这个是Header的主要作用

00:23:23.860 --> 00:23:25.360
然后我们下面呢

00:23:25.360 --> 00:23:27.100
就是要开始定义正文了

00:23:28.300 --> 00:23:30.160
就告诉浏览器

00:23:30.160 --> 00:23:34.540
我们要开始去渲染你这个房间了

00:23:34.540 --> 00:23:37.540
我的房间现在肯定有个body就是主体

00:23:39.580 --> 00:23:42.040
我们现在有了一个主体

00:23:42.040 --> 00:23:43.060
然后

00:23:44.200 --> 00:23:45.640
现在我们主体默认了

00:23:45.640 --> 00:23:47.260
如果说你什么也不做的话

00:23:48.360 --> 00:23:48.700
他呢

00:23:48.700 --> 00:23:51.700
就是一个空白了东西

00:23:51.700 --> 00:23:55.540
现在我们可以给他定义一个那个

00:23:55.540 --> 00:23:58.140
定义一个css

00:23:58.140 --> 00:24:01.160
我们希望呢

00:24:01.160 --> 00:24:01.940
这个body呢

00:24:01.940 --> 00:24:08.210
是个这个红色吧

00:24:08.210 --> 00:24:11.360
这样就是说

00:24:11.360 --> 00:24:15.340
你看我们右边这边这个body就变成红色了

00:24:15.340 --> 00:24:18.660
然后怎么样对应呢

00:24:18.660 --> 00:24:25.200
就是说这个浏览器怎么把这个css和这个html去对应起来呢

00:24:25.200 --> 00:24:27.960
他怎么知道这个body要变成红色

00:24:27.960 --> 00:24:31.140
而不是说某一个元素变成红色呢

00:24:31.140 --> 00:24:33.180
主要就是靠前面这个声明

00:24:34.860 --> 00:24:36.960
我们这边你看我这边是写的

00:24:36.960 --> 00:24:39.000
在css里面写了这个body

00:24:40.320 --> 00:24:40.980
这个body呢

00:24:40.980 --> 00:24:43.200
就会对应到这个标签的body

00:24:44.940 --> 00:24:47.340
所以说这个浏览器就会去找到这个

00:24:48.540 --> 00:24:49.060
这个

00:24:50.220 --> 00:24:54.900
HTML的body标签去把它的背景变成红色

00:24:55.200 --> 00:24:59.930
然后还有其他一些定义的方式,

00:24:59.930 --> 00:25:02.530
比如说我们会用class,

00:25:02.530 --> 00:25:36.060
但如果说这个现在我们用另一种方式把这个body跟这个css去匹配起来了,

00:25:36.060 --> 00:25:38.760
就是使用这个class标题的这个属性,

00:25:38.760 --> 00:25:41.160
我们首先呢,

00:25:41.160 --> 00:25:47.660
在这个css里面定义了一个body color的一个css样式,

00:25:47.660 --> 00:25:49.760
然后指定背景是绿色,

00:25:49.760 --> 00:25:51.440
然后呢

00:25:51.440 --> 00:25:53.500
我们把这个bodycolor呢

00:25:53.500 --> 00:25:55.140
通过class属性复给body

00:25:55.140 --> 00:25:59.700
这样就是浏览器就会把这个bodycolor

00:25:59.700 --> 00:26:04.320
样式和这个bodycolor应用的这个

00:26:04.320 --> 00:26:08.080
那个元素呢匹配起来

00:26:08.080 --> 00:26:11.100
还有另一个问题就是

00:26:11.100 --> 00:26:12.220
大家应该也发现了

00:26:12.220 --> 00:26:15.520
我同时定义了这两个样式

00:26:15.520 --> 00:26:18.060
这时候呢

00:26:18.060 --> 00:26:21.940
这个body color的优先级是高于这个body的

00:26:21.940 --> 00:26:25.520
他会因为你这边已经是主动去指定了

00:26:25.520 --> 00:26:27.240
所以说他会把它覆盖掉

00:26:27.240 --> 00:26:33.790
这个大家目前有没有什么疑问

00:26:33.790 --> 00:26:34.890
可以自定义什么都可以

00:26:34.890 --> 00:27:10.090
不可以

00:27:10.090 --> 00:27:12.590
你你这么写是不会报错的

00:27:12.590 --> 00:27:15.170
但是他没有任何效果

00:27:15.170 --> 00:27:16.170
刚才我跟你说过

00:27:16.170 --> 00:27:17.390
就是说这个header呢

00:27:17.390 --> 00:27:18.290
就是这个东西

00:27:18.290 --> 00:27:21.870
他是只是告诉我们那个搜索引擎

00:27:21.870 --> 00:27:22.670
告诉浏览器

00:27:22.670 --> 00:27:25.250
我的一些基础信息

00:27:25.250 --> 00:27:27.550
它并不会展示给用户

00:27:27.550 --> 00:27:36.140
我们来可能这个比较比较模糊

00:27:36.140 --> 00:27:37.640
我们来一个

00:27:37.640 --> 00:27:44.920
你看像是这这个

00:27:44.920 --> 00:27:48.360
这是个标标准的一个百度的一个搜索引擎的结果

00:27:48.360 --> 00:27:51.760
你看我们这条和这条

00:27:51.760 --> 00:27:53.720
这条是那个百度百科的

00:27:53.720 --> 00:27:55.080
我们可以跳过不看

00:27:55.080 --> 00:27:56.300
你看这条

00:27:56.300 --> 00:27:59.780
它这边多了一个这个图片

00:27:59.780 --> 00:28:03.560
右边然后才是一个描述

00:28:03.560 --> 00:28:06.060
然后我们看下面这些

00:28:06.060 --> 00:28:09.860
你看这些是他就是没有这个右边这个图片的

00:28:09.860 --> 00:28:10.380
对吧

00:28:10.380 --> 00:28:15.280
那这个东西百度是怎么知道他右边这个有图片

00:28:15.280 --> 00:28:16.640
而且图片是什么的呢

00:28:16.640 --> 00:28:18.580
就是通过这个hider

00:28:18.580 --> 00:28:23.260
就是hider这边你可以定义一个预览图啊

00:28:23.260 --> 00:28:23.880
或者什么

00:28:23.880 --> 00:28:27.480
其他的信息告诉这个百度的缩合引擎

00:28:27.480 --> 00:29:01.480
我这边有这么个图片要再显示,这个图片并不是放在body里面的,并不放在这,是放在header里面的,但是你在看,比如说我们打开它,你看你打开之后是看不见这个图片的,对吧,我们来看它的这个header,这边就会定义一些那个,比如说一些原数据告诉这个浏览器,我这个大家能看清吗,放大一点,

00:29:01.480 --> 00:29:07.000
我这个网页是UTF8这个文字编码格式的

00:29:07.000 --> 00:29:11.420
然后那个这个就是robots

00:29:11.420 --> 00:29:12.580
意思就是说呢

00:29:12.580 --> 00:29:14.880
搜索引擎的机器人

00:29:14.880 --> 00:29:18.660
就是可以去抓取我这个网页所有的信息

00:29:18.660 --> 00:29:21.300
这个就涉及到另一方面知识

00:29:21.300 --> 00:29:23.440
就是搜索引擎这一块知识了

00:29:23.440 --> 00:29:24.380
就是搜索引擎

00:29:24.380 --> 00:29:27.000
你他会放出一些那个爬取了

00:29:27.000 --> 00:29:28.060
我们叫蜘蛛

00:29:28.060 --> 00:29:30.520
去在整个internet上去搜集

00:29:30.520 --> 00:29:31.420
收集内容

00:29:31.420 --> 00:29:37.220
这时候就他们要遵守一个这个搜索引擎的一个协议

00:29:37.220 --> 00:29:40.200
我们这边可能robots后面还有分类

00:29:40.200 --> 00:29:41.820
比如说是Facebook的robots

00:29:41.820 --> 00:29:43.420
或者说是谷歌的robots

00:29:43.420 --> 00:29:44.160
百度的robots

00:29:44.160 --> 00:29:47.240
他们在看到这条meta

00:29:47.240 --> 00:29:48.220
这原数据的时候

00:29:48.220 --> 00:29:52.900
就根据这个后续的内容去对这个网页进行抓取

00:29:52.900 --> 00:29:54.260
他们也有他们的详细准则

00:29:54.260 --> 00:29:56.200
比如说我content是all

00:29:56.200 --> 00:29:58.340
就是说你可以全部抓取

00:29:58.580 --> 00:30:00.400
如果说content是deny

00:30:00.400 --> 00:30:02.440
就是说我不允许你抓取

00:30:02.440 --> 00:30:06.060
如果你这个机器人专属这个规则的话

00:30:06.060 --> 00:30:07.780
他就不应该抓取这个网页

00:30:07.780 --> 00:30:09.740
嗯

00:30:09.740 --> 00:30:12.520
比如说这条就是一个那个

00:30:12.520 --> 00:30:14.540
的作者了

00:30:14.540 --> 00:30:15.740
作者就是这个网站了

00:30:15.740 --> 00:30:17.680
然后你入了样式表

00:30:17.680 --> 00:30:20.320
还有这个

00:30:20.320 --> 00:30:26.620
这个就是这个网站的一个图标啊

00:30:26.620 --> 00:30:27.840
就是你看我现在

00:30:27.840 --> 00:30:31.280
我现在这个推保这这个小图标

00:30:31.280 --> 00:30:33.020
就是这定义了

00:30:33.020 --> 00:30:44.280
所以说这个header那东西呢

00:30:44.280 --> 00:30:45.940
它主要不是给

00:30:45.940 --> 00:30:48.440
给使用者看的

00:30:48.440 --> 00:30:49.520
主要是给这个

00:30:49.520 --> 00:30:50.980
第三方

00:30:50.980 --> 00:30:53.420
比如说一些机器人啊

00:30:53.420 --> 00:30:54.920
或者浏览器啊

00:30:54.920 --> 00:30:56.380
去展示一些内容

00:30:56.380 --> 00:30:57.180
其实就让

00:30:57.180 --> 00:31:00.620
我们用户的用户体验

00:31:00.620 --> 00:31:02.700
会变得更加的

00:31:02.700 --> 00:31:04.240
更加好一点

00:31:04.240 --> 00:31:07.980
这就主要是header的一个作用

00:31:07.980 --> 00:31:12.790
大家进度

00:31:12.790 --> 00:31:17.110
这位丹丹同学

00:31:17.110 --> 00:31:18.790
这个还是空的

00:31:18.790 --> 00:31:24.800
后续我们要用这个接着讲的flex

00:31:24.800 --> 00:31:29.420
他连上了吗

00:31:29.420 --> 00:32:21.070
接着去讲一下下一个

00:32:21.070 --> 00:32:25.850
怎么样去应用样式的一个方式

00:32:25.850 --> 00:32:27.490
我们还有一种方式

00:32:27.490 --> 00:32:29.730
就是除了定义CSS之外

00:32:29.730 --> 00:32:32.210
我们还可以用关键字style

00:32:32.210 --> 00:32:37.250
去定义这个样式

00:32:37.250 --> 00:32:44.880
比如说我们现在就是still background

00:32:44.880 --> 00:33:49.050
那我们还有第三种方式

00:33:49.050 --> 00:33:56.230
就是用这种still这个属性去定义这个样式

00:33:56.230 --> 00:33:59.790
这种情况呢

00:33:59.790 --> 00:34:03.810
就是说我们不用这个下面的样式表了

00:34:03.810 --> 00:34:07.190
然后我们直接去在这个

00:34:07.190 --> 00:34:13.190
直接在这个元素上去指定这个元素的某些属性

00:34:13.190 --> 00:34:15.530
我这边呢

00:34:15.530 --> 00:34:17.470
直接就是这个好处呢

00:34:17.470 --> 00:34:23.490
就是说我们可以直接去去干预这个这个元素的一些属性

00:34:23.490 --> 00:34:26.850
但是坏处呢

00:34:26.850 --> 00:34:27.390
在于什么

00:34:27.390 --> 00:34:31.570
你要知道我们一个网页可能不止只有一个元素

00:34:31.570 --> 00:34:33.470
可能有很多元素

00:34:33.810 --> 00:34:36.690
我们如果去每一个去指定的话

00:34:37.170 --> 00:34:38.850
那工程量是非常大的

00:34:39.130 --> 00:34:41.250
而且也不易于维护

00:34:42.130 --> 00:34:43.290
比如说我们有一个bottom

00:34:43.490 --> 00:34:44.370
这个大家不用写

00:34:44.490 --> 00:34:46.570
这个只是说给大家一个展示

00:34:47.570 --> 00:34:48.770
比如说我们有个bottom

00:34:48.770 --> 00:34:50.450
它的是aa

00:34:51.890 --> 00:34:52.770
它的名字

00:34:53.130 --> 00:34:54.850
然后我们有一个

00:34:57.120 --> 00:34:59.800
我们有另一个bottom

00:35:00.920 --> 00:35:01.880
它是bbb

00:35:03.320 --> 00:35:04.680
我们还有个ccc

00:35:04.680 --> 00:35:15.700
这时候我们会给bottom去加一个统一的属性

00:35:16.300 --> 00:35:22.000
然后我们希望它的背景是个比如说是个红色

00:35:22.000 --> 00:35:39.160
这样我们所有的bottom的颜色都变成红色了

00:35:39.160 --> 00:35:43.260
但是我希望这中间就像变成一个别的颜色

00:35:43.260 --> 00:35:51.390
我们就可以去单独的去调整它的属性

00:35:51.390 --> 00:35:52.790
就像一开始说的

00:35:52.790 --> 00:35:58.910
我们这个希望着我们这个吊顶灯第二排变成一个绿色

00:35:58.910 --> 00:36:00.590
我们可以去这样去做

00:36:00.590 --> 00:36:04.850
但是带来一个问题就是说我们这个如果说有很多的话

00:36:04.850 --> 00:36:07.850
我们这样一个一个指定是很繁琐

00:36:09.030 --> 00:36:14.230
我还是建议就是去用这个css样式饼去统一的规划

00:36:14.250 --> 00:36:16.230
这样也便于这个后期的维护

00:36:16.230 --> 00:36:53.280
我们下面就是开始讲

00:36:53.280 --> 00:36:56.080
这个要讲一下这个flex布局

00:36:56.080 --> 00:37:01.280
这个是比较重要的一个内容

00:37:01.280 --> 00:37:03.860
然后我们现在

00:37:03.860 --> 00:37:06.620
我们现在就是说

00:37:06.620 --> 00:37:08.200
我们现在有一个这样大的房间

00:37:08.200 --> 00:37:11.860
我们现在需要怎么样去把它合理的分配

00:37:11.860 --> 00:37:14.120
比如说我这个房间

00:37:14.120 --> 00:37:17.760
我希望东南角这边有一个书房

00:37:17.760 --> 00:37:21.160
然后西南角有一个洗手间

00:37:21.160 --> 00:37:23.700
然后北边是一个卧室

00:37:23.700 --> 00:37:25.820
然后进门是一个大厅

00:37:25.820 --> 00:37:29.100
这种情况下我们怎么做呢

00:37:29.100 --> 00:37:34.500
就是我们传统有一些像是DIV啊

00:37:34.500 --> 00:37:35.140
这些元素

00:37:35.140 --> 00:37:40.540
我们通过给它附上调整它的flex属性

00:37:40.540 --> 00:37:42.300
来告诉它

00:37:42.300 --> 00:37:47.860
以这个范围内是一个厨房

00:37:47.860 --> 00:37:51.220
这个范围内它是一个洗漏间

00:37:51.220 --> 00:37:54.260
这个范围内是一个卧室

00:37:54.260 --> 00:38:00.660
我们就是用这个Flex布局去调整

00:38:00.660 --> 00:38:05.940
那主要就是说我们可以用

00:38:05.940 --> 00:38:09.660
主要概念就是说我们会有一个Flex Container

00:38:09.660 --> 00:38:13.520
这个呢就是说是一个主容器

00:38:13.520 --> 00:38:20.620
我们去就是说我们要用container来画房间一个大范围

00:38:20.620 --> 00:38:23.620
我们首先把这个范围定下来

00:38:23.620 --> 00:38:30.520
然后再通过调整大范围内的子元素

00:38:30.520 --> 00:38:36.240
来让它达到我们预期的一个房间的布局

00:38:36.240 --> 00:38:42.510
我们先来建一个房间

00:38:42.510 --> 00:39:03.670
我们现在就是有了这个这个是初始一个网页的一个框架

00:39:05.410 --> 00:39:10.290
然后这个body就是这个空间就是供我们下面去分割使用了

00:39:10.310 --> 00:39:15.190
我们首先去建一个这个画一个那个范围下来

00:39:15.190 --> 00:39:16.870
就是通过一个DIV这个标签

00:39:17.890 --> 00:39:18.670
这个DIV呢

00:39:18.670 --> 00:39:21.490
就是一个通用的容器

00:39:21.490 --> 00:39:21.970
他呢

00:39:21.970 --> 00:39:22.690
其实也是

00:39:24.070 --> 00:39:27.250
不会向用户一个进行实体展示了

00:39:27.250 --> 00:39:31.450
其实他就是用我们可以理解为那个房间内的隔断

00:39:31.450 --> 00:39:32.050
然后呢

00:39:32.050 --> 00:39:33.550
我们用这个sdl

00:40:27.760 --> 00:40:28.460
没有关系

00:40:31.990 --> 00:40:32.690
这个没有关系

00:40:32.690 --> 00:41:16.640
他这个最后不要求分号

00:41:16.640 --> 00:41:17.340
那个

00:41:19.540 --> 00:41:20.040
大家看

00:41:20.040 --> 00:41:22.540
现在就是说我们通过这个

00:41:24.040 --> 00:41:26.240
这个div来画了这么一块

00:41:27.340 --> 00:41:28.340
一块区域出来

00:41:29.640 --> 00:41:31.140
然后这个呢

00:41:31.140 --> 00:41:35.040
就是说我们写了这一段这个样式呢

00:41:35.040 --> 00:41:40.110
就是要求宽度是整个这个页面的宽度

00:41:41.070 --> 00:41:44.430
这个这个区域宽度是整个页面宽度

00:41:44.430 --> 00:41:46.110
然后这个区域的高度呢

00:41:46.110 --> 00:41:47.670
是400px

00:41:49.530 --> 00:41:53.010
也就是说是这个400像素的高度

00:41:53.970 --> 00:41:55.350
如果然后呢

00:41:56.590 --> 00:42:01.290
这个是一个重点的一个那个属性

00:42:01.290 --> 00:42:03.810
他告诉我浏览器我们这个

00:42:04.890 --> 00:42:05.730
这个区域呢

00:42:05.730 --> 00:42:08.430
接下来会使用这个flags进行布局

00:42:10.110 --> 00:42:11.490
然后这个

00:42:12.590 --> 00:42:14.310
这个就是设了一个红色背景

00:42:14.310 --> 00:42:17.470
这个主要是让大家容易容易观察

00:42:17.470 --> 00:42:20.490
默认白色的话混在一起的看不看得清

00:42:22.450 --> 00:42:23.910
然后

00:42:25.650 --> 00:42:27.510
这样就是我们有了一个这个

00:42:28.730 --> 00:42:30.390
一片区域我们划定了

00:42:30.390 --> 00:42:35.190
我们接下来就准备给他进行分块

00:42:35.190 --> 00:42:36.870
你看我们现在就是说

00:42:38.550 --> 00:42:42.810
我们可以去把这个区域进行横向分跟纵向分

00:42:42.810 --> 00:42:43.350
这两种

00:42:44.550 --> 00:42:47.070
现在就是我们现在有这种

00:42:47.070 --> 00:43:09.400
我们先来尝试这种方向分

00:43:09.400 --> 00:43:09.940
这边呢

00:43:09.940 --> 00:43:11.560
就是我们指定了这个

00:43:11.560 --> 00:43:15.460
现在我们这个区域里面排版就是横向的

00:43:15.460 --> 00:43:20.200
然后我们放几个那个放几个那个item进去

00:43:20.200 --> 00:43:28.940
来看看这个来看看它的效果

00:43:28.940 --> 00:43:40.000
大家要是有问题可以随时打断

00:43:40.000 --> 00:43:41.500
这不要紧

00:43:41.500 --> 00:45:41.110
现在就是说我给这个房间

00:45:41.110 --> 00:45:43.770
这个大的空间内加了三个小房间

00:45:43.770 --> 00:45:45.730
那边是123

00:45:45.730 --> 00:45:47.510
背景是绿色蓝色黄色

00:45:47.510 --> 00:45:53.850
根据我们这个排版的这个方向呢

00:45:53.850 --> 00:45:55.730
大家看它是顺序123

00:45:55.730 --> 00:45:57.310
这样排过来的

00:45:57.310 --> 00:48:03.930
我们稍微等一下上下同学再往下讲

00:48:03.930 --> 00:48:20.620
有问题可以随时停

00:48:20.620 --> 00:48:22.220
随时提一下

00:48:22.220 --> 00:48:53.810
这个就是告诉

00:48:53.810 --> 00:48:56.190
现在我们这个红色背景

00:48:56.190 --> 00:48:58.830
它是一个我们画下来的一个隔断区域

00:48:58.830 --> 00:49:02.810
它主要是告诉我们这个浏览器

00:49:02.810 --> 00:49:05.510
后续我们要在里面放格子的时候

00:49:05.510 --> 00:49:09.760
它是横向排列的

00:49:09.800 --> 00:49:10.700
你看这个

00:49:12.680 --> 00:49:14.120
你改成column的话

00:49:14.120 --> 00:49:15.500
他就会变成纵线

00:49:15.500 --> 00:50:56.800
对这个我们说这个结果不一定

00:50:56.800 --> 00:50:59.240
我们主要目的是让大家理解这个东西

00:50:59.240 --> 00:51:02.560
这个知识让大家理解这个知识

00:51:02.560 --> 00:51:03.520
结果不一定

00:51:03.520 --> 00:51:06.100
不需要非要跟我这个结果一样

00:51:06.100 --> 00:51:50.790
大家主要是去理解

00:51:50.790 --> 00:51:58.700
我们接接着回来回到这个大家看

00:51:58.700 --> 00:52:05.400
现在就是说我们先给他做了一个那个横向的一个布局

00:52:05.400 --> 00:52:10.380
然后你看他还有一个reserve布局

00:52:10.380 --> 00:52:14.860
就是说我们现在可以一二三这样顺序去布局

00:52:14.860 --> 00:52:16.700
我们如果说变成reserve

00:52:16.700 --> 00:52:19.000
入入杠reserve的话

00:52:19.000 --> 00:52:20.840
他会给你变成一个倒许

00:52:20.840 --> 00:52:25.380
这是这个浏览器提供了一个那个支援

00:52:25.380 --> 00:52:40.080
就你不用去很复杂的去写一些什么代码去去去去调整我们比如说我们大家可以都试试

00:52:40.080 --> 00:52:47.360
其实你看他有代码提示

00:52:47.360 --> 00:52:50.400
这有很多很多的布局

00:52:50.400 --> 00:52:53.320
我其实大家可以挨个试试

00:52:53.320 --> 00:52:56.600
但是我们大部分用的其实就是入和好了

00:52:56.600 --> 00:52:59.460
我把它改成

00:52:59.460 --> 00:53:00.200
Raw Resolve

00:53:00.200 --> 00:53:02.380
它就会变成321

00:53:02.380 --> 00:53:05.150
变成这种

00:53:05.150 --> 00:53:07.590
这种

00:53:07.590 --> 00:53:09.410
这个东西呢

00:53:09.410 --> 00:53:10.410
它常用场景

00:53:10.410 --> 00:53:13.330
其实在我们这边不是太常用

00:53:13.330 --> 00:53:15.830
但是它常用场景是在

00:53:15.830 --> 00:53:17.230
阿拉伯地区

00:53:17.230 --> 00:53:19.550
因为大家知道

00:53:19.550 --> 00:53:21.030
我们都是包括

00:53:21.030 --> 00:53:22.990
欧洲美国

00:53:22.990 --> 00:53:25.790
和东南亚亚洲这边

00:53:25.790 --> 00:53:27.650
我们习惯是从左

00:53:27.650 --> 00:53:28.290
向右书写

00:53:28.290 --> 00:53:31.850
他们中东那边呢

00:53:31.850 --> 00:53:33.830
他麻辣不文字是从右往左书写

00:53:33.830 --> 00:53:37.850
所以说我们比如说我们做电商网站啊

00:53:37.850 --> 00:53:39.330
或者什么之类的

00:53:39.330 --> 00:53:40.990
做一个本地适配的话

00:53:40.990 --> 00:53:43.430
我们可能在中国这边就是

00:53:43.430 --> 00:53:44.910
做了一个网站

00:53:44.910 --> 00:53:48.370
他那是从左到右的一个布局排版

00:53:48.370 --> 00:53:50.710
然后也是中文的

00:53:50.710 --> 00:53:52.190
然后我们比如说我们好

00:53:52.190 --> 00:53:53.910
现在老板给我们一个要求

00:53:53.910 --> 00:53:57.330
我们要现在要进军中东市场

00:53:57.330 --> 00:53:59.490
作为IT这边

00:53:59.490 --> 00:54:01.130
我们从头做一个

00:54:01.130 --> 00:54:03.350
这个成本老板肯定是不可接受的

00:54:03.350 --> 00:54:04.210
我们有一个了

00:54:04.210 --> 00:54:05.290
为什么要再做一个

00:54:05.290 --> 00:54:07.270
然后呢

00:54:07.270 --> 00:54:09.670
就是说我们就可以用这种

00:54:09.670 --> 00:54:11.510
配合我们

00:54:11.510 --> 00:54:13.050
我们刚才的这个

00:54:13.050 --> 00:54:15.630
Header这些东西

00:54:15.630 --> 00:54:17.570
把这个网站

00:54:17.570 --> 00:54:19.590
如果说

00:54:19.590 --> 00:54:21.670
它是中东识别出这个访问者

00:54:21.670 --> 00:54:23.250
是从中东地区访问

00:54:23.250 --> 00:54:25.250
我们就可以写一套

00:54:25.250 --> 00:54:26.410
另一套样式

00:54:26.410 --> 00:54:29.850
去把当前的中中文的这套样式覆盖掉

00:54:29.850 --> 00:54:32.970
然后把里面这个flex direction呢

00:54:32.970 --> 00:54:33.950
变成roo reserve

00:54:33.950 --> 00:54:36.750
它就会变成一个从右往左拍板

00:54:36.750 --> 00:54:39.550
这样就比较符合他们那边的一个阅读习惯

00:54:39.550 --> 00:54:42.530
但这个场景是非常非常少

00:54:42.530 --> 00:54:49.070
然后呢

00:54:49.070 --> 00:54:50.650
下一个呢

00:54:50.650 --> 00:54:52.990
就是说刚才有同学已经试了

00:54:52.990 --> 00:54:54.730
我们既然有横向了

00:54:54.730 --> 00:54:56.550
肯定有纵向了

00:54:56.550 --> 00:55:00.050
这个就就是我们如果说把roo改成column

00:55:00.050 --> 00:55:04.110
它就会变成一个纵向的排版

00:55:04.110 --> 00:55:06.690
一样它也支持宇宙

00:55:06.690 --> 00:55:16.800
这个基本都是一样的道理

00:55:16.800 --> 00:55:19.620
我就不过多的浪费时间在这上面

00:55:19.620 --> 00:55:21.600
然后就往下走了

00:55:21.600 --> 00:55:25.140
然后呢

00:55:25.140 --> 00:55:27.140
这个就是说

00:55:27.140 --> 00:55:30.880
它这个是否这个涉及了是否算行

00:55:30.880 --> 00:55:32.340
如果说我们元素过多

00:55:32.340 --> 00:55:34.320
或者说在一个

00:55:34.320 --> 00:55:40.400
那个屏幕比较小的一个设备上去浏览的话

00:55:41.200 --> 00:55:46.400
它会有多个的这种挂行的一个策略

00:55:51.820 --> 00:55:54.320
我们多加几个这个房间给他们

00:55:57.290 --> 00:55:59.490
你看如果说我们不指定的话

00:55:59.490 --> 00:56:02.690
它就会一个一个收缩

00:56:03.790 --> 00:56:05.390
以适应这个屏幕

00:56:07.240 --> 00:56:08.440
如果说我们继续加它

00:56:08.440 --> 00:56:11.340
还会继续压缩直到压的非常小

00:56:14.400 --> 00:56:15.000
这时候呢

00:56:15.000 --> 00:56:19.920
我们可以尝试给他加上一个flexwap这个属性

00:56:19.920 --> 00:56:20.580
然后呢

00:56:20.580 --> 00:56:26.780
去让他去让他去变了一个换行

00:56:28.700 --> 00:56:31.700
我们加了一个wap这个属性了

00:56:31.700 --> 00:56:36.380
然后他就会自然的这个格子

00:56:36.380 --> 00:56:37.700
如果说放不下了

00:56:37.700 --> 00:56:39.620
他会换到下一行去

00:56:39.620 --> 00:56:42.800
目前大家有没什么地方不理解或者有问题

00:56:50.060 --> 00:56:50.420
对

00:56:51.200 --> 00:56:56.060
就是说它是有一个它是有个内在的一个自己的一个策略的

00:56:56.060 --> 00:57:01.020
比如说你现在我们现在这边设置是100宽嘛

00:57:01.020 --> 00:57:02.520
100像素宽嘛

00:57:02.520 --> 00:57:05.640
它是在这儿

00:57:05.640 --> 00:57:07.060
它是告诉浏览器

00:57:07.060 --> 00:57:10.720
我预期我这个格子是100像素宽

00:57:10.720 --> 00:57:16.340
你在这个空间内尽量给我放下放进去

00:57:16.340 --> 00:57:18.200
如果放不进去呢

00:57:18.200 --> 00:57:19.300
你可以输缩

00:57:19.300 --> 00:57:21.980
就是说它可以小于100

00:57:21.980 --> 00:57:22.920
但是不会大于100

00:57:22.920 --> 00:57:27.620
然后我们如果说像刚才的

00:57:27.620 --> 00:57:30.040
我们把这个wap去掉

00:57:30.040 --> 00:57:32.440
它就会一直被挤

00:57:32.440 --> 00:57:34.380
被挤在一起

00:57:34.380 --> 00:57:38.060
我们看看column也是一样的

00:57:38.060 --> 00:57:41.590
会一直被挤

00:57:41.590 --> 00:58:01.780
然后就是这个

00:58:01.780 --> 00:58:04.600
它这个有三个属性

00:58:04.600 --> 00:58:06.240
一个就是nowwap

00:58:06.240 --> 00:58:08.280
nowwap就是默认了

00:58:08.280 --> 00:58:09.400
刚才大家看到了

00:58:09.400 --> 00:58:10.600
就是一直会被挤压

00:58:10.600 --> 00:58:12.100
然后wap呢

00:58:12.100 --> 00:58:13.300
就是说换号

00:58:13.300 --> 00:58:16.680
wap是最后就是反向的

00:58:16.680 --> 00:58:20.620
这个和刚才那个root的resolve是一样的

00:58:20.620 --> 00:58:22.100
一样的概念

00:58:22.100 --> 00:58:23.200
这就是wap的效果

00:58:23.200 --> 00:58:25.020
会进行换号

00:58:25.020 --> 00:58:27.080
这个resolve呢

00:58:27.080 --> 00:58:30.440
就会倒过来

00:58:30.440 --> 00:58:30.960
然后呢

00:58:30.960 --> 00:58:32.400
我们这边呢

00:58:32.400 --> 00:58:36.800
这是一个语法语法堂嘛

00:58:36.800 --> 00:58:37.500
我们管这个叫

00:58:37.500 --> 00:58:41.100
你看我们一般这几个属性呢

00:58:41.100 --> 00:58:45.280
都是会被长进呃长长进行设置

00:58:45.280 --> 00:58:48.960
如果说我们做那个flex布局的话

00:58:48.960 --> 00:58:53.860
他必须肯定会设置方向以及设置他的wap

00:58:53.860 --> 00:58:55.920
所以说他提供了这个语法堂

00:58:55.920 --> 00:58:59.860
就是你可以在一行代码里面就是直接去告诉这个

00:59:00.900 --> 00:59:01.860
浏览器啊

00:59:01.860 --> 00:59:03.960
我现在需要什么方向

00:59:03.960 --> 00:59:05.360
需不需要去wap

00:59:06.540 --> 00:59:08.580
这样就不需要打两行字了

00:59:08.580 --> 00:59:10.260
这个命令主要是这个作用

00:59:11.100 --> 00:59:18.580
然后这个就是说调整调整这元素在这个空间内的一个位置

00:59:18.580 --> 00:59:22.920
我们可以让它在那个放在中间

00:59:22.920 --> 00:59:25.560
或者说放在从左边开始

00:59:25.560 --> 00:59:26.960
或者说从右边开始

00:59:26.960 --> 00:59:31.780
或者说我们就是让它平均摆放

00:59:31.780 --> 00:59:33.640
你看这个就是默认

00:59:33.640 --> 00:59:38.540
默认的话我们会这个元素会从左边开始往右排

00:59:38.540 --> 00:59:40.400
一个一个排直到放不下

00:59:40.400 --> 00:59:43.000
如果说有WAP设置的话会换行

00:59:43.000 --> 00:59:45.320
没有的话会被持续挤压

00:59:45.320 --> 00:59:49.760
这个呢就是反过来了

00:59:49.760 --> 00:59:52.740
反过来会从右边开始往左放

00:59:52.740 --> 00:59:56.680
然后一直放到放不下位置

00:59:56.680 --> 00:59:58.100
换行或者挤压

00:59:58.100 --> 01:00:00.960
这个就是说我们常用的了

01:00:00.960 --> 01:00:01.400
居中

01:00:01.400 --> 01:00:05.740
这个就是我们比如说在有个标题的时候

01:00:05.740 --> 01:00:09.620
我们会放一个标题

01:00:09.620 --> 01:00:11.500
放一个文字描述

01:00:11.500 --> 01:00:12.740
默认的话

01:00:12.740 --> 01:00:15.780
它可能都会从左边开始往右排

01:00:15.780 --> 01:00:20.080
但是我们肯定希望它是居中显示

01:00:20.080 --> 01:00:22.560
那我们指定这个书香呢

01:00:22.560 --> 01:00:24.660
它就会把这个标题和那个

01:00:24.660 --> 01:00:27.900
描述进行自动的居中

01:00:27.900 --> 01:00:31.540
这个space bit 2呢

01:00:31.540 --> 01:00:33.640
这个也是比较常用的

01:00:33.640 --> 01:00:38.640
它就会自动的去把这个元素中间的

01:00:38.640 --> 01:00:40.220
这个空间呢

01:00:40.220 --> 01:00:41.240
进行自动分配

01:00:41.240 --> 01:00:46.530
如果说比如这现在有三个元素

01:00:46.530 --> 01:00:49.490
你看这个中间这空间是比较平均的

01:00:49.490 --> 01:00:50.850
如果有五个元素的话

01:00:50.850 --> 01:00:52.950
它会再去平均这个空间

01:00:52.950 --> 01:00:55.650
这个等一下我们都可以试一下

01:00:55.650 --> 01:01:02.160
然后这个space around就是between的中间了

01:01:02.160 --> 01:01:03.680
around的自然意思就是说

01:01:03.680 --> 01:01:08.220
把这个空间呢围绕这个元素进行平分

01:01:08.220 --> 01:01:15.900
上一个是只考虑它的右边

01:01:15.900 --> 01:01:16.420
右侧

01:01:16.420 --> 01:01:18.160
不考虑这个左侧

01:01:18.160 --> 01:01:20.280
这个呢

01:01:20.280 --> 01:01:22.680
就是左右两边都会进行一个均分

01:01:22.680 --> 01:01:25.660
直到站板的空间

01:01:25.660 --> 01:01:28.220
这我们可以来试一试

01:01:28.220 --> 01:01:31.220
这个通过这个来试一下

01:01:31.220 --> 01:01:39.860
比如说现在我们没有指定这个竹轴

01:01:39.860 --> 01:01:46.540
现在我们来指定一下

01:01:46.540 --> 01:01:47.240
指定一下

01:01:47.240 --> 01:01:49.500
比如说我们现在这是start

01:01:49.500 --> 01:01:50.780
默认这是start

01:01:50.780 --> 01:01:53.060
我们改成end

01:01:53.060 --> 01:01:55.480
大家看就可以

01:01:55.480 --> 01:01:57.400
它从右开始往左排了

01:01:57.400 --> 01:02:02.420
然后我们改成center

01:02:02.420 --> 01:02:03.240
就集中

01:02:03.240 --> 01:02:06.820
这个就会放到中间

01:02:06.820 --> 01:02:15.520
这是space between的效果

01:02:15.520 --> 01:02:17.300
大家看这个就是

01:02:17.300 --> 01:02:20.300
这个空间被均分了

01:02:20.300 --> 01:02:23.890
然后我们再加两个元素看看

01:02:23.890 --> 01:02:25.250
现在是三个元素

01:02:25.250 --> 01:02:26.990
我们变成五个元素

01:02:26.990 --> 01:02:35.450
现在就是有五个元素来均分这个空间

01:02:35.450 --> 01:02:42.340
我们试一下around

01:02:42.340 --> 01:02:45.440
around的话

01:02:45.440 --> 01:02:50.980
大家看就是这空间被这个元素也是均分

01:02:50.980 --> 01:02:52.980
但是考虑到左边也有空间

01:02:52.980 --> 01:03:01.720
那我们其实刚才又涉及了另一个概念

01:03:01.720 --> 01:03:03.140
就是什么叫主轴

01:03:03.140 --> 01:03:10.010
这一开始就是我们这展示过主轴

01:03:10.010 --> 01:03:18.430
如果说我们这个Flex布局是这个横向的话

01:03:18.430 --> 01:03:22.170
主轴就是从左到右这一条横轴

01:03:22.170 --> 01:03:28.460
然后纵轴就是这条

01:03:28.460 --> 01:03:29.660
我们叫Cross

01:03:29.660 --> 01:03:32.400
这个呢就是从顶到底

01:03:32.400 --> 01:03:37.400
所以说我们在那个

01:03:37.400 --> 01:03:41.020
它的这个布局是direction是Rule的时候

01:03:41.020 --> 01:03:42.600
我们主轴是这一条

01:03:42.600 --> 01:03:47.100
如果说我们这个布局的那个方向是column

01:03:47.100 --> 01:03:49.940
它的主轴就是从上到下这一条

01:03:49.940 --> 01:03:58.570
这个大家能理解吧

01:03:58.570 --> 01:03:59.030
OK

01:03:59.030 --> 01:04:00.490
那么我们继续

01:04:00.490 --> 01:04:03.590
目前有什么问题吗

01:04:03.590 --> 01:04:05.030
没有

01:04:05.030 --> 01:04:06.350
我们就继续

01:04:06.350 --> 01:04:21.780
这个下一个就是这个

01:04:21.780 --> 01:04:24.260
align item这个出现

01:04:24.260 --> 01:04:26.460
它跟那个

01:04:26.460 --> 01:04:30.760
刚才这个justice content

01:04:30.760 --> 01:04:32.880
差不多是一个意思

01:04:32.880 --> 01:04:34.840
比较像不是一个意思

01:04:34.840 --> 01:04:35.960
是比较像

01:04:35.960 --> 01:04:39.040
它的主要用处是

01:04:39.040 --> 01:04:40.560
对这个元素进行

01:04:40.560 --> 01:04:42.500
刚才我们那个justice呢

01:04:42.500 --> 01:04:44.940
是对这个空间进行一个

01:04:44.940 --> 01:04:48.020
那个位置调整

01:04:48.020 --> 01:04:51.600
这个是对这个元素进行这个

01:04:51.600 --> 01:04:53.820
一个对齐

01:04:53.820 --> 01:05:00.830
你看这个呢

01:05:00.830 --> 01:05:03.710
现在我这个图上有五个元素啊

01:05:03.710 --> 01:05:07.490
然后它分别就是说是高度20次

01:05:07.490 --> 01:05:08.430
16是80 100

01:05:08.430 --> 01:05:09.950
默认呢

01:05:09.950 --> 01:05:11.630
就是说flex start

01:05:11.630 --> 01:05:16.290
它会从大家的这个对齐点都是左上角

01:05:16.290 --> 01:05:19.730
大家都是按照这个左上角来进行对齐

01:05:19.730 --> 01:05:25.400
然后如果说改成flex end呢

01:05:25.400 --> 01:05:27.780
会变成这个左下角

01:05:27.780 --> 01:05:30.060
大家会按这个左下角进行对齐

01:05:30.060 --> 01:05:39.670
然后这个如果说改成一个center呢

01:05:39.670 --> 01:05:46.430
大家都会按照这个高度的中间进行对齐

01:05:46.430 --> 01:05:54.060
按照这个scratch呢

01:05:54.060 --> 01:05:56.380
它就会去整个去铺满

01:05:56.380 --> 01:06:01.070
然后你这个也不是整个铺满

01:06:01.070 --> 01:06:03.790
是按照你这个最高的这个元素去铺满

01:06:03.790 --> 01:06:05.610
然后它会把这个

01:06:05.610 --> 01:06:08.870
就我们这个指定了20

01:06:08.870 --> 01:06:10.870
但是也会被覆盖掉

01:06:10.870 --> 01:06:21.520
然后这个又设置了设计了一个BaseLine这个东西

01:06:21.520 --> 01:06:23.960
BaseLine呢

01:06:23.960 --> 01:06:30.940
就是我们可以指定这个文字文字的基线

01:06:30.940 --> 01:06:33.080
大家这个对这个概念有理解吗

01:06:33.080 --> 01:06:38.080
就是说这个我们是以文字基线

01:06:38.080 --> 01:06:42.000
一般都是指这个文字这个头的高度

01:06:42.000 --> 01:06:43.860
这个位置

01:06:43.860 --> 01:06:47.000
我们把这个叫BaseLine

01:06:47.000 --> 01:06:52.150
会以这个来进行一个对齐

01:06:52.150 --> 01:07:07.490
这块就不过多展示了

01:07:07.490 --> 01:07:08.730
我们追一下进度

01:07:08.730 --> 01:07:11.630
这个也是一样

01:07:11.630 --> 01:07:18.140
这个是按照这个内容进行一个对齐

01:07:18.140 --> 01:07:31.640
那就是说这个square是一个默认值

01:07:31.640 --> 01:07:34.000
然后呢

01:07:34.000 --> 01:07:36.200
他这个会把这个

01:07:36.200 --> 01:07:37.780
把这个atm呢

01:07:37.780 --> 01:07:41.220
进行一个横向的一个那个平坡

01:07:41.220 --> 01:07:48.210
然后呢

01:07:48.210 --> 01:07:54.210
它会从star这个位置

01:07:54.210 --> 01:08:02.370
它这个star是横向跟纵向的一个交叉轴

01:08:02.370 --> 01:08:03.770
其实就是这个位置

01:08:05.330 --> 01:08:11.100
去进行一个对齐

01:08:11.100 --> 01:08:14.890
这个就是反过来了

01:08:14.890 --> 01:08:15.570
这也是一样

01:08:15.570 --> 01:08:23.570
就是说我们会有一个空间

01:08:23.570 --> 01:08:48.460
这个around也会增加一个上下的一个空间

01:08:48.460 --> 01:08:55.360
这个是涉及一个子元素的一个元素的排序,

01:08:55.360 --> 01:08:57.360
这会有一个order,

01:08:57.360 --> 01:09:06.320
比如说我们一开始可能是这个atm在我们这个书写里面可能是第一个元素,

01:09:06.320 --> 01:09:08.640
就是比如说这个是第一个元素,

01:09:08.640 --> 01:09:09.320
它是1,

01:09:10.340 --> 01:09:12.400
这是我们先写了它,

01:09:12.400 --> 01:09:14.180
然后再写了这个atm2,

01:09:14.180 --> 01:09:15.200
再写了atm3,

01:09:16.280 --> 01:09:17.600
然后再写atm4,

01:09:17.600 --> 01:09:20.780
atm5,

01:09:20.780 --> 01:09:21.800
通过这个呢,

01:09:21.800 --> 01:09:23.920
通过这个atmorder呢,

01:09:23.920 --> 01:09:27.760
我们可以对这个呃元素去进行排序

01:09:27.760 --> 01:09:31.900
也就是说不按我们的书写书写那个顺序去展示

01:09:32.920 --> 01:09:34.640
比如说这个是可能是我们写的

01:09:34.640 --> 01:09:35.680
这是iTM1

01:09:35.680 --> 01:09:37.180
他是先写下来的

01:09:37.180 --> 01:09:38.760
这是iTM2

01:09:38.780 --> 01:09:40.780
这刚才是iTM3

01:09:40.780 --> 01:09:42.460
这三个是被先写下来

01:09:42.460 --> 01:09:43.540
这是iTM4

01:09:43.540 --> 01:09:45.720
但是我们给他不同的order呢

01:09:45.720 --> 01:09:47.260
根据这个order的权重

01:09:47.260 --> 01:09:48.540
他越他越小呢

01:09:48.540 --> 01:09:49.920
他会排的越靠前

01:09:49.920 --> 01:09:53.760
那这个item3就跑到第一个去了

01:09:53.760 --> 01:09:56.380
item4可能就跑到第二

01:09:56.380 --> 01:09:59.720
然后分析下来就是一和二

01:09:59.720 --> 01:10:11.630
这个主要就是分配我们那个在主轴里面占空间的一个权重

01:10:11.630 --> 01:10:16.430
这个也是一样

01:10:16.430 --> 01:10:20.990
我们就是主轴里面会有三个item

01:10:20.990 --> 01:10:22.290
然后呢

01:10:22.290 --> 01:10:24.950
分配权重之后呢

01:10:24.950 --> 01:10:32.110
我们可以给他设置一个空间占用的一个比例

01:10:32.110 --> 01:10:35.090
我们可以看后面的这个例子

01:10:35.090 --> 01:10:40.770
如果说我们这个flex group都是一呢

01:10:40.770 --> 01:10:43.830
就是大家当然当然权重都是一样的

01:10:43.830 --> 01:10:46.970
大家会自然平均去分配的空间

01:10:46.970 --> 01:10:51.050
如果说这个变成二呢

01:10:51.050 --> 01:10:52.270
他的权重就高了

01:10:52.270 --> 01:10:54.970
那我们这个

01:10:54.970 --> 01:10:57.370
它占的这个空间

01:10:57.370 --> 01:10:58.690
也就大了

01:10:58.690 --> 01:11:00.590
它这个分配的这个

01:11:00.590 --> 01:11:02.090
规则呢

01:11:02.090 --> 01:11:03.650
你可以这样去算

01:11:03.650 --> 01:11:05.310
就是说我们现在

01:11:05.310 --> 01:11:07.330
这个flex

01:11:07.330 --> 01:11:08.490
是2

01:11:08.490 --> 01:11:11.050
它就是这个1的两倍

01:11:11.050 --> 01:11:13.130
可以去这么算

01:11:13.130 --> 01:11:15.430
然后我们也可以设成3

01:11:15.430 --> 01:11:17.850
如果说这两个是1

01:11:17.850 --> 01:11:20.470
那它就是它们两个的三倍

01:11:20.470 --> 01:11:23.550
但是如果出现情况

01:11:23.550 --> 01:11:24.430
比如说这个是1

01:11:24.430 --> 01:11:25.910
这个是3

01:11:25.910 --> 01:11:27.730
这个是2呢

01:11:27.730 --> 01:11:30.690
这个空间就会变成

01:11:30.690 --> 01:11:33.330
它是1的3倍

01:11:33.330 --> 01:11:35.210
它是1的2倍

01:11:35.210 --> 01:11:36.890
这样去分配

01:11:36.890 --> 01:11:42.570
这个也是一样

01:11:42.570 --> 01:11:43.770
这个shrink呢

01:11:43.770 --> 01:11:45.470
就是刚才我们谷入是

01:11:45.470 --> 01:11:48.910
那个增加空间宽度的一个方式

01:11:48.910 --> 01:11:50.750
shrink呢就是缩小

01:11:50.750 --> 01:11:53.230
怎么样去缩小

01:11:53.230 --> 01:11:56.810
默认为一呢

01:11:56.810 --> 01:11:59.970
就是告诉他我们这个可以被缩小

01:11:59.970 --> 01:12:03.250
按照一比一的比例去缩小

01:12:03.250 --> 01:12:05.150
如果说我们不想让他缩小

01:12:05.150 --> 01:12:07.350
然后我们可以把这个设置成零

01:12:07.350 --> 01:12:12.020
那这个就是大家都是一了

01:12:12.020 --> 01:12:14.380
那都都都不缩小呗

01:12:14.380 --> 01:12:19.960
你看如果说这个设置成为零

01:12:19.960 --> 01:12:22.020
他意思就是告诉浏览器

01:12:22.020 --> 01:12:23.340
这个空间不足的时候

01:12:23.340 --> 01:12:25.520
不要把我进行缩小

01:12:25.520 --> 01:12:27.360
所以大家看

01:12:27.360 --> 01:12:30.420
其他三个都被压缩了

01:12:30.420 --> 01:12:32.340
就这个没有没有被压缩

01:12:32.340 --> 01:12:39.600
这个呢

01:12:39.600 --> 01:12:41.500
就是也是一个语法堂了

01:12:41.500 --> 01:12:42.120
就是告诉

01:12:42.120 --> 01:12:43.740
呃

01:12:43.740 --> 01:12:47.740
不用写这些三行这个配置

01:12:47.740 --> 01:12:50.780
只需要这一行可以设置三个值

01:12:50.780 --> 01:12:53.240
去设置这这

01:12:53.240 --> 01:12:55.200
这前面的group

01:12:55.200 --> 01:12:56.340
shrink和base

01:12:56.340 --> 01:12:59.980
这个

01:12:59.980 --> 01:13:05.040
刚才讲的是那个整个空间内的一个分配模式

01:13:05.040 --> 01:13:22.040
现在就是说,既然有空间了,我们就是说怎么样去对自己去做一个调整,就是Item本身,它实际上也是有三种方式了,这个跟那个前面JusticeContent是一样的,

01:13:22.040 --> 01:13:27.540
你看大家比如说这个是那个我们很熟悉那个设置是star嘛

01:13:27.540 --> 01:13:30.430
然后呢

01:13:30.430 --> 01:13:37.570
我们就是把这个3设置设置成一个flex end

01:13:37.570 --> 01:13:40.490
那它会独自的去跑到下面去

01:13:40.490 --> 01:13:41.530
如果说我们不设置

01:13:41.530 --> 01:13:43.630
它应该是也是一个flex star

01:13:43.630 --> 01:13:51.100
是在最点上的

01:13:51.100 --> 01:13:51.760
嗯

01:13:51.760 --> 01:13:53.480
这是flex

01:13:53.480 --> 01:13:56.960
我们先讲这么多

01:13:56.960 --> 01:13:59.520
后续我们在实践中

01:13:59.520 --> 01:14:01.100
我们可以再尝试一下

01:14:01.100 --> 01:14:04.700
响应式

01:14:04.700 --> 01:14:08.130
下一个就是说

01:14:08.130 --> 01:14:09.930
响应式这个东西

01:14:09.930 --> 01:14:11.810
我刚才跟大家解释过了

01:14:11.810 --> 01:14:15.090
就是WAP网站和我们现在的常用的网站

01:14:15.090 --> 01:14:17.430
一个差别

01:14:17.430 --> 01:14:20.970
现在我们就是现在网站设计

01:14:20.970 --> 01:14:22.910
我们就不用这个WAP这种模式了

01:14:22.910 --> 01:14:24.710
就用响应式了

01:14:24.710 --> 01:14:27.710
这是一个效果

01:14:27.710 --> 01:14:31.790
大家看这个我们用这个MIDI screen这个标签

01:14:31.790 --> 01:14:39.690
去匹配最小宽度为1024px的一个屏幕尺寸

01:14:39.690 --> 01:14:41.710
如果匹配到了呢

01:14:41.710 --> 01:14:46.530
这个网站就会是一个桌面网站的一个样式

01:14:46.530 --> 01:14:51.960
然后呢这个条呢就是说我们会匹配这个768

01:14:51.960 --> 01:14:54.420
最小768一个像素

01:14:54.420 --> 01:14:58.760
最大1023像素一个屏幕尺寸

01:14:58.760 --> 01:15:00.300
匹配成功呢

01:15:00.300 --> 01:15:01.660
它就会变成一个

01:15:01.660 --> 01:15:03.860
那个iPad

01:15:03.860 --> 01:15:05.600
一个Pi的那个尺寸

01:15:05.600 --> 01:15:08.180
一个平板电脑一个尺寸

01:15:08.180 --> 01:15:09.660
如果说呢

01:15:09.660 --> 01:15:11.080
我们再匹配这个

01:15:11.080 --> 01:15:12.400
如果说它最大呢

01:15:12.400 --> 01:15:13.480
只有767

01:15:13.480 --> 01:15:16.480
就不到767这个尺寸呢

01:15:16.480 --> 01:15:18.120
我们会展示一个

01:15:18.120 --> 01:15:19.940
手机的一个尺寸

01:15:19.940 --> 01:15:22.850
这就是这个

01:15:22.850 --> 01:15:25.810
这个那个

01:15:25.810 --> 01:15:29.170
响应式的一个东西

01:15:29.170 --> 01:16:11.120
嗯,下面呢,我们需要打开这个,打开一个那个案例,打开这个桌面,这个一个example,这个目录,这有一个第一,这个东西,大家打开这个visual studio code,可以从这个机箱都有装好了,应该是在菜单里面这样,就这个东西,能找到吗?

01:16:11.120 --> 01:16:13.180
打开它

01:16:13.180 --> 01:16:19.790
然后OK

01:16:19.790 --> 01:16:20.830
然后呢

01:16:20.830 --> 01:16:21.750
打开之后呢

01:16:21.750 --> 01:16:25.630
我们打开这个项目

01:16:25.630 --> 01:16:26.510
Open Flutter

01:16:26.510 --> 01:16:31.780
然后找到刚才桌面

01:16:31.780 --> 01:16:33.020
这个example

01:16:33.020 --> 01:16:33.700
这个第一

01:16:33.700 --> 01:16:38.740
我们选择它

01:16:38.740 --> 01:17:10.410
然后我们点这个index.html

01:17:10.410 --> 01:17:14.050
我先跟大家说一下

01:17:14.050 --> 01:17:15.230
这个VSource Studio Code

01:17:15.230 --> 01:17:16.590
现在呢

01:17:16.590 --> 01:17:18.170
就是VSource Studio Code

01:17:18.170 --> 01:17:22.210
是一个比较流行的

01:17:22.210 --> 01:17:25.730
惯用的一个网站

01:17:25.730 --> 01:17:27.030
不光是网站了

01:17:27.030 --> 01:17:30.870
变成开发工具编辑器

01:17:30.870 --> 01:17:35.590
现在大家都比较用这个比较多了

01:17:35.590 --> 01:17:40.530
其他的像还有像是Costa

01:17:40.530 --> 01:17:43.850
像一些其他的编辑器都可以

01:17:43.850 --> 01:17:45.990
现在这个是比较流行了

01:17:45.990 --> 01:17:48.290
大家可以先从这个入手

01:17:48.290 --> 01:17:53.070
因为这个支持的项目比较多

01:17:53.070 --> 01:17:56.710
支持的语言比较多

01:17:56.710 --> 01:18:01.370
这个然后我们再回到这个来

01:18:01.370 --> 01:18:03.990
回到这个来

01:18:03.990 --> 01:18:04.950
然后playground

01:18:04.950 --> 01:18:10.250
这个网址大家有吗

01:18:10.250 --> 01:18:32.280
直接给你们打开吧

01:18:32.280 --> 01:19:44.830
好的

01:19:44.830 --> 01:19:47.210
好

01:19:47.210 --> 01:19:49.670
那大家先休息一下

01:19:49.670 --> 01:19:51.410
然后把这个给大家打开它

01:19:51.410 --> 01:24:49.330
这个是这三天的餐券

01:24:49.330 --> 01:24:50.290
哦好谢谢

01:24:50.290 --> 01:24:57.240
你们听着压力大不大

01:24:57.240 --> 01:24:58.420
是不是速度有点快

01:24:58.420 --> 01:25:01.340
是吧

01:25:01.340 --> 01:25:04.260
啊那就好

01:25:04.260 --> 01:25:07.300
因为他这个东西有点多啊

01:25:07.300 --> 01:25:08.100
时间没有

01:25:08.100 --> 01:25:13.340
对

01:25:13.340 --> 01:25:14.480
这个

01:25:14.480 --> 01:25:17.040
其实还是刚才那些东西

01:25:17.040 --> 01:25:18.460
就是这个东西

01:25:18.460 --> 01:25:19.960
对

01:25:19.960 --> 01:25:21.520
你看着可能内容比较多

01:25:21.520 --> 01:25:24.440
他就突然感觉压力比较大

01:25:24.440 --> 01:28:34.750
那位同学

01:28:34.750 --> 01:28:38.460
行

01:28:38.460 --> 01:28:41.830
那么就继续吧

01:28:41.830 --> 01:28:44.670
大家打开这个VS Code

01:28:44.670 --> 01:28:50.330
这是今天第一课的一个完整的一个联系题

01:28:50.330 --> 01:28:52.530
对

01:28:52.530 --> 01:28:54.210
这是一个完整项目

01:28:54.210 --> 01:28:57.050
包括了前端跟后端两部分

01:28:57.050 --> 01:29:00.390
然后最终的一个效果

01:29:00.390 --> 01:29:03.650
我给我已经给大家在电脑上打开了

01:29:03.650 --> 01:29:05.350
就是这个

01:29:05.350 --> 01:29:08.410
最终效果就是这个样子

01:29:08.410 --> 01:29:13.150
是一个生产数据管理系统的一个上报

01:29:13.150 --> 01:29:13.950
一个表单

01:29:13.950 --> 01:29:16.640
用户呢

01:29:16.640 --> 01:29:18.300
可以选择一个日期

01:29:18.300 --> 01:29:19.560
生产的日期

01:29:19.560 --> 01:29:21.120
然后选择一个产品例型

01:29:21.120 --> 01:29:22.520
然后呢

01:29:22.520 --> 01:29:23.760
选择一个产量

01:29:23.760 --> 01:29:26.680
然后选择一个生产状态

01:29:26.680 --> 01:29:28.200
然后呢

01:29:28.200 --> 01:29:28.900
提交数据

01:29:30.580 --> 01:29:31.620
这边呢

01:29:31.620 --> 01:29:34.740
就会列出来相应的一个数据

01:29:34.740 --> 01:29:37.480
这个因为服务器没启动

01:29:37.480 --> 01:29:39.180
现在显示一个错误

01:29:39.180 --> 01:29:41.620
这个是下午的内容

01:29:41.620 --> 01:29:44.220
所以说上午我们先不涉及到这

01:29:44.220 --> 01:29:52.020
然后大家看

01:29:52.020 --> 01:30:01.630
这是项目里面大家看是有很多文件

01:30:01.630 --> 01:30:05.430
这个上来大家一看可能就比较头疼

01:30:05.430 --> 01:30:07.110
但是呢

01:30:07.110 --> 01:30:08.190
归结起来呢

01:30:08.190 --> 01:30:10.150
还是这三部分

01:30:10.150 --> 01:30:12.670
就是拿出来之后

01:30:12.670 --> 01:30:14.810
从项目里面把它提炼出来之后呢

01:30:14.810 --> 01:30:16.790
就是HTML CSS

01:30:16.790 --> 01:30:18.750
JS这三部分

01:30:18.750 --> 01:30:22.370
最终展示效果呢

01:30:22.370 --> 01:30:30.830
就是像这样的

01:30:30.830 --> 01:30:33.050
大家可以就是在这个

01:30:33.050 --> 01:30:35.530
本地这个目录啊

01:30:35.530 --> 01:30:37.510
找到这个index

01:30:37.510 --> 01:30:39.450
D1

01:30:39.450 --> 01:30:41.070
然后index直接双击

01:30:41.070 --> 01:30:42.410
双击这个文件

01:30:42.410 --> 01:30:50.230
双击这个文件就可以直接在浏览器里面

01:30:50.230 --> 01:30:58.760
打开这个,我们现在是11点02分

01:30:58.760 --> 01:31:03.160
然后11点半的话会是上午课程结束

01:31:03.160 --> 01:31:04.360
这半个小时呢

01:31:05.360 --> 01:31:07.060
就是大家感受一下

01:31:07.060 --> 01:31:08.760
然后使用这个vscode

01:31:10.560 --> 01:31:11.460
使用这个

01:31:11.460 --> 01:31:12.660
然后我们可以新建一个

01:31:12.660 --> 01:31:18.560
比如说index2.html

01:31:19.960 --> 01:31:23.860
然后尝试实现这个index

01:31:24.260 --> 01:31:30.120
点HML里面的东西

01:31:30.120 --> 01:31:34.280
这个CSS和这个JS都是写好的

01:31:34.280 --> 01:31:37.020
大家可以尝试调整

01:31:37.020 --> 01:31:39.560
主要去调整这个index里面的一些东西

01:31:39.560 --> 01:31:43.800
看看符不符合自己预期

01:31:43.800 --> 01:31:47.220
然后去感受一下这个相关的一些内容

01:31:49.140 --> 01:31:49.860
然后呢

01:31:49.860 --> 01:31:57.240
比如说我们你想看这个修改结果可以直接就是在这个浏览器里面

01:31:57.240 --> 01:31:58.640
打开这个index的2

01:31:59.840 --> 01:32:00.740
直接双击它

01:32:01.540 --> 01:32:04.440
然后改完之后保存一下刷新就能看到结果

01:32:18.960 --> 01:32:21.160
我先带着大家稍微过一下

01:32:22.160 --> 01:32:23.360
稍微过一下这个代码

01:32:25.490 --> 01:32:26.590
然后呢就是

01:32:27.290 --> 01:32:27.890
这个

01:32:29.690 --> 01:32:31.690
跟我们那个说的是一样的

01:32:31.690 --> 01:32:33.790
然后我们先有一个header

01:32:33.790 --> 01:32:36.290
header里面定义了一些相关的一些属性

01:32:36.290 --> 01:32:37.290
提供给浏览器

01:32:38.090 --> 01:32:39.290
啊然后呢

01:32:39.290 --> 01:32:42.890
然后我们就定义了一个container

01:32:42.890 --> 01:32:44.790
这container呢

01:32:44.790 --> 01:32:51.700
就是那个我们刚才的一个flex的container

01:32:51.700 --> 01:33:02.740
大家看这边实际上container是我们定义了一个flex

01:33:02.740 --> 01:33:04.740
然后告诉他我们要纵向排列

01:33:04.740 --> 01:33:09.680
然后他的他的那个最大宽度是1200等等一些信息

01:33:09.680 --> 01:33:14.760
然后呢

01:33:14.760 --> 01:33:16.860
我们就给他定义了一个header

01:33:16.860 --> 01:33:18.820
一个这个表头

01:33:18.820 --> 01:33:22.620
表头就是这个了

01:33:22.620 --> 01:33:25.680
会展示这个生产数据管理系统

01:33:25.680 --> 01:33:28.440
然后一个描述

01:33:28.440 --> 01:33:36.960
然后下面就是主要的一个表单

01:33:36.960 --> 01:33:44.410
主要表单

01:33:44.410 --> 01:33:46.310
你看我们告诉他这个flags1

01:33:46.310 --> 01:33:49.150
刚才按照我们flags那边学的内容

01:33:49.150 --> 01:33:54.070
就是说他就是会把整个这个flags1

01:33:54.070 --> 01:33:56.430
它实际上等于flags group1

01:33:56.430 --> 01:33:58.470
会把整个空间占顶

01:33:58.470 --> 01:34:03.590
因为它是只有这一个元素

01:34:03.590 --> 01:34:07.020
container里面只有他自己

01:34:07.020 --> 01:34:10.780
然后他就会把这个整个空间占掉

01:34:10.780 --> 01:34:12.680
这个header会被他顶上去

01:34:12.680 --> 01:34:16.060
然后就会达到我们这样一个预期效果

01:34:16.060 --> 01:34:18.200
就是他会被顶上去

01:34:18.200 --> 01:34:21.920
然后这是一个footer

01:34:21.920 --> 01:34:23.620
然后就会被挤下来

01:34:23.620 --> 01:34:26.340
然后他会把上一个空间勾入1

01:34:26.340 --> 01:34:27.600
就是全部占掉

01:34:27.600 --> 01:34:33.620
就会达成这么一个效果

01:34:33.620 --> 01:34:36.340
然后里面呢就提供了两个section

01:34:36.340 --> 01:34:41.920
这个section的标签就是

01:34:41.920 --> 01:34:45.600
MAN和section都是HTML5里面的标签

01:34:45.600 --> 01:34:49.200
它实际上本质上和DIV是一样的

01:34:49.200 --> 01:34:50.360
但是DIV呢

01:34:50.360 --> 01:34:52.140
就是太通用了

01:34:52.140 --> 01:34:54.900
这个也是告诉浏览器

01:34:54.900 --> 01:34:56.380
你可以这么理解

01:34:56.380 --> 01:34:59.340
DIV是一个非常基础的一个

01:34:59.340 --> 01:35:02.000
基础组件

01:35:02.000 --> 01:35:03.220
MAN呢

01:35:03.220 --> 01:35:04.900
可能就是一个别名

01:35:04.900 --> 01:35:05.760
DIV的别名

01:35:05.760 --> 01:35:07.520
它的主要存在目的就是

01:35:07.520 --> 01:35:08.660
告诉浏览器

01:35:08.660 --> 01:35:11.200
我是在DIV之上

01:35:11.200 --> 01:35:17.980
这个section和man的意思是一样的

01:35:17.980 --> 01:35:18.620
他呢就是

01:35:18.620 --> 01:35:20.600
也是就是说

01:35:20.600 --> 01:35:23.200
我是在那个man之上

01:35:23.200 --> 01:35:26.340
他会被一个属于一个层级关系

01:35:26.340 --> 01:35:28.480
属于一个人为的层级关系

01:35:28.480 --> 01:35:30.920
但是在浏览器的视角来看

01:35:30.920 --> 01:35:33.880
他们和DIV是一样的

01:35:33.880 --> 01:35:35.500
他这个存在目的就是说

01:35:35.500 --> 01:35:38.700
让我们这个程序员去阅读的时候

01:35:38.700 --> 01:35:42.100
去知道这个DIV是最上层

01:35:42.100 --> 01:35:44.120
然后更高一层是man

01:35:44.120 --> 01:35:46.640
然后再下一层是section

01:35:46.640 --> 01:35:49.140
这主要是为了方便程序员去理解

01:35:49.140 --> 01:35:52.160
其实我们如果全改成div也没什么

01:35:52.160 --> 01:35:53.520
也没什么关系

01:35:53.520 --> 01:35:54.840
也是可以的

01:35:54.840 --> 01:35:57.510
然后呢

01:35:57.510 --> 01:36:00.290
下面就是我们就定义了一些元素了

01:36:00.290 --> 01:36:01.890
最关键就是这个form

01:36:01.890 --> 01:36:06.210
这个form就是一个表单了

01:36:06.210 --> 01:36:09.110
这个只要看见这个关键词

01:36:09.110 --> 01:36:13.590
就是意思就是我们下一步要与服务器进行交互了

01:36:13.590 --> 01:36:20.470
然后form里面就是我们表单会有什么元素呢

01:36:20.470 --> 01:36:27.310
就是我刚才进门的时候就填了一个那个访客访客里面的访问表

01:36:27.310 --> 01:36:29.150
然后那其实就是一个form

01:36:29.150 --> 01:36:31.390
上面有一些比如说姓名啊

01:36:31.390 --> 01:36:32.010
年月日啊

01:36:32.010 --> 01:36:32.510
这些东西

01:36:32.510 --> 01:36:34.870
我们呢

01:36:34.870 --> 01:36:36.590
这个证明叫form呢

01:36:36.590 --> 01:36:39.010
其实就是一个电子的这个访问表

01:36:39.010 --> 01:36:41.550
会提供一些输入的元素

01:36:41.550 --> 01:36:43.970
比如说日期选择啊

01:36:43.970 --> 01:36:45.650
然后有下拉框啊

01:36:45.650 --> 01:36:48.710
可以选你的访问目的啊

01:36:48.710 --> 01:36:50.570
然后几个人啊

01:36:50.570 --> 01:36:51.710
然后几点走啊

01:36:51.710 --> 01:36:52.210
这些

01:36:53.450 --> 01:36:55.130
我们可以定义一些这些元素

01:36:58.490 --> 01:37:00.830
这些都是常用的那个HTML元素

01:37:03.170 --> 01:37:04.910
然后这个form就结束了

01:37:06.170 --> 01:37:07.430
然后下一个section呢

01:37:07.430 --> 01:37:08.090
就是说

01:37:09.110 --> 01:37:11.630
我们提交了就要有地方显示嘛

01:37:11.630 --> 01:37:13.370
然后就是下面这边

01:37:13.370 --> 01:37:19.550
这边是一个一个我们称之为推广就是一个列一个表表了

01:37:19.550 --> 01:37:21.250
他会有表头

01:37:21.250 --> 01:37:22.050
现在没有内容

01:37:22.050 --> 01:37:22.990
如果有内容的话

01:37:22.990 --> 01:37:24.590
还有一行一行呢

01:37:24.590 --> 01:37:25.370
那个

01:37:26.830 --> 01:37:32.270
内容像一个再一样

01:37:32.270 --> 01:37:35.030
我们你看我们这边就定义了个推广

01:37:35.030 --> 01:37:38.210
然后浏览器看到这儿就知道我们有一个推广了

01:37:38.210 --> 01:37:40.250
下面肯定会有一个表头

01:37:41.390 --> 01:37:43.070
当然你也可不写表头

01:37:43.070 --> 01:37:45.250
但是一般都是会有表头

01:37:45.250 --> 01:37:49.210
然后会有一个body

01:37:49.210 --> 01:37:50.410
现在是没有数据

01:37:50.410 --> 01:37:52.870
有数据会用JS去填充

01:37:52.870 --> 01:37:56.650
然后这边就是一个那个尖尾的一个footer

01:37:57.910 --> 01:37:58.630
就是夜景了

01:38:00.070 --> 01:38:06.970
然后后面这些语句就是引入相应的JS代码

01:38:06.970 --> 01:38:11.340
然后有一个点

01:38:11.340 --> 01:38:12.600
这个我们下午再说吧

01:38:12.600 --> 01:38:15.300
会跟服务器联动的时候再说

01:38:15.300 --> 01:38:17.580
然后我们剩下时间呢

01:38:17.580 --> 01:38:25.100
在HTML2里面去可以拷贝或者说编辑

01:38:25.100 --> 01:38:28.780
这个index.html去感受一下

01:38:28.780 --> 01:38:33.970
我们这个HTML的一个运作运作原理

01:38:33.970 --> 01:38:38.460
这个有问题也可以随便提

01:38:38.460 --> 01:38:39.600
及时提

01:38:39.600 --> 01:38:42.900
尽量跟大家去解决这个疑惑

01:38:42.900 --> 01:41:02.930
因为下午要用

01:41:02.930 --> 01:41:05.630
改换了回标签

01:41:05.630 --> 01:48:11.110
刚才有同学问了一下

01:48:11.110 --> 01:48:13.350
这个Label是做什么用的

01:48:13.350 --> 01:48:17.760
我们看见这里有个Label4

01:48:17.760 --> 01:48:19.120
这个Product

01:48:19.120 --> 01:48:22.620
它这个就是说告诉浏览器

01:48:22.620 --> 01:48:23.820
我这个Label

01:48:23.820 --> 01:48:25.260
Label顾名思义是个标签

01:48:25.260 --> 01:48:27.660
它展示出来就是一行文字

01:48:27.660 --> 01:48:29.080
就是产品名称

01:48:29.080 --> 01:48:34.820
比如说这个产品名称就是它

01:48:34.820 --> 01:48:35.680
这就是一个Label

01:48:35.680 --> 01:48:37.600
然后呢

01:48:37.600 --> 01:48:39.000
比较困惑的就是说

01:48:39.000 --> 01:48:40.180
这个为什么有个fall

01:48:40.180 --> 01:48:40.920
这个fall是干什么

01:48:40.920 --> 01:48:42.980
它这个fall就是告诉浏览器

01:48:42.980 --> 01:48:47.060
我这个产品名称要与下面这个product去绑定

01:48:47.060 --> 01:48:49.000
你看它是fall product

01:48:49.000 --> 01:48:51.620
它这边select的id呢

01:48:51.620 --> 01:48:52.500
也是product

01:48:52.500 --> 01:48:55.000
它的意思就是说

01:48:55.000 --> 01:48:56.700
label跟这个绑定

01:48:56.700 --> 01:48:58.580
绑定之后呢

01:48:58.580 --> 01:48:59.560
干什么呢

01:48:59.560 --> 01:49:02.680
比如说我用户我点击这个产品名称

01:49:02.680 --> 01:49:08.660
这个吧

01:49:08.660 --> 01:49:10.820
这个地方你看他也会聚焦

01:49:11.960 --> 01:49:14.460
应该比如说我现在把焦点切到这

01:49:14.560 --> 01:49:16.360
现在焦点是在生产日期上

01:49:16.720 --> 01:49:19.200
如果说我们要输入那个产品数量呢

01:49:19.200 --> 01:49:20.720
我们一般都是点到这

01:49:20.720 --> 01:49:21.560
然后开始输

01:49:23.160 --> 01:49:24.600
然后我再把他移到这

01:49:24.960 --> 01:49:27.460
然后我点这个产链是不是也过来了

01:49:28.720 --> 01:49:29.660
这意思就是说

01:49:30.200 --> 01:49:30.800
这个 label

01:49:30.800 --> 01:49:32.360
这 fall 的作用就是说

01:49:32.600 --> 01:49:34.760
与他对应的这个 id 的这个元素

01:49:34.760 --> 01:49:35.560
进行绑定

01:49:35.560 --> 01:49:39.160
你也可以点比如产品名称点一下

01:49:39.160 --> 01:49:42.760
然后你看我用我现在用键盘操作

01:49:42.760 --> 01:49:44.760
它这个产品也是在变对吧

01:49:44.760 --> 01:49:48.560
它其实就是绑定之后用户点击就可以聚焦

01:49:48.560 --> 01:49:52.560
不用不需要非要点到那个元素上就是干这个用

01:49:52.560 --> 01:49:54.360
不用放也可以

01:49:54.360 --> 01:49:56.360
只不过用户点了就没反应就是了

01:49:56.360 --> 01:50:02.480
另一个也是跟程序员说一下

01:50:02.480 --> 01:50:05.280
就是因为我们一般都是一个项目

01:50:05.280 --> 01:50:06.680
都是好几个程序员

01:50:06.680 --> 01:50:08.600
让大家一起工作嘛

01:50:08.600 --> 01:50:11.680
也是跟其他的肯定有一个team leader

01:50:11.680 --> 01:50:14.720
就是项目主管或者说呃

01:50:14.720 --> 01:50:17.520
组成这种角色在做那个code review

01:50:17.520 --> 01:50:18.320
就代码审查

01:50:19.560 --> 01:50:23.920
这个时候就是就是让阅读这个代码的人很容易知道啊

01:50:23.920 --> 01:50:26.320
这个label是给下面这个input用的

01:50:27.520 --> 01:50:35.690
他们俩是一对

01:50:35.690 --> 01:50:38.770
那我们暂时先这样

01:50:38.770 --> 01:50:41.530
然后后再跟大家说一下这个

01:50:41.530 --> 01:51:07.800
响应式,这边还有个例子,大家可以打开这个,同样是D1,这个下面还有一个MIDI,就是这个MIDI.html,就在index下面,大家直接双击使用浏览器打开就行了,这是一个那个响应式的一个例子,

01:51:07.800 --> 01:51:15.360
大家看现在就是我这是一个笔记本的一个那个分辨率屏幕的分辨率啊

01:51:15.360 --> 01:51:18.300
他就会按照左右两排这样去排列

01:51:18.300 --> 01:51:22.560
如果说我现在变成一个手机去访问呢

01:51:22.560 --> 01:51:34.120
大家看这个屏幕的可视区域已经被压缩了

01:51:34.120 --> 01:51:34.680
对吧

01:51:34.680 --> 01:51:37.880
他就会根据那个css呢

01:51:37.880 --> 01:51:39.840
进行一个数

01:51:39.840 --> 01:51:43.020
一开始我们是横向的

01:51:43.020 --> 01:51:45.080
flex direction是入对吧

01:51:45.080 --> 01:51:47.640
现在我们这个屏幕被压缩之后呢

01:51:47.640 --> 01:51:50.280
它的这个排列方式就变成

01:51:50.280 --> 01:51:53.000
Flex Direction变成Column了

01:51:53.000 --> 01:51:55.360
这就是一个想象式的一个作用

01:51:55.360 --> 01:51:57.720
如果说我们现在是手机访问

01:51:57.720 --> 01:51:58.760
就是这种效果

01:51:58.760 --> 01:52:03.820
但是如果说我们把这个屏幕慢慢的放大

01:52:03.820 --> 01:52:07.460
那它又变成一个PC的一个

01:52:07.460 --> 01:52:09.940
一个效果

01:52:09.940 --> 01:52:11.860
它的这个

01:52:11.860 --> 01:52:16.510
我们可以看它这个

01:52:16.510 --> 01:52:22.550
样式表这大家看这边有一个这个

01:52:22.550 --> 01:52:23.330
media标签

01:52:23.330 --> 01:52:26.440
它是怎么实现的

01:52:26.440 --> 01:52:28.420
就是通过这个media标签来实现

01:52:28.420 --> 01:52:32.160
你看这个media标签告诉了这个浏览器

01:52:32.160 --> 01:52:34.640
它的最小宽度是1024的时候

01:52:34.640 --> 01:52:37.360
我们要进行水水平的排列

01:52:37.360 --> 01:52:39.640
然后呢

01:52:39.640 --> 01:52:42.960
如果说这个小于1024了

01:52:42.960 --> 01:52:46.880
我们就就是把它改成那个取消

01:52:46.880 --> 01:52:48.540
因为它默认

01:52:48.540 --> 01:52:49.840
默认就是column

01:52:49.840 --> 01:52:52.200
我们只要把这个删掉

01:52:52.200 --> 01:52:53.300
在这里面不存在

01:52:53.300 --> 01:52:55.440
那它就会变成一个

01:52:55.440 --> 01:52:57.420
纵向排列

01:52:57.420 --> 01:53:01.500
这就是显示相关的一个应用

01:53:01.500 --> 01:53:06.160
那最后五分钟

01:53:06.160 --> 01:53:10.260
那个我们先进行一个上午的一个总结答疑吧

01:53:10.260 --> 01:53:13.020
然后上午我们就是过了一下

01:53:13.020 --> 01:53:16.780
这个基础的一些HTML的元素啊

01:53:16.780 --> 01:53:21.000
然后CSS跟这个HTML的写法

01:53:21.000 --> 01:53:23.620
然后讲了一下flex相关的一些内容

01:53:23.620 --> 01:53:27.060
大家对这方面有什么问题

01:53:27.060 --> 01:53:30.860
或者有什么延伸的知识点想知道的

01:53:30.860 --> 01:53:31.820
可以提一下

01:53:31.820 --> 01:53:33.700
我们来讨论一下

01:53:33.700 --> 01:53:44.160
没有吗

01:53:44.160 --> 01:53:52.080
要是大家都没问题的话

01:53:52.080 --> 01:53:58.200
那大家可以继续看一下这个media跟这个index相关内容

01:53:58.200 --> 01:53:59.380
大家可以了解一下

01:53:59.380 --> 01:54:05.180
下午我们就利用这个index来实现一个

01:54:05.180 --> 01:54:07.100
表达案的提交