qrc 文件怎么获取 css

好，下面我们继续讲解第五个知识点，就是在 sm 二这个文件中如何引入 css 样式， 我们对于这个样式啊，样式表进行一个相关的分类，我们分出了三种，第一种的话叫做一个内部样式表，样式表啊， 一个，然后的话第二个我们叫做一个力不强势兵，第三个 我们要做一个外部样式表，外部样式表，那具体行列样式表，内部样式表和外部样式表是什么意思呢？啊？什么意思呢？下面我们对他做一个具体的一个讲解。首先啊，我们先去看一下，第一个 叫做一个行列样式表，行列样式表，行列样式表，我们可以使用一个叫做大小属性 属性，我们去引入相关的我们的一个 css 属性， 这样是吧？啊，这样是具体什么意思呢？我跟大家用例子的形式啊，解释说明，就是在一个标签上面使用大小属性，标签上 使用四大属性引入相关的 css 样式。好，回到我们的一个代码当中来， 就在单网一当中啊，单网一当中啊，这是 h 一，下面的话，我们在这个地方写了另外的一个元素，另写另外的一个标签啊，批标签 啊，批标签，我们给这个批标签啊加一些相关内容啊，这是我们的我们的行列钥匙啊，行列钥匙， 既然是行列样式，就在这个某个标签上面，我们使用一个叫做死大有的一个属性啊， 大家一定区分开 p 是一个标签啊，这个地方的 style 表示 p 标签的一个属性，然后我们在这个位置去写相关的 css 啊，写相关的 css， 比如说我要求房的 塞子，自己的大小啊，三十个像素，同时啊，我要求他的一个前景色卡了自己的一个颜色，是一个不漏的蓝色啊，蓝色， ok， 其实大家会发现我写写的这个东西，这就是一个声名，后面写的又是一个声名，声名与声名之间我们用封口隔开，其声跟跟我们在上面写的是一样的啊，写的是一样的，但是我们用的是大要属性，在这个属性里面 这一堆可以理解的是属性的直啊，属性的直，那下面的话，相信啊，大家肯定会说，哎，有没有效果了，那我们一起看一下这个 p 标签，说这是我们的一个行列样式，我们看下这些文字到底起没有起到一个 这个样式啊，有没有起到一定的作用，说这是我们的一个行列样式，那明显可以看到按照我们写的字体颜色变成了个蓝色，同时自己的大小变成一个三十，让大家看起来更清楚，我再加一个额外的这个样式， 叫做一个 fotusiz， fotw 啊， w i， 这是 t a bood 意思，什么意思呢？后面的时候会带着大家一起讲，意思就是说让这个文字加粗啊，加粗，保存 页面当中重新去加载，大家可以发现字体的大小三十个像素，字体的颜色蓝色，同时加速啊，同时加速。好，这就是我们给大家去讲解的第一种啊，就叫做 立副样式，行列样式啊，行列样式，那下面的时间啊，回来我们看第二种啊，第二种行列样式， 行列样式表。说完了之后，我们说一下第二种叫做一个立步的样式表，立步的样式表，那立步样式表又是什么意思呢？只在 同一个页面中，我们去同一个页面中，在害的与杠害的标签之间， it 还有标签来去引入我们的四 s s 样式。 其实这个东西啊，我已经给大家去讲过了啊，就是我们刚才在代码当中写的这一堆代码啊，写的这一堆代码，这就是我们的一个啊，这就是我们的一个叫做 内部样式表啊，内部样式表，那完了之后啊，我们说第三种叫做一个外部样式表，外部样式表，外部样式表， 咬了又什么意思？只需要我们去单独并 一一个后缀，名为点 css 的一个文件 表示是以样式为例。好，那我们一边讲啊，一边给大家去演示。 首先我们说要单独定一个后追尾点 css 的一个文件，那么回到我们的代码当中来，我们在对零一当中右键单击，我们去新建，为了做的更规范，我们创建一个目录，起名为 css， 完了之后在 css 文件夹当中右键单击新建，我们去添加一个文件啊，我们找一下这个地方的话新建的文件吧，起一个名字叫做 style， 点 css 点上一个， ok， 这就是我们的样式 表文件，那我们在这个样式表文件当中，我们去写我们相关的选择器啊，以及属性和属性值。 那为了这个演示的一个需要啊，演示的一个需要，我们在这个我就单独再创建一个文件吧，在第零一当中，右键单击新建，添加一个 htv 二的一个文件，起名为 一个呆萌二，点上一个， ok， 好，大家注意这个题啊，我们可以发现我们有个呆萌二点 htm 二这样的一个网页文件，同时有一个大要点 css， 我给大家画一张图，文字是加 r， 我们把画图工具打开啊，画图工具打开，也就是说我们现在要想干什么事情呢？大家认识听啊，认识听，在这个地方的话，我们一个单元二点还是天元二好，我们有两个， 两个文件，其中啊这个我们给他起一个名字，就叫做一个 这么二点 stm， 再来我们还有另外的一个文件，这个文件就叫做一个在 css 文件，讲下面的一个叫做大药店 css l e 点 css， 大家会发现我们现在我们把这个叫做 s 前面二文件，而把这个 sto 点 css 叫做样式表文件啊， 样式表文件，那他们之间显然是两个不同的文件，他们两个之间并没有任何的关系，那我们要干什么事情呢？啊？我们要干什么事情呢？我们需要在我们的呆萌二点 s t m 二里面去引入四 s 点 css， 让他让这个四 s 点 c s s 对我们的 dm 二点 s t m 二当中的网页 元素进行一个美化啊，进行一个美化，那我们如何啊？我们如何在 dm 二点 s t m 当中引入这个三号点 css 这个文件了？来下面的时间我给大家去演示一下，我们需要在害的与杠害的之间需要一个标签，叫做一个另一个标签， 另一个标签在另一个标标签当中啊，我们先指定他的一个类型为 tix 杠 css， 紧接着完了之后啊，我们需要去指定他这个 r e l 是一个 stelc 啊，四三幺四的表示，我们引入的是一个外部的样式表文件，我再强调一遍， al 等于三幺四， 表示我们引入的是一个外部的样式表文件，那到底你引入的是哪一个文件呢？我们需要去指定他的一个叫做 ix e f 哎，是我们的一个 css 文件夹中，文件夹下面的一个叫做大药店 css y led 点 css 这样的相对路径啊，相对路径，那这样一来的话，我们通过这样的一条语句， 通过这么一条语句啊，也就是一个另一个标签，我们再回到我们的这边来，仓鼠加上一个微，就通过这么一个另一个标签，我们让 m 二点 s t m 二和 sto 点 css 之间形成了一个 手牵手之间的一种关系。记单码二点 s t 码二中，我们去引入了 staray csss， 让 stele 点 css 当中的样式 去美化我们的 dm 二点 s t m 二当中的网页元素。好，大家理解了这个之后，那下面的时间我们需要去把相关的一些东西给大家去加上。首先我们到 d m 二点 s t m 二的这个包底当中，我们去加了两个 p 标签， 这是一个标签，写上一个，好好学习 向上。紧接着我们又来了一个皮标签， 今天 学习 ess 的基本语法和使用。好，那下面的时间我们针对这个皮标签 去倒点 css 里面，我们去写相关的选择器，哪个选择器呢？ p 选择器， 然后去写相关的一些声明，我们同样的道理，包他的塞子字体的大小这一层变得变，让他变小一些。十二个像素啊，十二个像素，同时啊，同时 下面我们让它的一个颜色发了，变成一个 gr 音啊，格瑞变成一个绿色， ctrl 加上一个 s 保存一下，好，回到我们的 dm 二点 htm 二里面，我们在浏览器当中进行一个浏览，观察一下， 大家可以看到，哎，我的两个 p 标签，这是我的两个 p 标签，他的字体的颜色变成了一个绿色，同时字体的大小变成了一个十二像素啊，变成了一个十二像素，那我们回到我们的代码当中啊，我们说两个 p 标签， 同时我们回到我们的一个 css 当中，再去看倒点 css 里面，这是我们设的自己的大小十二像素，自己的一个颜色变成了一个绿色。我们使用了我们外部的样式表当中啊所设置的这个标签选择器里面的这些声明，让我们的这个页面 呈现了啊所所需要的颜色以及自己的一个大小。好啊，这个这就是我们现在带着大家啊所讲解的这个三种 样式表啊，三种样式表分别是行列样式表，内部样式表，还有一个是所谓的一个外部样式表，那我们具体啊，把每一种详细的再给大家去说一下我们的行列样式表是怎么做的呢啊，给大家做一个总结啊。首先在一个标签上面 回到我们的代码当中来，在这个代码一里面啊，代码一里面大家可以看到这地方我们有个批标签，我们在这个批标签当中使用了一个四大要属性，在四大要当属性当中我们设置了相关的一些样式啊，相关的一些样式，那大家会发现一个 问题啊，发现一个问题就是我现在所写的这些样式啊，所写的这些样式他是不能通用的，为什么这样去说呢？我们说他这个样式 只能适用于目前我所写的这个批标签，比如说下面我还有批标签啊，比如说下面我还有批标签，批标签杠批这个地方，上面的样式面的样式 我能用吗？但会发现显然上面所定义的这些样式 对于底下的这个皮标签是不能用的，你要让他能用，我们必须要干什么事情呢？需要把它复制粘贴， 只有这样才能够让上面的这个样式使用下面的皮条钳啊，我们会发现一个问题，就是对于一个 行列样式而言，我们所写的这些样属性啊，所写的这些样式只针对目前的这个标签才能够使用 他的这个整些整个这些代码啊，起不到一个重复啊，重复使用的一个作用啊，重复使用的一个作用， 那这就是我们给大家说的第一个叫做行列样式表，第二个我们所说的一个内部样式表，哎，我们怎么去使用这个内部样式表呢？当然指的是同一个页面当中， 我们在害的与杠害的标签当中去使用一个大小标签来引入 css 样式，编写我们的 css 样式来，我们。

