via自定义css代码怎么使用

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 的 故事，它在提醒所有开发者，工具，如果你的产品很容易学，就也很容易被生成。 对我们开发者来说，继续关注，继续学习就对了，工具进化得很快，先适应的人会跑在前面。好了，今天就到这儿，如果你觉得这个视频有帮助，记得点赞关注，再留言聊聊。

每天一个计算机小知识，什么是 css？ css 全称， cascading style sheets。 层叠样式表，是专门用于描述网页元素视觉表现的标记语言，相当于网页的化妆师。 html 负责搭建页面结构骨架， css 负责定义字体颜色、布局、动画等外观样式， 让网页从单调的文本结构变为美观的可视化界面。一、三大核心特性，层叠性，多个样式规则可按优先级叠加，作用于同一元素解决样式冲突问题。 继承性，此元素可自动继承复元素的部分样式，如字体属性减少重复代码。优先级，不同类型的选择器，如 id 选择器、大鱼类选择器大于标签选择器，有明确优先级，确保样式按预期生效。二、三种使用方式，内联样式， 直接在 html 标签内通过 style 属性定义，适合临时调整单个元素。内部样式，在 html 文档的 head 标签内，通过 style 标签编辑，作用于当前页面外部样式，将样式单独写在点 css 文件中，通过令可标签引入可同时控制多个页面的样式。 三、关键功能，除基础的字体颜色、边框设置外，还支持弹性布局、网格布局、响应式设计，配不同屏幕尺寸、过度动画等高级特性。

大家好，欢迎来到今天的 css 技术分享，今天咱们聊 css 变量的使用技巧。 css 变量也叫自定义属性，是 css 三的重要特性，能定义可附用的值， 在样式表里反复引用，简化 css 的 编辑和管理。它的核心优势很突出，代码附用便于维护，支持 gs 动态更新， 能控制大局和局部作用。欲掌握 css 变量的技巧，能帮大家写出更灵活、好维护的代码， 今天我会从基本概念、核心特性、使用场景和最佳实践给大家讲明白。先搞懂 css 变量的基础用法， css 变量以两个横杠开头使用冒号复制，在 root 里定义的是全区变量，整个文档都能用 在特定选择器里定义的是局部变量，只在该选择器及其 子元素生效引用。变量要用到 word 函数，还能加第二个参数做默认值。变量每定义时就用它命名，规则要注意区分大小写能包含字母、数字、下角线和短横线， 不能有特殊字体。变量值可以是颜色、长度、数字等各种四 s 台的值。另外，变量支持继承， 局部变量能覆盖全局变量，现代浏览器都兼容，只有 i e 不 支持。再看 c s s 变量的四大核心特性，第一是动态性能，通过 g s 动态修改实现主题切换这类功能。 第二是继承性，紫元素能继承负元素的变量。第三是响应式设计，结合媒体查询就能适配不同的屏幕。 第四是性能和兼容性，它的性能和普通 c s s 的 属性差不多，动态修改不会触发页面重排，现代浏览器都支持。再来看一下实际开发中的常用场景，第一是主题切换，这是最常见的用法，给明暗主题分别定义变量集合。 第二个是响应式设计，把容器宽度、字体大小、间距这些属性设为变量，在媒体查询里修改变量值，就能让页面适配不同屏幕，代码更简单。然后是使用 css 变量的最佳实践，第一是命名规范， 用短横线命名法，变量名要清晰易懂，区分大局，组建状态变量。第二是作用域管理，合理，用 大局和局部作用域避免变量冲突。全局变量存、品牌色、基础字号这些通用样式，局部变量存组建专属样式，利用继承和覆盖规则形成效率。 第三是性能优化，别过度使用变量，只在需要复用或动态修改使用，按功能分类变量 加注式说明用途，减少 g s， 频繁修改变量，尽量批量更新。 第四是兼容性处理，给不支持的浏览器做降级，比如写两套样式，先写固定值，再用变量覆盖，确保页面正常显示。最后总结一下今天的内容，第一核心概念， css 变量是自定义属性，用 word 引入， 有大局和局部作用域，支持 gs 动态修改。第二 核心特性，动态性、继承性、响应式友好，性能优异，是现在是现代 c s s。 开发的重要工具。第三使用场景主体切换，响应式设计，组建开发动画效果，覆盖开发中的各种需求。第四最佳实现，规范命名，管好作用域， 优化性能，做好兼容，才能发挥变量的最大价值。 c s i 变量能让代码附用性更高，维护更简单， 建议大家在项目中全面使用，尤其是做主题策划和组建开发时，今天的分享就到这里，谢谢大家关注加私信领前端资料哦！

上期视频我们用 html 搭出了一个网页骨架，标题有了，段落有了，图片有了，链接有了，但打开一看，白底黑字图片干巴巴，链接就是蓝字，但下划线说实话有点丑。 这就像你盖好了毛坯房，但没装修。今天我们就来搞装修，用 css 给页面穿上好看的衣服。 css 全称 cascading style sheets， 中文叫层叠样式表，简单说就是用来控制网页长什么样的，颜色、大小、位置、背景、边框全都归他管。 css 有 三种写法，今天我们学最简单最直接的内联样式， 直接在 html 标签的开始标签里加上一个 style 属性，然后在引号里写样式。四大常用属性一学就会文本颜色 color 改文字颜色属性值 red blue， green pink 就是 对应的颜色。文字大小 font size 控制。字有多大单位一般是像素 行间距 line height 控制行与行之间的距离，行高越大，行间距越大。常用单位也是像素，或者用倍数。背景 background 给元素加背景颜色或背景图片。 text land center 文字居中 border 加边框 border radius 圆角 text verification none 去掉链接的下划线常用属性介绍完了，我们可以给上期生成的页面增加修饰了。将代码复制到记事本中，将后缀名改为点 html， 打开看看 是不是顺眼多了。下期科普页面弹框输入填写信息页面的交互是如何实现的？点个关注，下期带你揭晓！