前不久呢，我在工作中接到了一个这样的需求，某一个客户想在他们的下游系统中直接查看资金系统的银行票的票样信息，这就需要后端提供一个接口，下游系统通过票据号来查询出票据文件，然后提供下载。 我只需要用票据信息生成一个静态的 html， 然后用工具把 html 页面转成 pdf 供下游下载即可。 首先呢，打开，小豆同学把这个票据信息复制进去，然后编辑一段口令，主要描述出来我的需求，让小豆同学理解我想要什么。 详细的口令比较长，我就不再赘述了，我直接贴在图里了，你看，小豆同学不用两分钟就直接把代码给我写出来了，而且还可以在线预览。当然呢， ar 生成的代码并不是完美的，有些时候还需要根据自己的需求来进行微调。 比如说，我不需要一些图片中的信息，我可以二次给它输入口令，把不需要的票据正背面 tab、 关闭 tab、 打印按钮等等删掉， 再调整一下头部信息，精简一下 css 样式，整个过程前后也就十分钟，比自己写快多了。经过几次调整，样式明显达到了我想要的效果，而且还可以支持一键下载，打开就可以用。有了这个 html 模板，我只需要把模板和数据绑定即可。 这就是 ai 编程的魅力，它帮我解决了我并不擅长的前端，以及这些烦人的 css 样式，让我们自己更能专注在自己的核心业务能力上，这个效率直接拉满了。如果你也有类似的需求，不妨先问问小豆同学有没有好的实现方法。好了，本期分享就到这里，我们下期再见。我是马拉松程序员，可不止于代码。

上期咱们搞懂了 load 的 核心作用，知道它是 webpack 处理非 js 资源的桥梁。今天直接 教你用 css 杠 load 加 style 杠 load 的 组合，解决 js 里导入 css 打包报错的问题。先讲一个问题，为什么处理 css 需要两个 load 而不是一个？ 答案很简单，单个 load 能力有限，两个 load 分 工合作才能完成 css 的 解析和渲染。 拆分一下它们的职责。一、 css 锚定核心作用是解析 css 模块，它能处理 css 里的 at input 和 url 语法， 把 css 文件转换成 webpack 能识别的 gs 模块，但注意它只负责解析，不会把 css 渲染到页面上，光用它的话，打完后 css 代码藏在 gs 里，页面还是没有样子的 啊咳， style 杠 low 的 咳。核心作用是把 css 注入到页面，它会把打包后的 js 文件里生成一个 style 标签，把 css 杠 low 的 解析后的 css 代码注入插入进去， 然后挂载到 html 的 head 里，这样页面才能显示样式，咳。总结一下， c s s 刚 load 负责读懂 c s s style， 刚 load 负责展示 c s s 两者缺一不可，少了任何一个，要么打包报错，要么页面就没有样式了。 话不多说，分四步。第一步，准备测试文件。先在项目的 s r c 文件夹里新建两个文件， index 点 j s， 这个是入口文件，写一句 导入 index 点 css 的 语法，表示导入 css， 然后再新建一个 index 点 css 样式文件，随便写点样式，比如写一个这个，再在根目录新建 index 点 html， 加一个字行代码，方便看效果。 第二步，安装两个 load， 打开命令行，输入安装命令，命令是这样的， 这里杠杠 server 杠 dv 还是表示安装到开发依赖，因为只有打包时需要它们，生产环境不需要。 第三步，配置 webpack 点 config 点 gs 这里最关键的一步，打开根目录的 webpack 点 config 点 gs， 在规则里添加 css 的 处理规则代码是这样的，重点强调右时速组里的 load 顺序是从右到左执行，先执行 css 杠 load 的 解析 css， 再执行 style 杠 load 的 注入页面，如果顺序写反，会直接报错， 踩坑最多的就是这里呢，一定要记牢。第四步，打包并验证效果。 输入打包命令， npm run build， 等待打包完成。打开 disk 文件夹里的邦德点 gs， 再在根目录的 index 点 html 里引入这个邦德点 gs， 最后在浏览器打开 index 点 html， 看看页面背景是不是变蓝，标题是不是变红，如果是，说明配置 ok， 这里说三个最容易踩的坑，遇到问题直接对应解决。一、打包报错， moder not found， 大 概率是没装 load 或者安装命令输错，重新执行安装命令就可以。二、打包成功，但页面没样式，要么是 load 顺序写反了，要么是忘记在 gs 里导入 css 文件。 三、样式覆盖问题，多个 css 文件导入时，后面的样式会覆盖前面的，这个是 css 的 特性，和 load 无关。 最后补充一个小知识，为什么 load 要从右到左执行？因为外部派克里的 load 是 函数组合的机制，每个 load 都是一个函数，接受上一个 load 的 执行处理结果，再返回新的结果。优设数组里的顺序 对应函数执行的顺序是这个样子的，所以必须把 css 杠 load 的 放在右边先执行。 ok， 咱们用 css 杠 load 加 style 杠 load 的 组合，完美解决了 webpack 处理的 css 问题。核心就是记住分工加顺序， css 杠 load 的 解析， style 杠 load 的 注入顺序从右到左。

这是一个免费的文件压缩工具，一天一个神奇的工具。第六十六期今天要讲的是本站支持压缩图片、压缩代码、压缩视频、压缩音频、压缩 pdf， 而且支持批量压缩，最离谱是压缩后的文件大小，虽然缩小了很多，画质却几乎没有区别，就很省心。