我们这一期的任务呢是给网页化妆，利用 css 样式给上期设计的名片进行美化和优化，让名片更加好看。同时在本期课程我们还会进行一些经验的一个分享， 这些经验分享中的问题呢，会在我们写网页的过程中逐步出现，那么这些知识点呢，也不需要我们死记硬背， 只需要动手多练习几遍，记住问题的关键词就可以。实际我们在写代码的过程中呢，可以就是把 ai 利用起来啊，用这些关键词带上我们的主要的问题，就可以通过 ai 来获取详细的代码，以及代码的这些功能的一些解释。 好，我们接下来直接对我们上一期我们做的那个名片进行进一步的优化和美化， 我们来打开我们上一上一期编辑的名片这个文件。好好，我们在进行代码优化的时候呢，我们可以把我们 已经编辑好的名片，我们在浏览器里后打开，那么在代码的那个 调整的过程中，我们随时可以看到我们这个样式的一个变化。好，这是我们上一期做好的名片， 接下来我们进行一个代码的优化，那怎么优化呢？首先我们可以看一下，那么这个名片我们首先是不是可以给他在网页上这个展示的效果，我们可以给他这个 外边框，然后这个边框线我们给它加一个圆角，这样就看起来更舒服一点。好，那么圆角的代码属性怎么加？那么要加的是给什么加呢？是给这个最外面这个 dna 盒子，就是我们这个名片，这个 卡片样式是给名片，那么仍然是给他来写样式，因为这个 diy 盒子他的那个样式给他起的那个类的名称，那就是名片。好，我们在这里来再另起一行，那么我们要给他加什么呢？我们要给他加一个圆角， 那么圆角就是它切换到英文 other videos 圆角，那么圆角的值，我们可以给它设置个十个像素。 好，那么圆角设置好之后呢，我们保存一下来，再切换到网页页面来 f 五刷新一下。好，我们可以看到这个圆角已经出现了，那么我们如果觉得这个圆角 有点小，那我们只需要把这个数字给它再增加一下就可以保存，记得一定保存，保存完了之后再切换到网页进行刷新。 好，那这个看着舒服了一点。好，接下来我们给这个名片在这个页面让他显得稍微有那么一点立体感，那么我们就可以给他加一个阴影啊，那么阴影的代码来可以看一下 盒子的阴影 box shadow 啊，那么它的属性值呢？是，我们先看阴影加多少啊，来下八个像素，那么前两个就是它的 call， 靠右靠下他的阴影，然后接下来第三个参数是他阴影的模糊度的，一个阴影，好，那么模糊度我们先给他给个零啊，然后接下来是阴影的颜色， 阴影的颜色，那么我们阴影的颜色的话，我们随便给个值啊，给个灰度值吧。啊，给一个， 总共是六位啊，大家记住这是一个颜色值，关于这个颜色值啊是怎么回事，我们后面会具体会讲到，我们现在 不需要详细的追究，他只是给他定了一个颜色，跟上面这个一样，这个是啊，像接近于黑色，那么纯纯黑色就是六个零啊，那么三三三就是比黑色那个黑色的值稍微浅一点，九九九的话那就是接近灰度色。 好，我们保存，保存完了，然后我们再刷新一下页面啊，我们来看一下， 好看，这个名片的立体感就已经有了，那么有了，我们刚才看一下它的阴影， 阴影这个边缘线是清晰的啊，然后我们有时候是为了模拟出现实中影子那个有一点那个模糊虚化的效果，那么我们只需要给这个第三个模糊的值，我们给他来个五 啊，五个像素值保存， ctrl s 保存，然后再切换到网页，我们再 f 五刷新一下。哎，大家可以看到这个阴影就边缘有一个模糊的这么一个效果。 好，那么这个名片的那个圆角加了个圆角，加了个阴影啊，然后看起来更具立体感。 但是呢，中间这个名片的这个排版这一块我们还是要继续进行优化，一般情况下这个名片的这个公司的名称啊，这个文字号会大一些，所以我们要对这个公司名称啊 这个字号进行一个修改。好，我们再切换到代码页，我们来看一下，那么这个 公司名称啊，是这一行，这一行我们昨天其实都在写 css 样式代码的时候已经看到了，如果我们对这个屁直接写样式的话，那所有的屁元素它的文字都会变，那我我们要只对这一行进行一个字号的一个设定，怎么办 啊？也是一样，就像这个姓名这一块一样，我们也给他起一个 class 的 名称， 这个 class 就是 标准的啊啊，专用名词啊，叫类类名称，这个记不住也没关系，我们给他起一个名字，叫什么呢？叫企业 name。 好， 英文学的不太好啊，我们就是中英结合吧。这个没关系啊，我们叫企业 name。 好， 保存一下，然后接下来我们要在样式里头给这个企业 name， 我 把它直接复制下来啊， 免得敲的时候错一个字，那就不起作用啊，也是一样，前面加一个小点，然后把这个名称一写，然后是同样的花括号，花括号里面就写他要给他定义的样式。 好，我们要改的是什么呢？我们要改的是什么？是他的字号，是他的字号，那么字号你看可以看一下这个内姓名的这个 find size 就是 它的字号。好，我们把这个可以直接复制下来啊，要快一点，然后这个字号那要比姓名那个小，那我们可以把它定义成，定义成二十个像素。好，我们保存一下， 保存一下，然后我们再切换到浏览器页面。好，我们刷新一下。好，大家可以看到这个公司名称的字号已经，哎增大了，但是还是有点小。好，我们再把它增加一点，到二十四行字保存 刷新。好，那这基本上就是我们所想要的一个效果了。好，接下来我们看一下还有哪些地方要进行一下优化， 那么大家可以看一下，我们让想让这个电话和这个地址这一块，这两行能进行一个左对齐。 好，那么这个我们来再看一下那个代码，那么让刚才那个文字，整个名片里头的文字，大家看这条代码就是都是让他文字的对齐方式，是居中对齐， 居中对齐，那么我们现在对这个页面要地址和电话这两行，我们想让它是靠左啊，靠左对齐，这个时候我们就要对它进行一个样式的一个修改， 我们来看一下，那么地址，电话，地址，电话这两行，哎，在下面，那么我们给它也起一个名字，也起一个名字啊，起个名字就叫 text left 啊，就是文字做对齐啊。好，那么我们要让这两行就是地址和电话都做对齐，那么我们把它复制一个 啊，给它两个起一个同样的名字。好，大家可以看一下，那么它们两个起了一个同样的名字，那我们给只需要给这个复制一下啊，给这个 text left 给他进行一个样式设置的话，那么这两行用了同样同样的这个名称的，那他都会啊，受到这个属性的影响。好，我们接下来继续写， 也是一样啊， class 的 名称前面加一个小点，好花括号，空两空两格。好，那么我们要用的是文字的一个对齐啊， text i like， 然后给它 left 好 保存，保存完了之后我们再来切换到浏览器页面，我们进行刷新。 好，刷新以后它倒是左对齐了，倒是左对齐了，但是呢，它一直对齐到这个整个外边框的最左边了， 那我们想要的是让他跟这个公司名称这对齐怎么办？好，我们接下来就要引入一个新的一个 css 样式的一个代码，就是它的内边距。好，我们来看一下啊，那么我们给他加一个 左边句啊，这个是边句那边句，那边句的左啊，那边句的左边句啊，我们给他来个大概，先估算一下，写个二百像素， 好保存保存一下，我们来看一下这会产生什么变化的页面，再来刷新一下。哎，好， 我们可以看到看到他的那个这两行屁，也就是段落元素，他 本来他的文字起始点应该是最左边啊，这个边框线挨着边框线，然后给他加了一个左边的内边距啊，内边距，然后他就到这了，就相当于他前面加了空格，二百像素的空格那么多了，那我们就调整一下， 调整到一百保存好，我们再来上线一下，哎，一百又有点少，我们再切换到代码，那么一百四呢？保存 好，这个样式代码美化呢，就是一个慢工出细活，好，哎，差一点多了，一点一百三保存 好了。好，那么我们这个名片的美化，我们已经达到了自己想要的一个效果， 那么更进一步的美化呢，我们在后面的具体的网页模块分解当中，我们同样的这些知识点会用起来做更漂亮的那个卡片的一个布局和样式的一个设设计。 好，接下来我们要今天分享一些知识点，那么这个美化当然也不是最漂亮，那我们后面还考考虑可以加上公司的 logo 图片，那么因为这涉及到那个图片元素的一个知识，我们后面会讲到。 那么接下来我们看一个问题啊，第一个就是影响 dna 盒子大小的因素啊，我们现在要看一下，在这再新增加一个知识点， 我们当对这些样式页面样式有问题的时候，我们，嗯，有时候直接跟代码看，它这个对照性是看不到的，那这时候怎么办？我们在页面在这个元元素的位置点个右键有个检查 好，大家看一下，那么右键这个检查点点中以后，大家可以看一下，大家可以看你看 看这是地址这一行，它前面就有空格，空格我们现在需要了解的大家可以看一下啊，我们看一下代码里边我们给这个 d i v 的 盒子定的大小是什么？看宽度是五百，高度是三百， 但实际上大家有可能没有注意到啊，我们这个网页在设计样式的过程当中呢，这个 diy 盒子这个名片，这个 diy 的 盒子的大小尺寸已经产生了变化， 我们看一下，直到这个 diy 看大家看 diy 名片这个位置，大家可以看看我指向的时候，在这个， 在这个页面啊页面这会出现一个 d i v 的 一个大小，成了五百零二 乘三百零二，那么它的高度和宽度各增加了一个像素， 那么这个问题其实是很关键的，我们在后续在多个 diy 盒子啊并排啊排版的过程当中，或者说是不管是横还是行还是列，那么多个 diy 在 排排版布局的过程当中， 如果它的尺寸啊产生变化，就会影响到旁边 diy 盒子的一个位置变化， 那我们就要求那么我们在这个盒子进行属性设置的时候，他的外框大小，他的尺寸不要变化，那么这个多出来的两个像素是什么呢？那我们直接告诉答案， 就是给他加的这个，大家可以看加的这个边框线，边框线因为是一个像素，那么他是一个矩形，那么左右上下相当于各增加了一个像素，加起来他的宽度和高度就增加了两个像素。那我为了验证一下，大家可以看一下啊， 可以看看一下，现在呢他是五零二乘三零二，我们如果给这个 bottom 啊，就它的边框线加上两个像素，那么大家可以计算一下，两个像素的话，它左右上下加起来相当于它的宽度，高度是增加四个像素。好，我们保存一下，保存一下，然后再刷新一下 网页。好，大家可以看一下，这个黑色的边框线，由一个像素变成两个像素，它变粗了，那么我们同样鼠标定位到这个 di 像素，我们可以看一下，看一下它的那个 宽和高都已经变成了五零四乘三零四。好，那怎么解决这个问题呢？很简单啊，也是在代码上来进行一个设定。好，那么这个解决问题的代码叫什么呢？就是 box seven， 就是 盒子的尺寸，盒子尺寸的计算呢？ bottom box 什么意思呢？就是盒子的外尺寸大小，以这个包的边框就是一个包的边框为界限，那么你这个设定完之后呢，你的外 外外框线，它的粗细只会往盒子内部的收缩，占用内部的空间，那么盒子的整体大小是不变的，我们保存一下啊，保存一下，我们看一下，起不起作用啊？起不起作用，我们来看一下。好，再切换到页面 来，我们刷新一下。好，大家有没有看到这个，刚才这个刷新以后，这个 d i v 这个盒子已经往回缩小了一点啊，我们来看一下，大家看现在 现在这个它的宽度高度是五百乘三百，没有产生任何变化。好，那么这就是我们解决这个 d i v 盒子外尺寸啊，不要受里边内容 这个变化的影响啊，这就是他的那个以他的外表格，然后就是这个 dna 盒子吧，以他的外框线为计算尺寸的一个最大的一个边界线啊，那么你内部的这些内容设置都不会超过他这个盒子的大小。 好，这是我们啊要刚才今天要分享的第一个问题啊，就是影响盒子大小的因素，那么可以通过这个 css 样式，也就是 box size 啊， 定义为 border box， 然后就可以解决这个盒子被称大的一个这么一个问题。 那么接下来还有一个就是同一个 html 元素指定多个样式名称的一个用法 啊，包括还有内容溢出的问题。解决那么这两个问题，我们来做一个演示和测试啊。好，我们把这个 div 这个盒子啊，就我们设计的这个名片，我复制一个， 好，复制一份，然后来放到下面来，我们把它再复制一个，大家可以看一下啊，那为了为了区别一下啊，嗯，把这个姓名改一下啊， 好，随便起个名字啊，我们这是一个好副总经理，好公司一样，我们保存一下，保存一下，先看一下，看一下我们的刷新一下那个页面啊， 好，把这个关掉，大家可以看一下，我们现在这个页面上有了两个名片了， 有了两个名片。好，我们在第一个名片的基础上，第一个名片的基础上我们再增加一些内容，现在这两个名片因为它的样式名称是一样的，只是内容不一样，样式名样式都是一样的，所以它出来的，大家可以看一下它的布局，什么都是完全一样的， 现在我们要看一下，我们如果说，如果说给这个， 给第一个啊，第一个，我们再来加一个，加一行，那么这一行就不叫电话了，叫邮箱啊，邮箱随便写一个吧。啊， 好，我们保存一下，保存一下，然后我们再看一下，来刷新一下页面。好，大家看一下，这个邮箱呢，已经在下面这一行了，我们再来再加一行啊， 再加一行，地址，地址下面加个油边，这个大家可以随便加啊，可以随便加油边， 右边啊，右边就随随便写一个吧。啊， 我也不知道右边是多少，随便写好，保存，保存完了之后，我们再到页面来，我们刷新一下，好，问题出现了，问题出现了，在这个位置大家可以看一下， 因为第一个名片我们多加了两行，那么它的内容就已经移出了 啊，就跟水灌满水缸以后溢出了，溢出到了他这个 diy 盒子的第一个 diy 盒子的外边，跑到了第二个 diy 盒子的这个位置这个里边。 那么这个问题怎么解决？我们在网页排版的过程中是不希望出现这种越界的行为的啊，因为你从自己的盒子跑到别人的盒子里边了，那么 对于这个页面的直观的感受就是这个文字都串行了错乱，如果再加一行的话，跟这个字都有可能产生重叠，这是我们不希望出现的这个样子。好，那么这个问题怎么解决？我们今天再引入一个， 再引入一个代码。好，我们再来看样式代码，那么这个问题要解决的话，我们继续给它往下加，我们加的话，那么有一个来切换的英文啊， 好，就这一个代码啊，那么这个指的就是它的内容啊，内容就是 多出的内容，怎么办啊？那黑灯就是隐藏啊，黑灯就是隐藏，那么除了这个隐藏的话，后面我们还遇到有一个就是让他出现，那个就是滚动条，那这个的话就是直接让这个 diy 盒子 啊溢出的内容进行隐藏。好，我们保存一下啊，啊，现在不要刻意的去记这些代码，你只需要记住，记住就是 diy 盒子啊，它的溢出啊，你问 ai 的 话，只需要问 css 代码解决内容溢出问题， 哎，他就会给你给出这个 overflow 啊，黑灯这个解决方案，包括还有详细的解释。 好，我们再来切换到页面，我们来刷新一下，看一下，好，看，一出问题已经解决了，一出问题已经解决了。好，那么有人看到这个一出问题解决了，说那一行内容不见了呀，那么这一行内容没显示怎么办？那我们这就是 啊，下一个问题，我们要调的就是这些内容之间的一个行距啊。好，当然在本期我们暂时先不讲这个，后面我们会用到这个相应的代码来调整它行与行之间的间距。我们现在是先把今天这个问题抛出来，然后提供一个解决方案。 好，接下来我们再看一出问题，一个解决了，然后还有一个呢，你看同一个 html 元素指定多个样式名称的用法啊，指定一个多个样式名称的用法，比如说我们现在好看这个页面， 我们现在这两个啊，我们这两个名片他的格式基本是一样的，但是呢，我们想让第二个名片，想让第二个名片，我们让这个 北京啊，旺旺科技，我们让这个公司名称变个颜色，变个其他的颜色的字啊，显得与众不同一点。那这个时候怎么办？我们就要 对他也要进行一个样式的改变，但是样式改变的话，因为他们两个目前用的是同一个样式，我只想改变其中一个， 那么我就要对他单独再指定一个啊，样式的一个啊，样式设定的一个名称。好，那么我们来找到第二个啊，这个张思，这是名片，好，我们给他啊，多个多个那个样式名称的啊， 使用的话就是中间加一个空格。好，我们起一个名片二，我们可以看到啊，他有了两个名字，一个是名片啊，一个是名片二。好，那我们这个名片二复制下来，给这个名片二指定样式。 好，就放到这了，他这个排序是不影响他的使用，也是一样一个小点。好，名片二，好， 好，那么我们要给它定义什么呢？定义它里边的内容的颜色啊， color， 好， 我们 blue 啊。好，暂时先用英文吧，用英文也是可以的，或者用颜色值，但是颜色值我每次不查表，我也记不住那么多的颜色值，因为都是数字啊。好，保存了之后来我们可以看一下啊，再刷新一下页面。好，哎，有问题了， 有问题了，加错了，整个都变成了蓝色，我们刚才只是说要给公司名称加加蓝色。好，那就说明这个 这个样式是起作用了，但是位置没放对。好，把这个名字挪走，哎，剪切很简单，剪切是给这个啊，这里这里这里好， 是给这个公司名称要加的，好，加到这里了，看中间一个空格就行了啊，多个，那么你理论上你可以加很多个啊，好，保存，我们在页面再来刷新一下。 好，大家可以看一下，那么一个啊，同一个元素，那么这一行同一个这个屁元素，段落元素，这个呢？第二个名片，我给他加了第二个名称，叫名片二，给名片二指定了一个字体，就是字体的颜色，他这个就变成了蓝色，那么第一个是不受影响 的，是因为他没有带这个名片二这个名称，所以对他不起作用啊，这就是用多个， 那么接下来还有今天的一个新的一个元素知识点，你看我们看我们对这些文字要进行加粗的时候，你看这都是给他这，大家可以对照一下代码地址右边，你看大家给他加了个 b， 就是 应该英文就是 b 的， 就是那个加粗的粗体字的意思啊，你看可以看一下啊， 给这个加了一个 b 的 元素，那么如果是给整个一行字，整个一行字我，你看我们用的都是 p 段龙，整个一行字如果要加粗，他是黑体字，你看起来好像是加粗的啊，但是实际上没有加粗，我们如果说要给这个公司名称要加粗， 那么我们可以换一下，我们可以换一下啊，换什么呢？我们把这个 p 元素它换成了一个标题元素啊，在这直接修改一下啊，直接是 h h 一。 好，那么相应的一定要注意后面这个也要改成 h e， 那 么 h 一 就是在排版过程中标题字号最大的标题，那么由 h 一 一直到 h 二、 h 三到 h 六， 就是咱们就像咱们在文字排版软件里头那个大标题小标题，一路签套下去，然后把这个改成了 h 一 了，那好，那么我们给第二个名片，赵五思这个 改了一个 h 一 公司名称，上面这才用的是屁，这个段落元素，我们来保存一下啊， ctrl s 保存，然后再到网页这一块，我们再刷新一下。 好，我们看一下这个公司名称加粗了，因为标题默认就是有加粗的样式的，这个标题元素你看这个是没有加粗的，虽然它都是一个黑体字这个样式。 这就是我们今天在这一期美化的过程中，我们新增加的一些概念啊，包括布局的一个排版啊，左边句还有一出问题的解决，包括这个引入标题元素 啊，引入标题啊，当然大家可以这个 h 一 h 二，大家可以自己都测试一下啊啊， h 一 是最大的标题，如果我把它改成 h 二，记住一定改的话，这个也要改成 h 二啊，如果不改，我们看会不会起作用啊？这是 h 二，这是 h 一 啊，我们看一下 看，好像还是有作用的啊，但是这样的话，因为 h 一 跟 h 二它都是 h， 我 们来把它改成一样的，看一下，刚才字号好像大小没变，我们来再刷新一下， 嗯，好像就是没有变化，那我们把它稍微改小一点看一下啊，改成 h 四呢？ 新问题又出现了，看 它只是这个这一行的上下的这个间距啊，间距变化了，字号没有变化，那问题出在哪了？你看写代码的过程中，你想改变一个样式，那后面就会出现新的问题， 为什么我对它已经定义了它这个字号没有任何变化呢？好，我们来看一下问题出在哪里？ 问题出在哪里？看一下我们给名片里边大家可以看一下我们给他整个的这个文字啊，文字你看大家可以看一下他有一个什么呢？有个企业内幕，大家看到了没？ 企业内幕给他定的是二十四，看到了吧？好，我们来看一下这个公司名称这一块，看有个企业内幕名片，我们把这个要去掉， 那么在这就是提一下，我们后面会专门讲的就是 h 四本身有它自带的一个样式，就是 h 一 到 h 六 本身有自带的样式，但是如果你给他在本页面内，就是在你写的代码里头给他自定义了样式之后，那他这个自定义的样式优先级就最高了。好，我把这个删掉，我们来看一下啊，删掉 保存。现在是 h 四了啊，我们来看一下，再刷新一下看，这就是 h 四的一个大小， h 四的大小已经变小了。好，我们把它再改回到 h 一， 看一下 h 一 的实际的字号是多大？ 好看， h 一 明显就有点太大了，我们把它改回到 h 二吧。好，改回到 h 二以后呢？后面这个 h 一 我先不动，看它子号有没有变化。这是 h 一 啊，刷新 看有变化啊。现在浏览器的那个对代码解析的那个容错率，应该说某种意义上那个容错率还是比较高的，那么到 h 二的话，他其实已经用前面这个 h 二已经给你 对标了啊。好，他的文字大小的 h 二。好，那么 h 二就跟我们前面这个设定的这个二十四号字啊，二十四像素的文字大小基本相当。 好，那我们本期呢，对这个名片的这个美化啊，就先进行到这， 这只是一个初步比较简单的一个类似于卡片样式的这么一个啊，名片的这么一个设计 只是为了让大家快速的进入到网页代码，直接写代码的这么一个状态当中来。 那后面接下来下一期我们会进行 d i v 盒子常用排版属性的一个讲解， 让大家快速的掌握那个排版的问题啊。比如说我们现在是上下排版，那我们之间两个挨到一起了，是不是让他不要挨到一起？或者说让他怎么样能，你看让他左右排列，现在我们加了两个 d i v， 他默认的就是上下拍的。那为什么是这样？我们在后面的课程中会详细给大家讲解。好，我们下期再见。

大家好，我是黄九华黄老师，这一小节我们来讲一下如何使用 ai 创建我们的系统首页。 系统首页是我们整个项目的风格最重要的点，通过它确定以后，然后我们其他沿用它。所以说这个系统首页是我们创建，使用 ai 来创建，比如我们的旅游景区，景点订票系统的一个最重要的环节。 那么这里是我整理的一些经验啊，你使用 ai 来生成一些项目啊，你不是就写一句话，请用最新的什么生成一个界面，一句话啊，它是不能生成合适的项目的， 那么我们在这里生成的时候，首先那么我们这里用的是 bootstrap 框架，那么当然是你用其他的 ai 框架原声的也可以生成这个系统的首页，我们这里只生成系统的首页啊，生成完以后再根据首页，因为你可能要改动，改动完毕以后再去后面生成它的页面， 它有其他哪些页面？什么用户注册登录景点信息，是不是我们功能列表前面你做，用 ai 做这个系统你要自己想出来啊。然后接下来我们要写这样的首页，首页页面进出来，再去做其他页面， 那么动态效果，如果说我们要用字库好，我们很多图标用 font 和 style， 当然你用其他字库也可以。 如果用到图片，图片文件夹里的素材，看到没有？我们刚才在这里，在我们这个项目的页面下面，图片文件夹是不是准备了这些图片啊， 让 ai 自动去识别，也就是说我们用到图片，图片里的文件夹，素材图片啊，找不到，可以用网上告诉 ai 它的一个规则，时间的话啊，我比如说请定于二零二七年，二八年，二九年，那么颜色素材图片自行搭配两屏啊，这里 下面的话就说顶部啊，中间查询，那当然说你这一块不要的话，那么这一块让它怎么布局，不要的话它就会自由发挥。 那么打开我们的 weos studio 啊，那么也是 code， 那 么首先我们在这里啊，我们文件，那么这里是打开文件夹，我们是整个文件夹，那么我们来看一下啊，那么这里是我们的，这里是 ai 加 weos studio code 啊， tree 开发我们的界面项目啊，这个文件夹里面是素材点选择，选择完以后他会重新加载一下啊，那么我们要信任 啊，这个一定要点是信任，是作者里面要写代码，那么本身啊，我们在这里面啊，这里面是我们的图片素材啊，我们把其他的，呃一些不关不关心的从录像，我们先把它一个位置啊，一个位置，那么这里就是存我们项目的文档和图片代码，图片在这里， 那么接下来我们 ai 在 这里啊，我们可以看一下啊，我们打开这个去点击它，那么我们本身，那么它就可以实现去交互了。 回到我们的这个 ppt， 那 么我们把我们要 a ai 去执行的这个脚本啊，我们 ctrl c 复制一下，回到我们的这个 v s code 这里，那么与 q 写作，那么看到没有，这里的话，我们复制过来，复制过来以后，那么点一下发送 在这个地方啊，我们可以有多种，那么 kimi 啊，然后是我们默认是 deep sec v 三点一啊，我们先用默认的，那么点一下这个发送按钮，那么这个时候啊，我们在这里的话，我们看一下啊，那么 去 ai， 它来帮你生成一个系统界面，它检查它的项目可用图片创建啊，教求什么使用 bootstrap 啊？是看到没有图标，那么在这里我们看到没有这里生成的时候，它是使用的是 c、 d、 n， 那 么当然说你也可以把这些下载来， 那么 ai 生成的话，可以先用 c、 d、 n 给到它，然后在这里就生成这些代码，看到没有？一行二行准备生成，当然说这个生成的过程我就不录进去了，我会再给它剪切掉，最终给大家看下生成完的， 这是生成的中间过程啊，我中间剪掉以后也给大家放了一点，这是生成的一个过程啊，大家可以看到 ai 正在生成， 我们看一下啊，他的右侧的一个时间，那么基本上是十二点五十多，那么不是网上说的那种几分钟一两个小时能全部搞完项目的，他是有很长的时间的啊， 基本上这里是生成完，我们在页面这里生成完代码以后，看到没有，他会告诉你我们这个网站的一个特色说明，那么这样的话到下面，那么我们基本上是生成完毕整个项目的这个首页啊， 首页的这个说明，那么我们可以在这里啊，在我们本身这个项目这里，我们新建一个文件夹啊，新建一个说明文件，我们叫说明点 md， 然后 把我们这个 ai 的 这个网站的特色说明这一块我们可以复制一下啊，复制一下右键，那么可以放到说明点 md 文件里面， ctrl s 这里保存，然后接下来我们这个页面生成以后，那么我们可以在这里看到没有，这个是复制代码，这个是直接生成一个文件，那么我们生成这个文件以后，需要 ctrl s 保存一下， 保存的话，那么我们比如这里就叫我这里有以中文来好了，那么这里叫网站首页点 html， 好， 我们回车保存一下，然后回到我们这个文件夹是不是就有了？我们先打开看一下啊，那么深层的这是我们 我们键盘上 f 五刷新一下啊，刷新一下，从上到下来看一下，这是我们的 logo， 你 可以去换相应的一些功能菜单， 然后是热门的景点推线啊，鼠标放上去特效都有那么精品线路，那么这里是相应的统计， 看一下下面这些颜色，它就生成的不对了，那颜色你要肯定是改成白色，那么我们后面去调整，当然说我们先初步的让大家了解，那么 ai 如果是生成页面啊，本小姐先说到这里。