前端开发必装的十个 vs code 插件，装上直接起飞，效率翻倍！第一个， css variable autocomplet， 写 css 变量，再也不用来回翻定义，自动提示，自动补全，再也不会写错变量名。第二个， project manager， 项目多到找不到，一键收藏，一键切换，不用再疯狂找文件夹，打开即用。第三个， path intelligence， 写路径引文件自动补全，斜杠一敲就出提示，再也不会因为路径错而排查半天。第四个， npm intelligence， 导入包名，自动提示依赖包，不用死记硬背，手速直接起飞！第五个， git graph， 提交记录可识化，谁在什么时候改了什么一目了然，回滚对比排查超级方便！第六个， better comments next， 让注视变得五颜六色，重要提醒， to do bag 器用代码清晰区分，代码可读性直接拉满。第七个， live server， 保存既刷新本地实时预览， 写 html css js 必备神器，不用再手动 f 五。第八个， wisecord icons， 给不同文件配上精美图标目录结构，一眼看懂，找文件速度快一倍，颜值还高！第九个， markdown preview enhanced， 写文档写笔记实时预览，支持图标公式导出， pdf 写簿刻的神器。第十个， coldsnap， 选中代码一键生成，高清截图，主题好看无水印，发朋友圈写文章超有范！这十个插件从效率、美观到实用全覆盖，让开发过程幸福满满！你还私藏了哪些神仙插件？评论区聊一聊！

hello 小 伙伴们，上期咱们用 c s s 杠 loader 加 style 杠 loader 搞定了 c s s 打包，但实际开发中咱们更爱用 sas 写样式，因为它有变量、嵌套、混录这些功能都非常的实用。 可 opac 它是不认识 sas 文件的，所以今天讲一下 sas 杠 loader 的 安装加配置。先搞懂原理， sasa 是 css 与处理器，浏览器和 webpack 都不直接识别，必须先编辑成普通 css， 再按之前处理 css 的 流程打包。这里需要三个工具协助，工作分工明确。一、 sasa 核心编辑工具，负责把 sasa 代码转成 css。 注意 note， 刚 sasa 已经废弃了， 以前的老版本是还可以用的，但是你到新版以后就不能再用了，所以现在都是用萨斯去编页，而且它的兼容性更好。 然后就是第二个萨斯刚 loader， webpack 的 loader 负责调用萨斯把萨斯文件转换成 css 模块。第三个 css 刚 loader 加 style 刚 loader 上期学的组合， 负责解析 css 模块并注入页面渲染样式。简单说整个流程就是 css 文件 splash load， 然后 css 文件啊不 splash 文件 splash 文件 splash 刚 load， 然后 css 文件 css 刚 load 页面样式少了，任何一个环节都会打包报错或样式失效。话不多说，上操作。 第一步，准备测试文件，在 s r c 文件夹下新建 excel， 点 s s， 注意后缀是点 s c s s 斜点 s s 特性代码，比如变量和嵌套，方便验证编解效果。代码如下， 再修改 s r c index， 点 j s， 把导入的 css 转成 sass import index， 点 sass。 第二步，安装依赖，打开命令行输入安装命令，一次性全部装上， 这个是命令代码，这里重点提醒，必须是装的是 s s， 单独装 s s 缸 load 的 会报错，因为它需要依赖翻译工具。之前装过 c s s 缸 load 的 和 style load 的 也可以只补装前面两个。 第三步，配置 wordpack， 点拷 b 格点 gs， 打开配置文件，修改规则，新增 sass 处理规则，也可以覆盖之前的 style 规则。代码如下， 重点说明， text 的 里面的正则，能同时匹配点 s c s s 和点 s a s s 文件。 i 表示忽略大小写 诱食宿主顺序必须是 style 降 load 的， css 降 load 的， sass 降 load 的。 先翻译再解析，最后注入顺序，不要错了。第四步，打包验证效果， 嗯，输入打包命令 npm load， 等待完成后，在 index 点 html 里引入 list 下面的帮点点 gs， 在 浏览器打开看看页面背景是不是蓝色，标题是不是红色，且是二十四个 p 叉。 如果是，说明 sas 变异成功，变量和嵌套都生效。然后配置 sas 常踩的四个坑，遇到问题可以对应解决。一、报错 cannot find module sas 其实就是没装 sas 嘛，重新执行一下，安装 mini 补装一下就可以了。二、打包成功，但样式不对， sas 语法写错，比如变量没加多了符或 load 顺序反了。 三、只识别点 s c s s， 不 识别点 s a s s， 检查一下 text 的 正则，确保是这个样子的，覆盖两种后缀。四、版本冲突报错，卸载现有依赖，重新安装最新稳定版，避免版本不兼容的问题。 然后补充两个实用的小技巧，一、全集变量复用如果多个 s 文件要用同一个变量文件，可在 s 杠 load 里配置。呃，这个 它会自动导入全集变量，不用每个文件去手动引。二生产环境优化后续会讲到用 mini css 编辑后的 css 提取成单独文件，而不是注入 js， 更便于生产部署。 ok， 今天核心就是掌握 sas 编辑的流程和 load 的 顺序。记住， sas 是 编辑核心， sas 杠 load 的 负责调用，配合 css 杠 load 的 和 style 杠 load 的 完成全流程。

看好了，宝子们， ctrl tom 下载教程来了，亲测有效，现在手把手教会你，首先点击我视频右下角的箭头，复制或者分享链接，然后要有这个，没有的去应用商店下载一个，下载好以后打开等两秒半会出现一个文件包， 没有的话也可以在首页搜索框搜索瓦上琉璃，从软件包里找到这个，最后保存下载就可以了。