亲爱的同学们大家好，欢迎回到我们全站 ai 编程课，三个月让你从编程小白成为全站主理人。在前端三节课中，如果说 html 负责定义网页的结构和内容，那么 css 就是 页面的美化师， 全称 cascading style sheets， 中文叫层叠样式表，是一种用于描述 html 或 xml 文档呈现方式的样式语言。它允许开发者为页面元素定义颜色、字体、 编剧布局方式啊，以及动画效果，从而实现内容与表现的分离。一个典型的 css 规则由三部分来组成，选择器、属性和值。 例如我们这边的 recipe card 啊，在这里，那我们这边有什么写的 border 啊？ one p x， 然后有 padding 十五 p x 啊，然后 margin bottom 二十 p x 啊这代代码。那其实你们只做了一件事情，就是给菜谱卡片加样式。 那这里的 recipe card 呢，是我们的选择器，意思是找到所有这个 class 啊，叫做 recipe card 啊，就是这个哎的 html 元素后面的这些内容就是在告诉浏览器给它一条边框 内部留点空，空间卡片之间拉开距离。首先呢， css 就是 实现的内容与样式的完全分离， hml 只是关注结构， css 是 负责外观， 那这种分工显著提高开发效率和代码的可维护性。其次，样式文件可以被浏览器缓存，减少重复加载，从而提升页面的加载速度。 同时呢，通过统一的样式规范， css 能够增强页面的视觉一致性， 然后帮助建立清晰的那种品牌识别度。 css 通过选择器来定位 html 元素，常见的有标签选择器、 类选择器和 id 选择器。那每个 html 元素在 css 中都被视为一个核模型， 由内容区，内编句，边框还有外编句来组成。理解和模型都可以进行页面布局的基础。在布局方面，现代 css 提供了 flexbox 和 grid 等强大布局方案 啊，用于控制元素的排列和对齐方式。此外， css 还支持过渡啊，动画等效果， 进一步增强用户的一些体验。那这一页我们来讲一下 css 在 html 中的引入方式。我们先看一下外部样式，表示将 css 写入独立的 css 的 文件，然后通过 link 这个标签来引入它。 我们这边看的就是所谓的 link 啊，这个 style sheet traffic style css， 那 优点的话呢，是样式与内容是完全分离的，便于管理和维护。那 css 文件的话呢，可以被浏览器给缓存嘛，所以它提高了加载速度。 那同一份样式文件呢，可以附用在多个页面里面，那保持我们的风格一致，那这是最推荐的方式，也是现代 web 开发中最常用的一个做法。 那我们还有内部样式表， ok， 就是 internal css， 其实就是将 css 写在 html 文件的 style 标签中，比如说我们看这版 style 里面，然后这里有个 body right， 适用场景呢，就是样式指作用于当前的一个页面， 样式代码量不大，页面就比较独立。那么缺点呢，就是它无法附用多个页面，要重复写 样式和内容藕合，不利于维护。这类样式的话呢，是直接写在 html 元素的 style 属性中，例如我们写在 p tag 里面，对吧，或者说我们可以写在 h one tag 啊，或者说 div tag 里面。 right， 我们在写 iptag 里面，就直接在 tag 里面加一个 style， 然后 color blue， font size， 十六 p x， 那 这个字体的大小的话就十六 pixel。 特点呢，样式只作用于该元素，写法很快速， 很适合临时的调。缺点，样式与内容的紧密有合啊，那就是不易维护，然后也不符合，不要重复自己的原则。如果你 有多个 p tag 要写，每一个 p tag 的 话，你都得写一次，我要蓝色，然后放在十六，对不对？那以后想要去改， 你就是每一个代码都要去改变，那就很麻烦。哎，那这种的话就不适合大规模的啊项目。那我们继续讲讲 csi 选择器类型于优先级，从高到低依次是 id 选择器， 类选择器，标签选择器以及其他选择器。能理解，优先级能够帮助我们避免样式一些冲突。那标签选择器的话是直接使用 html 的 标签名，比如 h one p 或者 diff right， 然后它会作用于页面中所有该类型的元素，优先级较低，通常用来设置基础样式啊，例如字体啊，颜色啊等等。那我们举个例子吧， h one color， 这会让所有的 h one 标签文字是呈现红色的。 类选择器在类名前加点号，例如我们这个点， recipe card 或者点 main header， 它可以应用于任意元素， 一个元素也可以有多个类，所以你可以在一个 def 里面加上一个点，比如说 a main header 一 样，对不对？适合啊？组建样式或者重复使用的一些样式，例如我们去看一下这个吧， right， recipe card， border one， p x 啊，然后 solid， 然后一九，一九九九啊，这个代码就是要带给 recipe card 的 类的元素 啊，设置边框和这边框的颜色。最后是 id 选择题，在 id 前加井号，例如 hashtag 井号， main header， 每个 id 在 html 中必须为一啊，因此它只能选择一个元素，优先级最高， 适合页面中唯一元素的一个样式。例如我们这边的 main header， background color 是 零零零零零零。那么总结一下就是，标签选择器是优先级最低啊，基础样式啊，类选择器中等优先级，可服用，很灵活。 id 选择器优先级最高，用于唯一元素。然后这一页我们来讲解 css 和模型啊，这是前端布局的核心概，在 css 中，每个元素都可以被看作为一个矩形盒子， 由四层组成，内容 content， 内边框、 border 和外边距 margin。 理解这四层的关系，对布局和样式控制非常关键哦， 你先看内容层啊，它就是元素里面显示实际内容，比如文字、图片啊，内容的尺寸由我们的 width 和 height 来控制，简单来说，内容决定了核子最核心的大小。 接着是内编剧，也就是 padding， 它在内容和边框之间负责保持内容和边框的间隔， 可以通过 petting top， petting right， petting bottom 和 petting left 来单独设置， 也可以直接用 petting 一 次性设置。内边句会扩大盒子的视觉占用，但不影响外部的一些布。那再往外就是边框了，边框包围着内容和内边句， 可以通过 border width， border style， border color 来定义。那边框的话呢，不仅起装饰的作用，它也会增加盒子的一些实际的一些尺寸。 那最外层就是它的外边距，也就是 margin， 它控制元素与其他元素之间的间距， 那通过 margin top， margin right， margin bottom， margin left 来设置，那外编辑不会影响元素的内部， 但会影响整个页面的排版。总结一下和模型的四层，从内到外就是内容啊，内编辑啊，边框和外编辑。 掌握和模型可以帮助我们精确的控制元素间距和整体布局，让页面的排版就看起来更可控。 然后这是我们 css 中的 flexbox 弹性布局。 flexbox 是 css 三引入的一种依维布局模型 啊，它的设计理念就是让容器内的项目排列对齐和分布更加高效和灵活。 我们先说容器的属性，通过 display， flex 就 可以开启 flex 布局。 flex direction 决定主轴的方向，也就是项目的排列的主要方向啊。 flex wrap 是 用来控制项目是否换行。 justify content 让我们轻松在主轴上对齐项目。 align items 啊则是控制交叉轴上的对齐，而 align content 则是多行布局时的整体对齐方式。 我们再来看一下项目的属性，每个项目都有自己的灵活性， order 可以 调整显示的顺序。 flex grow 定义增长比例，让空间平均分配或按比例扩展。 flex shrink 控制收缩比例。 flex basis 是 设置项目的基础尺寸， 而 align self 则允许单个项目覆盖容器的对齐规则， 实现自我对齐。理解 flex 布局还要搞清楚主轴和交叉轴，主轴就是项目排列的方向，交叉轴则是垂直于主轴。合理使用这些属性，我们可以轻松地实现居中、 等分、换行，甚至自适应的一些布局，让页面结构既整齐又灵活。 总之啦， flexbox 提供了就是一套完整灵活的布局方案，让我们可以用最少的代码实现现代 web 的 页面的高效和精准布局。接下来我们来讲 css 中的动画与过渡， 过渡效果主要用于元素状态变化时的平滑过渡。那那比如我们的鼠标悬停或者类名切换。 基本语法就是用 transition property duration， timing function delay。 其中 transition property 指定需要过度的属性， transition duration 是 设置啊，持续时间啊， transition timing function 啊是控制过度的曲线， 通常有 es 啊， linear is in 啊和 es out。 而 transition delay 是 可以延迟开始， 动画则更适合创建复杂的多阶段的变化。通过 at keyframes 啊定义不同的时间点的样式。基本语法是 animation name duration， timing function delay， iteration count direction。 常用属性包括 animation name， animation duration， animation iteration count 和 animation direction。 例如我们可以通过 keyframes post 定义一个元素逐渐放大再恢复的一个动画， 实现视觉上的一种呼吸效果。比如说我们在网页上看了一下按钮，把你的鼠标给停在那个按钮上面，他就就突然变大了，就看起来好像让他在动鼓了一个包一样，然后又就下去了。 好啦，总结来说啦，就是 transition 很 适合状态变化的一个简单平滑过度，而 animation 可以 实现复杂多阶段的一些连续效果啦。那我们下节课讲 javascript 啊， c s s 就 讲到这边，你们如果想要玩任何跟 c s 相关的，真的可以上网去 找些什么 c s s playground 科学上网，同学们再见。拜。

水滴石穿，量变引起质变。哎，学习还是要学的啊，学一下啊，不要以为 ai 出来了之后这些东西就没用，好吧，好，这次我们学一下这个东西啊，学一下这个啊，叫 cs style shift 啊，这个构造函数。 对啊，之前那可能大部分前端就是想要在页面中插入一段样式代码，哎，都是这么实现的，就创建一个 style 元素，然后用 int 秒，哎，把那个 cs 给 写进去，但这个实现有什么问题呢？就是它只能是字母串操作，对吧？如果我们想新增一段样式，你很麻烦，比较拼接，然后我们也不能解析里面的这个具体的某个规则，对吧？比如像我要删除里面某一段样式，就很难处理，哎，这个时候就推荐使用这个 cs 这个同步方法，把我们代码写进去，然后再复制进去 就 ok 了，就 ok 了。然后它有什么好处呢？好处就是它里面这叫 set 啊，这个构造函数对象里面它有很多这种属性和方法，这里这里只展示了一些方法，可以删除、添加、插入我们具体的规则，尤其是这个啊，这个方法，这个新方法就是同步切换规则方法， 欸，这个应用最多的好吧，然后，欸，这个方法创建 cs 呢，它在页面中是找不到对应的盗墓元素的，它有个专门呢叫做 construct style sheet 啊，构造样式在这个里面欸，就就可以逻辑代码就非常的干净好吧， 哎，然后它兼容性也非常好，哎，这个所有的同学都应支持啊，这个是放心大胆的使用好吧， ok 啊，就这个东西啊，是不是学到了？ ok， 感谢观看，记得点赞！