c s s。 能把无聊的网页变好看，而一堆又小又简单的 c s s 类，最后竟然改变了开发者做网站的方式。 今天我们来聊 tailwind。 c s s， 它一开始只是个小点子，很快就成了全世界前端的常用工具，几乎到处都能看到它的身影。但关键来了， ai 编程工具进场后，规则正在用没人想到的方式被改写。 接下来几分钟，我会拆解 tailwind 的 崛起背后的设计原则，以及现在正在发生的变化，可能会重塑 web 开发的未来走向，也会影响你写代码的习惯和工作流程。开始吧，我们先从最基础的地方说起。 做网站时， html 负责结构， css 负责好看，你写一堆规则去控制颜色、间距、字体布局等所有视觉效果。听起来很简单，但很快就会变得一团乱。 tailwind 出现之前，网页样式基本都得自己写，你会起一些类名，比如 header、 button、 primary、 large。 过了半年，你自己都不知道它们到底代表啥，别人接手更是一头雾水。 c s s。 文件越堆越大，上千行纠缠在一起，维护成本直线上升。不同开发者起名各不相同，毫无一致性，全是混乱。更痛的是，你改一个小地方，完全不相关的东西也可能崩掉。 c s s 就是 这么不可预测，常常让人心累又抓狂。那 tailwind 做对了什么？它不让你写一堆自定义样式，而是直接在 html 里用现成的工具类， 要那边去就用 p 四，要蓝色背景就用比基布鲁五百，要圆角就用 round 的 料制， 都是小而稳定的积木。每个类只做一件事，而且命名很统一，行为也可预测。 就像自己裁木头和搭乐高的区别，都能盖房子，但乐高更好拼好拆，还能复用，团队协助时也更不容易打架。但 tailwind 的 成功不只是工具类，而是它用上了扎实的设计原则。跟我们天天做系统设计，用的是一套 有条经典规则，组合优于继承。意思是别把东西串成一条互相依赖的链，而是做成小而独立的模块，再把它们组合起来。 tailwinds 在 css 上就是这么干的，每个工具类都独立，可替换可叠加， 互不牵连。 tax center 就 只负责居中， flex 只负责开启 flexbox， 没有隐藏依赖，也不会突然给你惊喜。混搭不易出问题，调试更好定位哪条类再生效，回滚也方便，写作也不易踩坑。 这个思路跟微服务一样，小而独立的单元协作，彼此解偶，又能组合，替换某一块也轻松。再来是约定优裕配置， tellwind 自带默认值，兼具有刻度，配色挑过字号，开箱合理，你不用从零决定，框架已替你做出靠谱选择，用起来省心也更一致， 这也能减少选择疲劳，团队会更一致，这也能减少选择疲劳，团队会更一致。这也能减少选择疲劳，团队会更一致。这也能减少选择疲劳，团队会更一致。这也能减少选择疲劳，团队会更一致，这也能减少选择疲劳，团队就行。 第三个原则，行为的局部性，听起来反直觉，传统 c s s 把东西分开， html， 一个文件样式，另一个文件看起来很干净，对吧？但实际用起来，你总得在文件之间来回跳，才能搞清楚到底是谁在控制样式。 tailwind 把样式直接放在元素旁边，你看一个按钮，就能立刻知道它怎么被设置的，不用找，不用猜，改动也更有把握， 对团队合作来说也更直观。新人读代码上手会快很多。我们用三个核心原则，组合约定，局部性解释了 tailwind， 而这些思路在微服务、数据库、 ai 系统里也到处都是。掌握这些底层原理，学任何新技术都会更轻松。这也是我在 system design master 课程里强调的重点，不只是面试准备，而是建立一套思维模型，让你像资深工程师一样思考。说到底，谁都能做工具类，真的， 你周末就能做个简化版 tailwind， 那 他为什么能赢？因为他们不只是做了个工具，而是围绕他搭了整套生态。 比如 tailwind ui， 一 套专业设计拿来就用的组件库，复制粘贴，改一改就行。 还有 g i t 模式翻译超快，只生成你实际用到的 c s s。 还有 i d e 插件在编辑期里直接自动补全，你敲个 b j， 所有背景色立刻出现，再加上对 react， view and x 点、 g s 等各种技术站的一流集成，怎么用都顺。 再加上庞大的社区，每天都在做插件模板和扩展，生态越滚越大，这在商业上叫护城河。 一旦进了 tailwind 的 生态，换掉它的成本很高。团队会了，代码库依赖了，工作流也围着它转，连招聘标准都会受影响。你会发现，文档组建库、设计稿也都默认按它来。这就像 e、 w、 l s， 很 粘人，不只是一个服务，而是一整套几百个服务串在一起， 然后反转来了。 tailwind 最近裁掉了百分之七十五的工程团队，从四个工程师变一个， 收入也跌了大约百分之八十。发生了什么？ ai 来了！ get up a copilot 和 catch gpt 这类工具，写 tailwind 的 代码已经强到离谱， 甚至比人更稳定。你让 catch gpt 写一个蓝底白字、圆角带 hover 效果的按钮，它几秒就能吐出一串完美的 tailwind 的 类名，还能顺手补上响应式和深色模式，连命名间距这些细节都能一次到位。 tailwind 的 当初最容易学的特点，比如符号化的类名、可预测的命名、 统一的模式，恰恰就是 ai 模型最擅长的。 tailwind 简直就是模式匹配的天堂，给他例子，他就会举一反三。 当 ai 把这些模式学会后，开发者就不太需要看文档了，直接问一句就能生成。网站流量掉了，收入也跟着掉。裁员百分之七十五的第二天，创始人 adam arson 直接把情况说透了。 他在 github 上写道，现实是我们工程团队里百分之七十五的人昨天失业了，原因就是 ai 对 我们业务造成了残酷冲击。 他还解释，把文档做得更方便， ai 独取只会让网站流量更少，也就更少人发现付费产品生意会更难撑下去。 那 tailwind 就 完了吗？不一定，至少它的生态还在。但依赖文档流量加高级组建，这套商业模式确实正在被挤压，而且压力会越来越大。而这也不只是 tailwind 的 故事，它在提醒所有开发者，工具，如果你的产品很容易学，就也很容易被生成。 对我们开发者来说，继续关注，继续学习就对了，工具进化得很快，先适应的人会跑在前面。好了，今天就到这儿，如果你觉得这个视频有帮助，记得点赞关注，再留言聊聊。

这是一个不用买服务器，不用配置域名，能让你免费上线网页的极简部署工具。那现在我们经常用 a f 辅助写代码，也就是 web coding， 但是生成的仅仅限于一个 demo， 就是 总得部署上线才能给别人看吧。 拼觅是我找到最简单的一个解决方案，就是它支持终端命令和浏览器上传两种方式，操作非常简单。我这里呢，以浏览器部署为例，这 这里要注意的一个细节就是我们不能够直接上传所有的源代码，在上传之前，我们需要先在电脑的终端输入这两行的命令，把代码打包成浏览器能看懂的 html 或者是 css 这种文件的格式。那等它执行完之后，我们把默认生成的这个 disk 文件直接拖拽到网页就可以了。 不到一分钟，他就自动把我用珍妮奶开发的每日豆浆食谱 demo 发布到网上了，并且生成了一个永久的链接，操作非常简单，速度也很快，就非常适合前端开发或者是学生用来托管静态的页面。 这种轻量级的工具用起来没有什么负担，大家快去试试吧，我是开心关注我，每天进步一点点。

好，来看这道题，如何使用关键路径 css 提高首屏加载速度，那么在咱们开发当中啊，你优化首屏加载速度呢，可以提升用户的体验，对吧？那么关键路径 css 呢，就是一种优化策略， 通过直接影响首屏渲染的这个 css， 直接内连到 html 文档里面，减少外部 css 文件的一个加载需求，这样的话就可以加加快网页的这个首次渲染时间。那具体有哪些步骤或者技巧呢？在这给大家说一下。比如说第一个呢，就是一定要确定关键路径 css， 那这呢我们要对首屏的进行一个分析是吧？哎，识别出用户首次访问页面时所看到的这个内容区域。另外一个呢，就是找到用于渲染首屏所需要的这个 css 规则，包括布局啊，字体啊，颜色等等这些内容。第二个呢就是抽离，哎，抽取关键 css， 抽取关键 css， 那我们可以使用一些自动化工具是吧？根据页面的截图或者指定的 url 来提取首屏所需的 css， 我 们也可以根据自己的经验，手动挑选首屏渲染所需的一些关键样式。那第三个呢，就是内联关键 css， 内联 关键 css， 嗯，我们可以把提取出来的 css 呢，直接放到 html 文档的 head 标签里面，那我们使用 style 来进行一个包裹是吧？那我们同时呢也要确保内联的 css 代码呢，是位于咱们文档的头部啊，这样的话浏览器它会更早地去解析和应用 好。第四个呢就是拆分胜利 css， 那 我们可以把那些不是关键路径的 css 呢，移动到一些单独的外部文件里面，这样的话方便它进行一个异步加载啊。那第五个呢，就是优化这个非关键 css。 优化非关键 css， 那对于一些不影响手屏渲染的样式呢？我们就采用来加载，是吧？用户滚动或者触发到某些事件，哎，再给它进行一个加载，也可以按需加载，是吧？根据页面不同的功能或者部分，哎，分别加载对应的这个非关键字眼单词文件。那第六个呢，咱们可以使用缓存策略啊。缓存策略， 那我们可以去设置这个 catch ctrl 啊。呃，给那些不是关键的 c s s 文件呢，设置一个合适的缓存控制头，让它能够在浏览器的呃，里面呢，保存这个比较长的一个时间。 ok， 这些方法呢，就可以来提升这个首屏的一个加载速度了。

网站搭建是指通过技术手段创建一个可以在互联网上访问的网站。搭建一个网站通常需要以下几个步骤，首先，需要注册一个域名，域名是网站的地址，用户通过输入域名来访问网站，常见的域名后缀有点 com、 c n 点 net 等。 注册域名可以通过域名注册商完成。其次，需要购买网站空间或服务器，网站空间用于存放网站的文件和数据，根据网站规模和访问量， 可以选择虚拟主机、云服务器或独立服务器等不同方案。然后进行网站设计开发，可以使用现成的网站建设平台，如 wordpress、 wix 等快速搭建， 也可以自行编辑 html、 css、 javascript 等代码进行定制开发。对于复杂网站，还需要后端编程语言，如 php、 python 等支持。接下来将网站文件上传到服务器 并配置数据库等。必要组建完成后需要进行测试，确保网站在不同设备和浏览器上都能正常显示和运行。最后，网站上线后还需要定期维护更新内容，监控网站运行状态， 做好数据备份和安全防护工作。同时可以通过 seo 优化提升网站在搜索引擎中的排名。

到底是谁说现在 ai 生成出来的 ui 界面不能更改？你们给我站出来，我今天就用三步教你怎么去更改 ai 生成出来的 ui 界面，并且让你实现前端自由。我们先打开 fig 码，把切图打包到一个本地文件夹里，把界面需要的字体也放进来， 切图的规范和备注方式大家可以看我上一期的视频。接下来我们打开 cursor。 第一步，我们需要让 cursor 给我们做一个基础的框架，把界面参考图和基础的 ui 规范给到它，其他的不管， 然后现在这是它生成的效果，它给我们提供了一个基础的框架。第二步，给 cursor 提供自然语言描述更换我们准备好了的切图，可以直接在这个地方把文件路径复制过来，方便 cursor 提取。 然后现在他把我们的切图都给更换到原来的这个基础的框架里。第三步，把字体大小样式描述好，让 cursor 直接读取我们放在文件夹里的字体。 其次是更换按钮的样式，我们直接复制 figma 的 css 样式，把原本 cursor 给我们生成的按钮样式给替换掉。那么现在我们就把静态的界面给做好了。如果你还想知道怎么将静态界面实现它的交互效果，可以关注我，我将会在今后的视频分享，拜拜。

好的，接下来咱们看第五节麦克风 s 系统 g s t s 安装，咱们点击打开讲义啊，呃，我们安装好了 v u e 啊，接下来啊，我们再安装一点点东西啊， g s 和 ts 啊，我们说 我们需要在 v u e 之外配置好 g s 和 t s 的 运行环境啊，我们这个刚刚安装了这个 v u e， 在 v u e 内部呢，写 g s， 写 t s 代码那是没有问题的啊，但是呢，我们有时候啊写东西， 我们希望在外边写一点这个 ts 这个代码啊，然后呢这个时候呢我们做一下测试，所以说啊，我们在这里就一步到位，就一步到位，让整个电脑不论在哪个地方都能写 js ts 这个代码，所以说咱们这一步安装一下啊， 呃，其实呢内容非常简单啊，因为咱们啊，因为根据这个 note js 啊，这个 js 运行是没问题的，关键就是对 ts 做一个小小的设置。好，咱们开始一步一步来啊，咱们首先建立这么一个文件夹啊，我们说注意 在 v o e 项目之外新建文件夹，叫做 code js 啊，呃，为什么这样子呢？ 我们这个无忧，我们刚刚这个项目啊，我们刚刚这个项目，然后呢这个我们尽量不要去污染它啊，然后呢这个我们在外边，然后建立这么一个文件夹，用来我们运行环境啊。好， 然后呢这个文件夹的名字取得也非常直白，叫做扣的 z s t s， 然后我们复制这个名字，然后在桌面上新建文件夹，然后呢粘贴到里面，注意前后不要有空格。好，然后呢这个扣的 z s t s 这个文件夹建立好之后，然后打开 v s q 的， 打开 v s q 的， 这是我们上一个这个内容，咱们不用管，直接点击这个地方打开啊，点击这地方打开， 如果没有这个界面的话，这个欢迎界面，然后呢我们选择这个最上头顶层这个地方，然后呢再帮助，哎，再帮助这个地方，然后呢有一个欢迎，然后点击欢迎，然后这样就可以了 啊，然后呢也可以把我们这个给删除啊，删除之后呢，然后呃将文件夹删除，删除之后呢，然后点击它也能打开。好，我们还是推荐然后这个欢迎界面，因为这个我们这个界面使用非常多。好，点击这个欢迎，然后呢点击下面这个打开这个地方 啊，注意哈这个欢迎，如果没有的话是在这地方帮助，然后呢欢迎，点击欢迎，就可以我们把它给关掉，假如说没有 这种情况，没有，然后呢帮助，然后欢迎，哎，这个时候就有欢迎这个界面了。好，然后欢迎这地方，点击打开，然后呢桌面，然后呢找到 q 的 g s t s 这个文件夹，哎，然后呢点击打开， 好，这时候呢然后就打开这个文件夹了，然后呢把这地方给关一下，然后呢这个扣的 jsts 这个文件夹啊，好，然后呢这个在这里我们新建一个文件，这个文件呢取的名字也非常直白，叫做 demo 下划线 js 点 js 文件，哎，这就是个 js 文件， 我们然后呢在这个文件夹选中，然后呢在这地方新建文件，右键点一下新建文件，然后呢把这个名字给扔到里面，注意前后不要有空格。 然后呢这个就是 js 这个文件，我们把刚刚这个命令，然后呢复制，然后来到这地方给放到里面，哎， 然后呢我们在这里，哎，不管这个命令是什么，哎，不管这个代码是什么，我们主要是把项目给调通，然后呢点击右上角这地方这个三角号，然后呢调用 control 软件来运行，哎，这时候就可以看到，你，好，咋回事的，没有问题 啊，呃，我们这个在讲基础语言时候也说过了，在这里咱们就不多说了，咱们把项目给调通就完事了，哎，好，这是这一个，哎，能正常输出，那就没有问题了，好， 然后呢接下来我们配置 ts 的 环境啊，然后呢我们安装两个插件啊，这个呢是 ts 的 这个网站，我们也可以看一眼，复制这个网站，然后呢来到这个地方 啊，来到这个地方，然后呢这是 ts 的 网站，现在这个版本，哎，五点九了，哎，对吧？哎， ts 这个发布现在就是五点九了，六点零在 b 特中，哎，好，然后呢我们把它给关掉，然后我们再接着来， 然后呢这个安装这两个，安装这两个我们先复制，我们可以看到十六 npm， 因此到杠机全剧安装。安装 ts， 我 们复制这个命令，然后点击这个终端， 注意是点击这个终端啊，我们这个之前用的这个终端啊，然后呢在终端里头我们安装这个命令，因为我们要全局安装好，然后呢我们复制这个命令，然后来到这个地方，然后把它给粘贴到里面，然后点击 insert 执行，输入密码， 好，然后进行安装，哎，安装速度非常快哎，因为我们就已经把原换到国内了，好在安装下边这一个 ts note， 哎，这个大家一听也知道，对吧？ ts note， 那 不就是针对于 ts 的 这个 note 吗？哎，好，然后呢点击执行， 然后安装速度也非常快，然后呢，接下来查看版本，先复制第一个命令，查看 ts 的 版本，然后呢执行五点九点三，没有问题啊，好，然后呢，查看 ts note 的 版本， 好，爆串说，没有，哎，这个是在 macos 下这一段时间，这一两年经常遇到的这个爆串，哎，就是没有，哎，虽然说我们刚刚安装成功了，但它就是爆串，没有，不过不用担心，哎，我们在讲技术语言时候，我们也说过 没有，那怎么办呢？再重新装一下，再复制这条命令，安装 ts note， 再复制这个命令，然后里头，然后点击执行，哎，我再装一次，装完之后我再查看 ts note， 这时候就有了，哎，这是一个这个这一两年，然后遇到了这个非常经典的错误，哎，好，我们直接直接再安装一次，然后就可以了，哎，好， 呃，有时候呢，会报这么一个错误，说 npm 等等等等，然后什么 home， 点什么之类的啊，在咱们这个地方没有报错。这个呢，大概是在，呃，半年前，半年前吧，然后遇到这个问题啊，他的问题就是什么呢？呃，就是然后这个， 因为这个 n p m 啊，它这个每一次更新啊，它也不可能保证百分之百的没问题，哎，对不对？大家想想，然后维护这么一个插件，对吧？需要很大的这个工程，偶尔出出现点问题也没事。哎，如果说遇到这个问题呢， 是因为啊，然后这个文件就是这一个基本的这个配置文件啊，它里面有一个 home 产生了那么一个干扰项啊，我们呢可以怎么办呢？可以直接把这个文件给删除，也可以打开这个文件，然后呢找到这个 home 配置项，然后给删除 啊，在咱们这地方没有报错啊，如果说遇到报错的话呢，然后这个相应的解决就可以啊，咱们再具体的说一下吧， 然后呢他是这样子的，然后比如说找到，然后咱们这一个打开，然后咱们这个哎这个这个东西找到用户，然后找到自己的文件夹，找录客，然后里面有这么多，对不对？ 然后呢我们先把这个隐藏这么一个给打开，然后呢上箭头 com 的 和句号啊，上箭头 com 的 和句号，这时候就打开这个隐藏了， 打开隐藏就是这么一个文件，点 n p m r c 这个文件啊，然后呢你可以直接把它给删除啊，如果说遇到这个报错的时候啊，如果说遇到这个报错的时候给他删除，或者说用 ysl 打开，然后呢怎么办呢？把里面这个后备之像给删除，哎，在咱们这边没报错，咱们就不管了， 然后呢取消这个隐藏，仍然是这三个上箭头 com 的 和点和句号，然后呢把它给关掉。好在这里咱们就多说了一句， 呃，咱们再接着来，然后呢这个我们这个 ts， 我 们测试环境，我们回到，然后这个扣的 g s t s 这个文件夹，然后复制下边这个名字 demo 下划线 ts 点 ts 这个文件， 然后我们复制这个命令，然后新建文件，然后把它给粘到里面，注意前后不要有空格。好，我们在这里就新建了这个 t s 文件，然后我们使用这个命令叫 t s c int 这了命令生成 t s cal 分 隔配置文件， 然后我们复制这个 tsc int 这条命令，然后来到 ysl 的， 然后在这地方选中，然后右键在集成终端中打开，啊，然后呢选中这个文件夹，右键在集成终端打开，大家注意，然后定位到这个级别，然后把刚刚的这个命令， 呃，不对不对，不对不对，好，我们在这看一下，我们再次重新选择一下，我们把所有东西都给关一下， 复制 t s c 印特这条命令，然后来到这个地方，然后哎选择这个文件夹，右键在集成中段中打开，然后把它命令给扔到里面，然后点击印特执行， 他说是否创建，哎，然后呢？他已经创建好了，哎，就是这个 tscom 这个配置文件，哎， 呃，过去呢，然后不生成 tscom 这个配置文件也能运行 ts， 但是现在好像不行了，总之来说我们就生成这个 tscom 这个配置文件啊，对于咱们来说也就多这么一点点好， 然后咱们来到这个 ts 这个文件，咱们直接 copy 复制下边，然后这个代码，然后把它扔到里面。关于代码咱们不说，主要就是配置好环境，然后把所有东西给关一下，然后点击右边，然后这个三角号，然后呢调用酷狗浏览器，哎，然后呢进行运行，这时候可以看到你好他，他也不熟的， 呃，输出这一句话，那就是没有问题了，我们所有的环境就已经配置好了啊，当然我们也可以将 ts 转换成 js 文件运行，我们在这里就不尝试了，哎，好的， 呃，这一步我们就已经把所有的然后这个内容给配置好了啊？我们上一节配置好了 v o e， 我 们这一节又配置好了 js 和 js， 这样的话呢，我们整个电脑，然后写 js， 写 js 代码就没有任何阻碍了啊。好的，这就是咱们这一节内容。