hello， 大家好，我是多多鱼，好久不见。这个视频是 html 加 css， 非遗主题文化第六个视频，之前的视频呢，我们分别把这个导航部分，大图部分，非遗概览、非遗分类、 非遗故事以及非遗传承人给介绍完了，下面的三个视频呢，我们将把保护与发展联系我们以及底部这一块给做出来，都是比较简单的哈， 还是一样，如果有需要这个本套就是这个视频系列的这个代码的话，可以看一下视频的最后右上角会有一个这个编号，然后主页 加一下，然后输入编号就 ok 了啊，我就会给你发代码啊，之前的也可以。然后呢，还是一样，我们上来以后呢，我们先分析什么呢？先分析这个目录结构对不对？好，稍等啊，我把这个画笔工具给打开，让大家更清晰的去看到它。 呃，然后我们用到的这个，你看到这个设计的这个软件呢，叫 p x s o， 然后呢，我们用到的这个代码编辑工具呢？叫做什么呢？叫做 h build 叉，当然了，你用 v s code， 用 dw， 用其他的都是没有任何问题的啊，都是一样的，因为代码呢是国际统一的，所以说不存在换一个代码就打不开的问题啊。好， 我把这个拖过来，还是一样啊，首先我们可以看到最外层的这一块，是不是哎？ 嗯，我把这工具栏展开啊，最外层的这一块，我们是不是可以把它看成一个什么呢？一个大的什么的， diy 一个大的盒子，对不对？像堆积木一样。那这个大的以后呢，这里面呢，是不是和我们之前一样，它保护与发展是不是一个标题部分？ 是不是就是一个标题的栏目，对不对？然后呢？以及下面的什么呢？内容区域，那这样的话，一个大个盒子里面什么分为两个小盒子，对不对？ 那然后我们再看气氛里面啊，那里面也很简单啊，其实就是一个标题标签，以及一个下面的这个线啊，你可以用 smart 标签，也可以直接用 cs 去实现啊。 然后这里面更简单了，是不是？内容区域它拢共拢就十分呢？分为三块对不对？分为三个相等的小盒子，为什么相等呢？大家可以看一下，这里面其实很明显了，对不对？ 这个里面的这个其实里面的结构都是一样的，一个图片，一个什么呢？标题，一段文本，对不对？那里面是不是都一样的？他们都是有一个属性，是不是都是？哎？文本居中呀，无论是文本啊，文字啊，还是图片，这些都是居中的，对不对？所以说这个图片无所谓啊，用什么图片都可以啊， 我是随便用的图标。那这样的话是不是就很明显了？一个大盒子里面呢，分为两个小盒子，一个是标题部分，一个呢是内容部分，那就是两个什么呢？ d r v， d r v， 对 不对？那这里面呢？是不是一个 h 三标签，对 不对？下面呢我们可以用 style 标签代替，那里面呢？三个相等的盒子，我们可以用三个 d r v， 对 不对？也可以用 u r l i， 无需列表，对不对？那每个里面呢？可以又分为什么呢？ mag， 哎？ h， 哎，就是 h 五吧，你当然用 p 标签也可以，你用其他标签都可以，但是方便的话，因为这个内容里面，我们下面这个段落不用 p 标签，所以说这个可以用 h 标签，对不对？那只用 p 标签，然后就 ok 了，对不对？那我们直接来什么呢？直接上代码啊，我把这个工具退掉啊。 呃，这个水，这个刚才那个画图的工具呢，叫做水豚助手啊，我这几个全部都是免费的啊， 然后呢，我们接着视频往下走，对不对？那非遗传承人，那这一块是什么呢？我们刚才看一下啊，这块是不是就保护与发展呀？对不对？ 这个代码工具呢？嗯，其实都可以用，但是初期的话，嗯，你如果就是说不熟悉的话，你可以用 v s v s code 的， 也可以也初期也可以用 dw， 推荐你后期用，当然你去教学的话， 学习的话可能都是这个 dw， 因为在这个无论你自学啊还是什么的初期，对不对？ 那一个好用的趁手的工具啊，对你的影响还是很大的，你连工具都用的不舒服，你，你这样你写代码的心情都没有了，对不对？你写代码的心情没有了，那对不对？你更别提后面的发展了，后面的这个基础模块打牢，怎么实战对不对？ b o x 杠什么 boss 啊？然后后面你觉得，哎，我觉得其他的这个软件更好用一些，你再换其他软件就可以了吗？根据自己的喜好，我们说了对不对？最外层一个大盒子就是保保护的保，我们就起这个保了啊，里面有两个盒子，一个 d r v 叫标题，一个什么呢？ 一个是什么呢？内容对不对？好内容，那我们里面呢，是不是三个 d r v 啊，对不对？那 class 名我们给它起个 class 名叫什么呢？呃，宝 box 杠什么的，类似的对不对？没有任何问题对不对？你现在也可以复制三分，当然了，我会让大家看的更清晰啊。当然了，你这个文本内容写完以后再去做也是可以的。刚才说了，那里面是不是简单以 mag h 五和 p 标签对不对？那 结构你摸清了以后，哎，盲写对不对？哎，内容呢，我们后面再去填对吧？没有任何问题啊，他是不是就这样分的？ 那他是不是三个都是这样的，只不过里面内容不一样，那我们把下面的这个替换了，那是不是就三个部分？是不是很简单呀，对不对？然后呢，图片部分呢？我们随便引入一个其他图片，我就不截图这个图片了啊，好，引麦键。假如说随便用一个图片，我就用这个图片吧， 那我就不去截图耽误大家的时间了，因为图片都是无所谓的，你用什么图片都 ok 的， 我特意用个大图片去带你实现这个，哎，怎么去实现这些效果啊？ 好，那里面的这个标题部分呢，是不是也很简单？那保护现状，这个当然了，这个文本部分呢，你也可以什么呢？也可以改成其他的啊，我只是教你这个目录的结构啊，好， 保护现状对不对？ 然后里面的内容部分 它是第一个，然后就放在这个地方，对不对？然后这个传承部分，它是不是下面的 p 标签对不对？这复制就可以了，你用其他的文本也是没任何问题的。咱主要，咱主要通过这个视频，咱就是哎来了解这个，这个结构怎么写的，对不对？ 我所以说我做这个设计稿的时候，哎，基本上有的一样，有的不一样，大体每个这个结构都能做出来，其实你看它上面和我们上面讲的视频是一样的，对吧？ 然后我们运行看效果啊，在这里有一个运行好，然后往下滑，滑到最下面啊？ 那是不是内容填完了以后，我们再去填这个里面的部分就可以了？然后呢，首先就是最外层这个盒子啊，我们这个用的心形界面啊，然后我们看一下圆形图这个代码啊，其实这块用的这个就是这个啊，当然了你觉得这个比较复杂，你也可以用其他的蓝色代替啊， 你用红色用其他的都可以，它只是一个点 b o， b o 在 这个地方 b o， 对 吧？ 然后这个是他给这个是我设计的时候用到的这个属性是不是蓝色？你觉这个是渐限渐变啊？你觉得这个渐变你理解不了他，其实他的写法就是这样很简单啊，就是，哎， 那限性渐变，对吧？然后里面写着一个属性，然后透明度什么东西的，你看的有点乱，那你换，假如换成 pink 是 不是也可以啊？你换成什么其他的颜色？ pink 不是 粉色吗？对吧？其他颜色也可以啊，所以说重要重点是了解这个 background 的 你，如果现新界面的话，你不懂的话，你可以去搜一下 css， 现新界面也很简单啊，你一定要不要怕去学，不了解的话我们就去看就可以了，对不对？然后这个我们看一下是不是它上下的距离比较贴的比较近啊？还是和其他的一样啊，我们给他一个什么呢？上下的什么呢？哎， 上下的内边距，那这样的话他是不是就打开了，对不对？好，你说这个文字是不是他要白色，对不对？也很简单啊，那更简单怎么做呢？那首先我们知道我们这个派姐跟艾特是不是，我们来看一下他是不是在前面？他的 h 三，我们用到的 color 的 颜色值，是不是这个对不对？还有这个 h 三， 那也很简单，对不对？那你说，我只想给这个报保护与发展，他下面去加怎么加呢？ 你？当然你如果这样加的话，它是不是也能变成白色啊？没问题，变成白发的，但是其他的也变成白色。如果你的 class 名一样，内容成集是一样的啊，你 最下面的样式会覆盖原来的样式，那你说我怎么办呢？我只想让这个保护的这个 d r v 下面是不是它是不是属于保护的 d r v 下面，它是不是属于它的子集啊？那我这样的话是不是就 ok 了呀？ 那，那这个限行界面我们是不是也不需要了？我们给它一个什么呢？ background 怎么 color 是 什么？ c c c f f 就是 白色对不对？那你说我这样可以简写吗？当然了，因为其他的大小呀，结构我们都没变，对不对？我们只是想让它的这个颜色和这个背景色变成白色，那是不是把其他的删除也是没有任何问题的，对不对？其他的还是不变，对不对？ 那这个就相当于相对于层级的关系了，我只让保护这个 d r v 下面的派件 title 去改变，那其他的都不改变，因为它读取不到，对不对？它的前提条件就是保下面的派件杠 title h 三，对不对？那这样是不是很简单就已经完成了？ 那下面的这个宝 box 也是非常简单的，跟之前的一样，那我们的这个总体的长度是不是一二零零 t x， 哎，我是不是用我之前好久没写了，我看一下是不是一二八零，应该是一二八零啊，然后呢，麦间什么的 auto 就 ok 了， 那这样的话它是不是居中对齐了，对不对？将啊？上面是应该是一二八零吧，我看一下 啊，一二八零是不是很简单？其实这个这一课的写法呢，和上一课是一样的，那是不是它已经这样了，然后呢？ d r v 呢？它是一个什么呢？派基元素，所以说你如果不去给它做一个这个什么呢？ 做一个这个弹性布局的设置呢？他他是不会在异行的，所以你可以给他的赋级，他们共同的赋级一个弹性布局，也可以给他自己一个行内会计元素。然后呢水平居中的方式呢？我们还是跟这些一样啊，用两端对齐的方式，那这样的话，你看到的时候还是，哎， 这图片为什么这么大呢？是不是你没有设置对不对？那相对于我们下面的什么呢？包杠 book 例子，然后呢，他一行是三个，总共的一行是一，那我们百分之三十是不是就是百分之三十加百分之三十，加百分之三十就百分之九十，中间还有一个百分之十的控距啊， 那我们可以先设置百分之三十，那这样的话是不是他过来了，但图片大小没有动，对不对？那因为图片大小你不给他设置的话，他默认会根据他的这个比例，他会给展示完啊。那以麦姐，我们想要图片小一点，我们可以给他设置一个什么六十个像素值，对不对？ ipad 等于什么呢？六十个像素值，当然你想他大 就可以给他设置大，对不对？好，这样的话是不是效果就出来了？那这样大图片是不是也可以？之前的大图片是不是也可以变小呀？对不对？如果有压缩的话，你可以给他一个什么呢？自动裁剪， ob 啊， 自动裁剪，那这样是不是就不压缩了？或者是你给他一个什么六十乘六十的不同的这个大小的这个比例尺，就是你本身就给他用 ps 或者用其他作图工具给他处理成什么六十乘六十，或或者是六十乘六十的等比例就 ok 了，对不对？那这个地方呢，这个背景颜色呢，我们也可以取一下啊， 这个背景颜色是二五白色的，然后透明度是一啊，也很简单啊， 当然了，你给它用实心的也是没有任何问题的啊。那 background， 那 这样的话你看啊， gba 二五五，二五五啊，默认的话，你不写的话，它就是一个一，对吧？占的是白色对不对？那你说我想让它透边度透低一点，那其实它就是百分比嘛，零点一就是百分之十嘛，对不对？ 但是话透明度是不是就上来了？然后呢？里面所有的颜色是不是都是白色？那我们可以统一给他们的，就是给什么呢？ h 五和 p 的 这个什么呢？负极，也就是 bo 宝宝杠 box 杠 list 的， 给他一个什么呢？颜色色值等于 f f， 这样是不就 ok 了呀？然后呢，他们的内容呢？全部都是什么呢？居中，那我们是不是给一个文本居中就 ok 了？那是不是居中了？那你说我上下左右要有一定的距离，对不对？那四十四，三十六也没问题啊，那是不是上下距离要有一定的距离？是什么呢？拍一剪什么呢？ 那拍停值啊，给它一个三十六啊，哎？那你说，哎，怎么弧度了？我不是百分之三十嘛，对吧？因为你百分之三十，你要加左右的什么呢？左边距对不对？因为我们加了这个，但是呢，你又不想减，你也没法去减，你可以用 clc 给它计算，你当然也可以用很简单的方式。那 这个 box 啊，这样一写的话，就是去掉所有的内内外边距以及怎么的以及边框，然后呢，它的值，所有的值加起来等于你设置的这个什么长度是百分之三十，那这样是不是效果就好一点？那你说三十有点少的话，我们给他设三十二，中间控制大，是不是？这样？是不是效果也出来了，对不对？ 那这样的话是不是就 ok 了呀？那里面的内容部分是不是也也可以去写了？然后呢，保护现状，这个 h 五我们再给它加嘛？二十四，对不对？也很简单啊，那接着就是，哎，这个下面的什么呢？ h 五，然后呢？报 get 杠 size 大 小，二十四个像素值，那我们看一下是不是效果就出来了？那你说上下的距离要要有一定的距离，那我们上下给它一个什么上下的外边距，给它一个什么的二十个像素值，然后左右我们倒不需要了，对，左右零就行了， ok， 是 不是效果就出来了？ 那下面也是一样，那它的色值呀，大小呀，粗细呀，这些东西都可以去加啊， 然后呢？我们写好就是不是现在就是就是去微调它就行了，那通过这个视频你知道了我携带吗？怎么写怎么写？如果无从下笔的话，是不是我们就可以什么呢？ 就给它先设，先看它的结构对不对？那结构图一画出来，然后 html 我 们写完以后再逐步去给它实现样式，不要什么呢？哎， 当然你也可以根据你自己选择，如果后期熟的话，那结构一出来以后，你结构就不会错了，对不对？你再专注于去搞样式是不是就 ok 了？事半功倍对不对？ 那如果你写了他，你就给他去写样式，回头，哎，你写一少一个什么东西你也忘了，你也不好搞，对不对？那这样的话，你写完以后啊，我结构都倒过来了，那我下一步我给他加样式，一步一步来，从上到下，那这样的话是不是不会出错呀？对不对？ 如果后期你熟见的话，哎，就 ok 了，就不需要那么麻烦了。这个外面的这个盒子是不是有一个弧度呀？我们可以看到那弧度，我们也是讲讲的，不能再讲了啊，通过这几个视频就是可以看到 它其实是不是来来回回，来来回回，是不是就那几个属性颜色啊，背景色，弧度啊，这些东西对不对？ 那你如果觉得中间这个什么呢？你看太长了，你还可以调到三十一，对不对？那这个根据咱自己的需求去调就行了。那非遗传承人的话，我们就已经结束了啊，谢谢大家收看。如果想要这个本课程的这个视频的原码的话，可以看一下这个，然后私聊我就 ok 了啊。

ui 设计师要失业了？ google 刚刚悄悄上线了一个逆天神器，不用懂排版，打几行字，它就能给你一键生成精美的 app 界面。它叫 google stitch， 在 纸上画个丑丑的草图，传上去瞬间变成高保真 ui， 不 管是手机 app 还是网页端，全都能秒速出 图，还自带多套方案。更离谱的是，它支持一键把原文件导出到 figma， 连图层都慌了。它能直接打包生成 html 和四 s s 代码，背后是谷歌最强的 gemini， 三点一大模型驱动，而且目前居然完全免费！老板要狂喜了，以后产品经理自己就能出图，甚至不需要再求设计和前端了。所以你觉得 ai 到底是打工人的救星，还是屠夫？评论区告诉我工具叫 google stage， 赶紧去试试，关注我，带你玩转 ai！

兄弟们，昨天咱们那用户系统功能虽然调试通了，可这使用体验真称得上是惨不忍睹。 就说点删除操作吧，列表居然跟瞬移一样，生硬的就跟二十年前的网页似的，哪有一点现代应用的流畅感？要是想给他加点过渡动画呢？手写 css transition 又特别麻烦， 高度、位置都得自己算，简直是让人头大。不过别担心，今天我就来教大家用一行代码，给页面加上物理引擎，让页面动效变得超丝滑。这个神奇的库叫做 autoanimate， 它最大的亮点就是零配置，不管你用的是 mirorek 还是原声 gs， 它都能自动监听 dum 的 变化。只要页面里有元素新增、删除或者移动，它就能自动计算位置，生成平滑的补间动画， 就像有个无形的动画师在背后帮你操作一样。接下来咱们回到 view 代码里实际操作一下。第一步，使用 m p m install and fork kit auto animate 安装依赖。第二步，引入 v auto animate 指令，这一步就相当于请来了一位动画小助手。 第三步，直接在列表的副容器上挂上这个指令，就这么简单没了？是不是不敢相信就这三步就搞定了，现在见证奇迹的时刻到了，再点删除试试看，看看这补位效果 是不是丝滑的，就像在绸缎上滑动一样。更厉害的是，哪怕是复杂的网格布局变化，它也能轻松处理。你完全不用写一行 css 代码， 简直是开发者的福音，如果做独立开发的，时间可都得花在刀刃上。像 autoanimate 这种能让页面体验提升十倍，还不用咱绞尽脑汁的酷，必须得加入收藏家，我是 askcode， 关注我，我会持续带大家挖掘更多实用的知识。