大家好，我是清新，今天给大家分享前端必会的三种 css 布局技术，第一种是这种左右两列式的布局，第二种是这种一行三列或四列的布局，第三种是这种一行多列或者多行多列的布局。那么接下来我们可以看一下京东商城的网页框架结果它是如何搭建的， 我们来看一下啊，一般网站的头部都是通蓝的啊，那么京东也是通蓝的，那么他整个网页的主体部分啊，他其实是放在这么大的一个盒子当中，然后这个盒子设置在水平发现居中，那么接下来的内容就是在这个盒子里面来进行布局，所以我们来看一下这个里面是怎么布局的。 那么首先我们来看第一个板块，他是一行四列的布局，第二个是属于一行多列的，第三个板块是属于左右两列式布局，那么第四个板块也是一行多列，那么第五个板块也是一行四列的布局， 那么后面的话都是这种多行多列的布局。我们来看一下啊，所以说整个这个网页的框架结构啊，用到的就是我们今天要给大家分享的这三种布局方式， 所以只要你掌握了这三种布局方式，那么搭建一个完整的网页框架肯定是一点问题都没有的。那么接下来我们就开始写代码。好，首先我们来回到我们的 vs 扣的开发工具，首先下来我们来新建一个网页文件，我们来给他取个名字啊，叫做前端必会的三种 css 布局技术。点， stm 回车。好，那么接下来我们按住 sift 键感单号回车调出我们这个网页的框架，那么同样的我们也需要把这个标题给他设置好，好，我们来给他设置下标题， ctrl 加是保存。 那么接下来我们来看一下我们要做什么啊？我们刚才说了，我们一个网站的他的主体部分是放在这么大的一个盒子当中， 然后在这个盒子里面进行布局，那么我们一般的网页的这个宽的吗？这个宽度是一千二百八十，那么我们这里为了给大家方便的话，我们把它缩小到一千啊这样一个区块里面，所以首先我们要构建这么一个大的盒子，用来做我们的容器。好，我们来构建一下， 点上，哎呀，好，容器的意思啊。好，然后我们来给他添加我们的样式，太太太杠，四二三四。 好，那么接下来我们来给他添加我们的样式宽度啊，我们来给他加上一个宽度，一千，然后我们来 给他加上一个高度啊，当然这个高度他正常是随着内容自动而往下撑的。这里为了给他看效果，我们给他加一下啊，到时候后面我们把它删除掉就可以了。然后我们来给他加上一个边框，我们来看一下效果。 coms 加是保存，然后我们的右击啊在浏览器当中来打开看一下。 好，那么这样一个长方形的区块构建好了，那么这个时候大家看他与上面和左边有这样一个间距，那么这个间距我们可以审查来看一下啊， 我们来选中我们的玻璃就可以看到，其实大家看这玻璃有默认的八相处的外边距，那么这个间距就是浏览器在最开始变异的时候， 我们这个波点默认自带的外边局造成的，所以我们不需要，不需要我们就把它给干掉，好抗拆架是保存，那么这个时候间距就没有了，那么接下来我们这边需要把这个盒子设置在水平方向居中的位置显， 我们可以看一下，妈，给给大家上一个上三十像素的外编剧，左右外编剧自动相等，那么下外编剧为零， ct 加是保存，我们来看一下大上外编剧，三十像素左右自动相等，水平居中啊，下外编剧不需要零， 好，我们接着往下看，那么首先我们要构建第一个部分，这样一个左右两列式的布局，那么这样一个结构，我们来看一下啊， 他其实是在外面啊，构建了这么大的一个盒子，然后在这个盒子里面再构建的左边这个红色的盒，右边这个黄色的盒子啊，所以是构建一个大的盒子，里面放两个小盒子。好，所以我们来看一下啊， 好，我们来给他取个名字叫 column c o r u m m， 这个什么意思啊？啊，这是我们的列的意思啊，好，我们这里是两列， 是的，所以我们给他取个名扣二，好，然后他里面要有两个，是不是一个左边和一个右边的盒子，所以点敲了门 啊。 c o r u m m 二杠一，好，我们来把它复制一份。二杠二， come， 加是保存好，接下来我们来给他添加样式啊，我们先给他最外面的那个盒子加加上一个边框，看看效果， 我们给他加个黑色的吧，看着加是保存啊，大家看一下啊，当然他里面还没有高度，所以啥也看不到，只能看着几个黑框框在那里。 好，那么接下来我们来给他里面杠点上，敲了门，二杠一，我们给他加上一个宽度七百，加上一个高 三百，再给他加上一个背景颜色红色， ctrl 加是保存好，再一个红色的区块就出来了，那么接下来我们来构建他的第二个部分，第二个里面的小盒子啊， 好啊，然后这里我们来看，总共宽度是一千，减掉七百，还剩三百，还要留下空隙，所以这里是二百八， 然后这个颜色我们把它改了，改成什么？改成黄色椰蓉，看，这家是保存，保存之后我们来看一下它整个就是外面这个大的盒子，是吧？这个黑色的边框包裹着两个盒子，红色的和黄色的， 那么接下来我们要让这个盒子怎么样？在水平局中啊，在水平，一个在左，一个在右显示，所以在左边的这个盒子我们给他加上一个左浮动，看此啊好，到了加完之后，这个黄色的不见了啊，这个黄色的盒子是因为什么被这个红色的盒子盖住， 有时候加了浮动之后，这个盒子就相当于飘起来了，他不占空间，所以下面这个盒子就把那个什么下面的盒子就缩到里面去，看不到了啊，所以同样的，我们这个盒子我们要让他往右边显示，我们可以给他加上一个什么右浮动。 read， 好看，这家是保存，保存照，大家看到没有？就在这里了，但是我们加完之后啊，这个效果是实现，但是他外面这个盒子，这个黑色的盒子是不是被塌陷了呀？ 啊，这就是因为加了浮动之后啊，这两个盒子相当于飘起来，没有占任何的空间，所以外面这个大的盒子就相当于没有高度了，他就被塌陷了，那么如果我们往后面再写内容的话，他就也会缩到里面去，那这样肯定是不行的，所以我们需要清除浮动，那么接下来看一下我们怎么清除浮动， 大家看啊，这里非常的重要，我们来看这是左浮动的盒子，这是右浮动的盒子，是因为这两个盒子的 浮动问题造成的塌陷，所以我们需要在他们的后面加上一个清除浮动的样式啊，我们来看一下怎么加，我们给他一个颗粒啊，构建这样一个颗粒，这样一个 diy 啊，这个怎么 diy？ 主要是用来清除我们的浮动的。好，所以我们来看一下点上颗粒 大括号颗粒是什么意思？清除浮动的意思。好，我们来看一下，比如说我们来清除一下左浮动， 这个什么意思？就是这个盒子啊，他在清除浮动的时候，这个清除左，大家看他只能清除他前面的盒子因为左右浮动造成的塌陷问题，他是不能清除他后面的盒子 造成的塌陷问题啊，等一下我们给大家演示。好，我们先给他加上一个清除左幅的，我们来看一下。好，清除的来看一下是不是也 ok 了呀？是不是 ok， 但是我 说了，好像我们只要清除左浮动就好了，他右边这个盒子右浮动造成的塌陷问题好像不需要清楚啊，我们来看一下啊，如果我把这个盒子的高度改成一百， 我们来看一下他会有什么问题，大家看到没有？是不是还有这个塌陷问题啊？那是因为我们给他盒子加的高度是一样的，所以正常情况之下的话，我们是应该左右浮动都要清楚的，如果我这里只清楚右浮动， 好像看上去也没有问题，是不是如果我把右边这个盒子也改矮一点呢？那么他也会出现那个问题，所以正常情况下我们是要清除什么啊？这个盒子前面的这把盒子因为左右浮动 给外面这个盒子造成的差塌陷问题，所以我们应该是 boss， 也就是说他前面只要有左浮动和右浮动都清楚掉， 所以是清除左右浮动，这样子大家看一下啊，就没有问题了。好， ok 了，这当然我们把这里先还原一下啊。好，我们刚才说了清除浮动这个颗粒为什么要写在最后面，是因为他只能清除他前面的盒子因为左右浮动而造成外面这个盒子塌陷的问题，他并不能清除他后面的盒子因为怎么样浮动而造成的塌陷问题。 所以我们比如说我们把这个盒子再复制一份，复制好了之后我们来看一下，你看到没有？这个是不是这个盒子的高度是不是还是这样的，并没有随着后面的内容来撑开 啊？所以我们一般清楚浮动的时候啊，我们一般是写在最后面啊，是必须写在最后面啊，不是一般， ok， 好，那么这样就没有问题了，那么 ok 了之后，我们接 接下来我们就要看我们的这种一行三列或者四列的这种布局了，我们来看一下啊，那么同样的这种一行三列的这种布局，他也是在外面构建了一个大盒子，然后在这个盒子里面构建了三个小盒子，然后再把它排在一排，这样显示，所以同样的我们来构建吧。 扣了吗？ c o r u m m， 好，这里是三是吧？好，然后点上 c o r u m m 三杠一，我们来复制三份吧，按住 alt 键和 c 不正向下的箭头就可以复制了。好，我们来啊， 这里来三炕在家是保存，保存之后，当然这里什么效果也看不到。我们同样的来先给他加点样式吧， 给他一个三啊，我们也给他加上一个边框来看一下，我们给他加上一个两项 蓝色的边框吧，看着加是保存，同样的看到的，这里有个啊，边框线。好，我们接着往下看三，下面的杠可入三杠一，第一个盒子， 好，同样的我们给他加上一点宽度吧。 iwy 四，我们来给他一个二百， 然后同样的我们给他加上一个高度三百，好，给他加上一个背景颜色，看着加是保存好出来了，我们来构建我们的第二个盒子 里面的第二个啊，好，同样的我们给他改成什么？我们改，改成四百，把这个颜色也给他改 改一下，我给他改个这个颜色吧。好，然后我们来看一下第三个， 好，我们来看一下啊，那么我们来看两百加四百就是六百，六百加四百就正好是一千，然后我们来看一下，总共这里是一千，然后这里要有间距二十像素，这里也有二十像素，是吧？所以我们要干嘛？我们总共只有九百六，九百六的话，那这里只有三百六了， 好，这样子啊，然后我们把这个改掉，把这颜色改了， 改个紫色的吧，看这驾驶保存，那么这三个盒子从上往下排列，当然我们要把它变成水平的，我们有两种方法，第一种就是给他们分别加左幅， 好，我们来看一下，比如说给他加上一个 flow 成，大夫吃给他也加上一个 flow 成，嗯， 来不成？然后给他也加上一个 float， 来不成？看成家是保存，大家看一下是不是 ok 了。那么接下来我们要产生空隙的话，我们可以给中间这个盒子加上左右二十像素的，外边去就可以了，马给上下为零，左右二十。 好啊，当然他挤不下去是因为外面这个盒子造成的啊，你看到没有？就外面我们给他加的掩饰是吧？比如说我把这个蓝色的这个边框干掉，因为外面这个盒占了空间吗？占了两箱数，他只要多一点点他都放不下，是吧？ 好，那么接下来我们来看一下，我们如果把这个把这不注视掉，我们来看第二种方式，他有什么好处啊？第二 种方式我们是第一个加左浮动往左，第二个也加左浮动往左，然后然后第三个盒子我们加什么不加左浮动，我们加右浮动，也就是说前面两个盒子往左，后面一个盒子往右，然后我们给中间这个盒子加上左边二十像素的外边去就可以了。 再看你们同样达到了这个效果，但是他并不会因为这里有两项数的这个边框而造成他掉下来，是因为他这里还有二十像素的这个空间可以容你怎么样？对啊，作为弹性是吧？伸缩自己去那个啊，好，这就是这种布局的方式，他有一个好处啊，就在这里。好， 那么 ok 的时候，同样的我们要清楚他们三个因为浮动造成的塌陷问题。好，当然我们要清楚浮动很简单，我们也可以把这个直接复制放到 这个位置就可以了啊。当然接下来我们来给大家讲第二种清除浮动的方式，我们就不这样加了啊。好，我们来看一下怎么加。先认真看代码，最后我再给大家讲原理，我们给大家定一个清除浮动的样式颗粒， 这个是冒号，阿富特大挂号。好，这是一个样式啊，然后这个冒号阿富特就是在他的后面。啊，什么意思？现在也不需要懂，等下再说吧。好，我们来 continent。 好，我们先里面加个一一一啊， 好，这些带吗？先，都不需要动啊。好，我们先写完了再说。可丽儿，这个，这个动是不是好不好使？好，那么这是一个典型的清除浮动的这样一个样式，它是利用我们的尾元素来写的，然后我们把这个样式放在哪里？哈？ 把这样式放在他上面，因为我们要清楚他里面的内容，是吧？因为浮动给他造成的这个塌陷问题。好，所以我们来看一下，我们保存之后我们来看一下效果就可以了。啊，好，当我给他加了这个样式之后，大家有没有看到这个地方有个一一就出来了。好，我们来这里审查元素，我们来看一下。 好，我们来看一看，看这里啊，好，到底有没有发现这个冒号阿富特看到没有？是不是在这个位置看到没有？我们点击他的手是不是在这里看到？好，现在一定要注意啊，这个冒号阿富特 就相当于是在这个 div 的最后面创建的一个委员数。什么叫委员数？我们正常的元素是不是他有标签名呀？对吧？啊？这个委员数呢？他具备了这些标签的所有特 行，但是他没有名字啊，就这个意思。好，然后我们来下这个 content， 这里面是什么？这个一一就是相当于这个元素标签里面的内容，比如说我们现在写了个 p 标签，我打了个 ss 或者打了个一一啊，他就相当于这个中间这个内容。好， 然后我们来看一下，我们一定要把它设置为会计元素，他才可以清除浮动啊，我们来看一下就是不是真的是会计元素，我们给他加个背景颜色，红色，你看到他是不是？ 他其实就相当于是在这个最后面加了一个委员数，然后这个委员数的话，第一他的内容我们不需要，我们只是用他来清除浮动而已，不要跟这个一样，只是我们这样加在结构里面看起来不好看， 是吧？第二个就我们一定要把它转回快局才可以啊，大家看看看一下，然后在他身上加上一个颗粒 boss， 清除左右浮动这样样式就可以了。好， 这个地方大家一定要理解啊，其实他跟这个是一样的原理，无非他就是用委元素来在这个后面加好，但是这里有怎么样？有一个非常重要的就是他一定要把它转换为一个会计元素啊，因为他默认的是属于行内元素。 好，如果我大家看一下，如果我把这个注视掉，你看他就达不到清楚的效果了，你看这个是不是？好，所以这里他一定要注意了啊。 好，那么接下来我们要给他添加上外编剧二十像素与上面产生空隙，然后最外面这个盒子加上一个 money 杠 top 二十像素， 那么这样就没有问题了。那么三列是一行三列的布局，我们也做完了，接下来我们来看这个一行多列或者多行多列的布局，那么 像这种一行多列或者多行多列的布局，我们来看一下京东啊，它主要是用来做我们这种产品列表的样式来进行，是吧？来进行使用的，所以一般情况之下，我们都是用我们的幼儿无需列表来进行构建 好，所以同样的，我们在这里面也要构建一个大盒子，然后在这个大盒子里面利用我们的幼儿五系列表来构建我们这样一个多行多列的效果。好，所以我们接着往下看， 那么接下来我们来构建一个多行多列的 c cloud， cloud， 是吧？ curumm， 好，我们杠 m 吧。好， 这个啊就代表多的意思，多行多列的意思。好，然后里面我们可以用我们的 u r 标签， u r 五系列表标签，我们来乘以十。啊，好，大家看一下啊，这是一个快捷的方式，我再我再说一下， ur 这个监控号 代表它里面的紫元是，紫元是谁？是 r i， r i 出现几十，十四就乘以十，然后回车就可以了。好，看，车加 s 保存，保存之后你看到的就是这样一个简单的效果，那么接下来我们同样的给他接怎么加上一些边框来看一下效果啊？好，靠，热门 杠昂，大括号啊，我们同样的加上一个边框吧，我们也给他加上一个两项数，加上一个蓝色的边框。 好，这里看到了这样一个大的边框了啊，外面的盒子，好，然后我们来给我们的点上，我们的后门下面的 ur 也加上一个啊，我们加个背景颜色吧。 加个什么背景颜色？加个这个颜色的吧，好，看到了吧？好，然后我们来给我们的点，上课了们 下面的幼儿下面啊，哎，我们也给他加上一个边框来看一下效果啊。好， 那么这样子大家看到没有？这就是我们最开始构建的这样一个最原始的这样一个框架结构，那么接下来我们一步一步来调，首先大家看一下他与这个上面和这个下面有空隙，还有这个地方与这个 li 之间也有空隙，是吧？ 所以我们来看一下这个空隙是怎么造成的啊？首先我们来审查元素来看一下，选中这个幼儿，然后我们往下拖，看一下他这个幼儿的和模型，我们来看一下他是不是有默认的十六像素的外边距和四十像素的内边距，所以我们不需要，不需要我们也要把它给干掉。 好，所以我们可以在这里直接逗号幼儿把他的外边就干掉，然后我们同样的把那边就也加进去啊，零啊，当然他这里是零的时候，这个单位 可以写也可以不写啊，这个无所谓的。然后我们幼儿的前面还有这个小点点，我们这个小点点也不需要，我们也要把它给干掉， 嗯，把小小心写错了啊，有儿大括号，我们给他怎么样？把那个点点干掉是不是？ 好，那么这样就把这个前面的点点干掉了，干掉完了之后再看他就缩成一坨了，是吧？那么接下来我们要构建这样一个效果的话，那这里的每一个小区块其实就是一个二哎，所以我们要给每一个二加怎么添加宽度？高度，好，然后我们来看一下怎么添加宽度啊？高度 来呗，我们来给他添加一个宽度一百九，添加一个高度两百。然后我们看车驾驶室看一下，大家看一下，从上往下进行排着，那接下来我们要 他在水平方向排着，很简单，我们只要给他加上一个不落成，带不走，左不动，大家看一下啊，分分钟就上来了啊，当然因为他现在问题，他这个蓝色的盒子又不见了，是吧？好，然后我们每个盒子之间他是有一定的空隙的，我们来看一下啊，我们来给他加上一个 m， 咱把上下左右为五像素看是加是保存就可以了啊。那么上下左右为五像素相当于他的宽度是多少？宽度就是两百了，总共是一千，对吧？一个是两百，总共就给放五个盒子是吧？正好就可以放下。他这里放不下的原因是因为我们给外面这些盒子加了一个两相处的边框啊， 好，所以放不下。还有一个就这个盒子本身他有边框，又多了两箱，所以也放不下，所以我们要做的，我们可以把它加上一个背景颜色，看他这样式，然后呢我们把这个边框线注释， 那这样就正好可以放下了啊，大家可以看一下。 ok 了之后我们同样的也要解决这个浮动造成的塌陷问题。好，我们来看一下，我们说的是因为二挨家的浮动所以造成塌陷问题，所以我们要解决他的浮动问题，我们就在这里加上那个清除浮动的样式。 好，大家看一下这样子是不是整个浮动就清除掉了？那么清除掉了之后，这个整个的区块与上面也有二十相似的间距，我们可以给谁加？我们可以给最外面的这个盒子加就可以了，所以我们可以给他加上一个马，给你干 top 二十像素， 大家看一下，这样子就没有问题了。好，那么接下来我们把我们不需要用的辅助线全部给干掉啊，我们前期将辅助线都是为了让大家能够更清楚的看到它本身的一个结构，或者说 做到当前我们需要展示的效果。好，我们从上往下开始一个一个，第一个我们说这个高度要不要，不要高度，我们最开始是为了给大家演示效果看的，所以干掉，不要，干掉完高度之后，哎，这样子就没问题了。第二个这个外面的这个边框线也不需要，也要干掉。好，这个效果没问题。 好，接下来我们来接着往下看这个外面这里也有一个边框，也不需要干掉，然后这里三裂，是吧？一行三裂的这个地方也有一个边框，我们也不需要，我们也把它给干掉。 那最后就是这里了。好，这里我们来看一下，这个 u r 加了一个背景颜色，我们也不需要 好，那么整体的这样一个，你看我们这样一个布局的这样一个效果就出来了，就是外面一个大的盒子包裹着在水平居中，然后左右两列式，一行三列式，说一行多列或者多行多列的这 一个效果。啊，好，那么今天这一节课我们就给大家讲到这里啊，这个知识点是非常重要的啊，那么整个网站的框架结果，不管 任何一个网站，他基本上都是有这三种啊，硬结构来构成的啊。好吧，那我讲的可以的同学啊，可以点击关注啊，关注一下我，或者给我点个赞。