还在用 type in 手搓样式吗？类似于外，作为 type in 专属主键库，提供了丰富的主键内明，用更少的代码更快搭出完整界面。比如写一个按钮，以前要写一长串样式，现在只需要一行代码来创建按钮。 不仅内置了按钮，还有表单、弹窗等几十种主键，还自带主题系统，暗黑模式，配色切换一键搞定。更关键的是，它完全基于四 s s， 没有 y z s 文件， vivo vivo 甚至原声 h t m l 都能直接用。如果你想提升前端开发效率，这个项目真的值得一试。

上一期我们按 f 十二把淘宝首页拆了一遍，看到了满屏的代码，这些代码就是我们经常听到的前端代码。前端三大板块， html、 css、 js。 今天我们介绍的主角 html， 这次我会用最直白的话来帮助初学者快速理解。 如果说网页是一个人，那 html 就是 骨架，骨头在哪，眼睛、鼻子在哪，全靠它定位置。 css 是 衣服， javascript 是 肌肉，今天我们先搭骨架 html， 中文叫超文本标记语言，听起来高大上，说白了就是用一堆标签把文字、图片、视频圈起来，告诉浏览器，这是个标题，这是个图片，这是个链接。 注意，它不是编程语言，是标记语言。编程语言有逻辑判断， html 没有，它只是标记。每一个 html 页面都长一个样，由三大标签组成。 html 标签，整个页面的根，把所有内容都包在里面。 head 标签，网页的脑袋放一些给浏览器看的信息。 body 标签，网页的身体，放所有给用户看的内容。我们主要是将代码写在次标签中，下面我们挨个学最常用的标签，标题，标签 h 分 不同的大小，就是用作写标题的段落标签 p， 就是 包一段文字，浏览器会自动在段落前后加一点间距。换行标签 b。 二、强制文字换行图片标签 m、 l、 e， 可以 在网页里放图片。 超链接标签 a， 点击后跳转到另一个页面。滴滴标签，最通用的容器，里面可以放其他标签。 span 标签小容器，用于包裹一小段文字，方便单独改样式。 了解了最基本的标签后，我们动手写一个最简单的页面，把上面学的拼起来，就是一个完整的网页。你可以将评论区的这段代码复制到一个新建的记事本里，保存为 test 点 html， 然后用浏览器打开，一个属于你的简单网页诞生了。 下期我们学习给页面穿衣服，用 css 美化页面。

我一直认为深度学习无论任何的算法中最好做的 id 二就是特征提取模块。如果你找到了一个基于卷积神经网络构建的悲四烂，那么如何对它进行有效性的改进呢？那么最简单的就是对特征提取部分进行爆改，无论是多尺度改造、轻量化改造，还是爆改自注意力 或有效特征融合或高低频分离，这些改造都能够从涨分、降参、数量等多种方面提高整体网络。为了方便大家收集关于这方面的即插即用的模块，包含了卷积系列、注意力系列、 各征融合系列等等，同时部分模块还有详细的介绍和代码的逐行解读，大家可以尝试把模块丢进自己的代码中，有用就拿来用，没用就换一个，对大家写论文来说再也方便不过了。

看嘛，就比如这种，把这个图片保存下，然后把这个图片放上来，给他说按照这个图片内容给我生成一个可以运行的代码， 水晶球系统业绩汇总页面，代码下面是基于你提供的界面实现的 html， 你 只要给他个界面就行，代码可直接运行在你，所以这个界面你可以手画呀，你，你脑子里想象到 这个画面是什么样的，你想要怎么排版是吧？直接给他一说，你看给他一上传，弄成这个样式的，他一步到位不了， 然后慢慢再调吗？这不比敲敲敲这个码强吗？啊，特别是啥也不会的，这不很简单吗？ 代码说明一布局还原完全和预览，有时候预览预览不出来那样卡片和图标区域的结构与样式，预览是这样的， 你看，哎呀，这手机上不行，你就这个说图，你看和我给他的图，我给他的图是这样， 然后他你打不开，他给的是这样资金。查什么地方统计？我是我这是在下载的哈，下载的别人的， 你看地方统计也是地方统计，二七六点八八八这个数字你可以直接改吗？你看这不多好 啊，这显示不出来，这是因为，但这也有查询，什么是 然后你在他再让他一步一步再调嘛？这得用电脑，这个手机看不出来，看这多方便。他有网页版，你可以直接复制，用电脑直接就电脑可以看到这个手机和他聊天的记录， 你一说那边电脑上就有了，你可以直接复制就行了，方便的很。我今天晚上才都十十一点了，晚上我才发现。