jinja2可以直接写html吗

档是一种轻量级标记语言，它允许人们非常快速的编写文档。使用 markdown 编写的文档呢，可以非常容易导致成 html， word， 图像， pdf 或者 epop 等多种格式的文档啊。 markdown 的后缀名呢，是点 m d 啊，很多网站都支持马大来编写文档或者发表文章，比如说 github 简书， stacker flow 流量元笔记等等。 本视频呢，我使用一个叫 stack edit， 它的的谷歌的新，用来向大家快速演示 mark 段语法。然后各个平台都有非常多的 mark 编辑器啊，我会在下面放上链接。嗯，大家可以选择适合自己的编辑器， 然后一个吗？蛋文，他的元素分为两类啊，一种是会计元素，会计元素呢，他至少占据一行，他也可以占据多行。行类元素呢，他只占 自身所需要的空间，它可以如果不不满意哈，后面还可以占据，还可以有其他的元素。我们先来看会计元素。首先我们来看标题，标题呢，就是和 word 里面的标题类似，它有六级，比如说标题一， 标题二，标题三等等。 第二个是引用，引用呢，就是引用一段话，它使用一个大于符号表示， 我们可以看到引用的他前面有个这个树干，这是一段引用。接着是列表，列表分为有序列表和无序列表。我们先来看有序列表，把大象放进冰箱，第一步打开冰箱，第二步 把大象塞进去，第三步关上冰箱。然后呢，我们看无序列表，使用短横线，那么这就是无序列表，你也可以使用新号。 然后我们来再来看任务列表，明天要做的是横杠方括号，空格，吃饭睡觉打豆豆，然后呢在空格里面，我们可以输入一个字母 x， 那么他就可以勾选上，当然你也可以在这里勾选上。接着是代码，快 三个反引号，加上你要输入的代码的语言，比如说 c 语言。数学公式，数学公式使用四个美元符， 好把公式括起来，数学公式使用 lettic， 比如说我们写个偏倒数表格，表格分为三部分，表头 对齐方式，如果冒号在左边表示左对齐，这里的转横线至少有一个。如果冒号在右边表示右对齐，如果两边都有冒号，表示居中对齐 好。我们来看角柱，角柱分为两部分，一部分是角柱的链接，另一部分是角柱的内容， 比如说一键三连，然后我们输入一个方括号，然后一个帽子符号，然后输入角柱的名字，比如说三连，然后呢我们在其他部部分，比如说文章的结尾，把这个三连解释一下。点赞， 投币收藏，最好再关注一下，那么这个就是假注，如果我们点击这里，他就会跳到这个解释这里来， 然后是横线，如果你想把一篇文章分割成几部分，我们可以使用横线，比如说我在这里输入三根横线，那么这边就多出了一根横线，这个横线是文章自动为这个角柱生成的，这根横线是我们自己编写的，比如说， 哈哈哈，这下面有根横线。接着呢，我们来看行列元素，首先我们来看链接，链接呢使用方括号，然后里面输入链接的文本，然后呢输入链接的地址，括号是英文括号， 百度点 com， 那么这个就是链接。然后呢我们可以给他添添加一个标题，一个搜索引擎，那么我们这里鼠标原辅的时候，他会显示一个， 然后除此之外，我们可以使用引用链接，引用链接呢适用于多次出现同一个链接的情况，比如说我们在文章中多次出现了百度这个链接，如果我们每次都把这个复制一下的话，那么如果我们要更改的话，那么就每个都需要更改， 我们可以使用引用链接，引用链接的格式呢，和这个很类似，我们把这个复制一下，粘贴一下，然后呢我们这里把它剪切掉， 我们这里输入还是方括号 id， 我们在后面的某个地方输入 id， 再输入一个冒号百度点 com， 一个搜索引擎，我们点击同样是可以跳转到百度的， 这样的话，如果我们在多个地方都想要这个链接，我们只需要复制百度 id 再啊粘贴即可。如果我们需要更改所有这个链接，只需要更改这一处就可以了，比如说把百 度变成谷歌点 com 即可，那么我们点击其他链接的时候，他将会跳转到谷歌，我们也可以将链接设置到标题，比如说请参考标题一，那么这里的链接我们需要使用一个井号加上标题一，那么我们点击 标题的时候，他就会跳转到标题，所以这里链接的这个名字一定要和标题的名字完全一样， 我们可以输入 url， 可以直接输入标准的 url， 比如说 h t p w w 点百度点 com， 如果你输入了 h t t p， 也就是说这个协议，然后加上域名的话，他会自动为为你生成链接，接下来我们来看图片，图片呢和链接差不多，他只是多了一个感叹号，然后是方括号，方括号内部是替代的文本，比如说百度，然后呢 后面是图片的链接，比如说这是百度的搜索引擎上面的图片和链接，我们也可以给他加上一个说明的文字，比如说百度搜索，那么鼠标放上来的时候，他会出现一个百度搜索。嗯，如果你的 markdown 是在本地的话，你这里可以使用你本地图片的相对地址， 或者说绝对的。然后我们来看一下其他的一些行类的一些格式，我们使用一对新号表示强调，也就是说鞋体 使用两对星号表示加粗，使用一对反引号编写行内代码，比如说 print 函数下划线比较特殊， 我们需要使用 htm 中的优标签下划线。我们还可以使用标准的表情符号，表情符号是一个冒号，加上表情的名称，比如说 smile， 那么它会产生一个表情，表情的名称可以参考 emoj 国际通用表情袋吗？视频下方我会放上相关的链接。然后是行类数学公式，行类数学公式使用一对美元符号，比如说 c， 它等于 x 的平方，这是行类数学公式。我们再来看下标，下标呢，使用一对波浪号 包裹起来，比如说 hrohro 是水的化学式，对吧？我们想把这个二变成下标，那么我们用因为波浪号把它 标记起来。也可以使用上标，比如说 x 的平方，我们使用一对肩帽号把这个标记起来，然后我们还可以对文字进行高亮，高亮呢，使用两对等号，比如说这是一段高亮文字， 这些呢就是 mark 档的基本的语法，在 mark 档中你完全可以使用 html 实现 mark 档不支持的内容，例如视频等等。

零基础如何用 tree 写一款手机软件？我们需要用到三款工具， tree， h b 的 x 和木木浏览器。 tree 主要是用来写代码， h b 的 x 主要是用来把代码运行到木木浏览器上，木木浏览器的作用是模拟安卓手机。首先我们需要创建一个项目，在 h b 的 x 中 打开 hbx， 点击文件新建项目，给我们创建一个默认是保存在了桌面上，然后下面这个不用选，直接选这个，就可以选这个， 勾选这个三，然后点击创建，它会显示创建成功，创建成功之后，打开一个比如这个 html 的 代码， 我们点击运行，运行到安卓机座，它就会自动搜索我们的模拟器，然后运行新项目，稍等片刻，它就会运行到这个目目浏览器。现在这是一个框架，我们需要在退出 写具体的功能，在窗上打开我们创建的那个文件夹，我们让他利用这个框架写一个安卓手机视屏软件，直接发送给他，就可以等他开发完成。在开发的过程中， 这边写好代码，这边是实时加载的，这边至此这个软件就写好了。软件写好之后，我们可以在这个模拟器测试一下， 我们点击加号，输入标题，输入内容，然后保存加设置 x， 如果保存不不成功。我们返回 h b 的 x， 看一下它的问题，把这个爆红的地方复制发给吹，让他帮我们修改代码，等他把代码修改好之后，我们再次测试一下软件题。 内容写好之后，我们可以点击这进行测试，输入内容，点击保存，点不了保存说明它是有问题的。我们返回 h b 的 x 看一下它是什么问题，把这个问题再发给崔，让他去修改，来回修改用时比较长，我们就不修改了。 写好之后，这里面在 h b 的 x 里面有一个发行云打包，然后我们直接 就可以把这个软件给打包，平均打包，快速安心打包，点击打包他就会给我们打包这个应用程序弹出这个提示的时候就继续打包，等待他打包好就可以了，会实时显示打包的进度，显示绿字就说明已经打包好了 啊，他这上面有安装包的位置，按照这个位置找到这个安装包打包好的软件，这就是我们打包好的软件，现在就可以通过压缩软件把它压缩一下， 通过微信或者 qq 发送给自己，就可以安装到手机上。如果不知道怎么设置幕幕模拟器，可以留言或者发私信。

必须培养一些爱好来支撑生活的疲惫和琐碎，哪怕是随拍路边的花草，都能让生活充满期待和快乐，用生活治愈生活。

前端网页开发入门案例实战第八集，在剪辑的时候，在五分三十秒的时候漏掉了两个片段，这是补充。接下来我们就是让这个 logo， 然后让它垂直垂直居中显示在这个红色方块里面。垂直居中，我们得用到一个新的 新的一个布局方式，叫做布局方式，是用 display 用来控制的。之前我们介绍了 display 的 音浪，还有这个它的一个 block， 嗯，音浪就是这个从左到右的布局， block 就是 从上到下的一个布局。但是现在这个我们要让这个 logo 它垂直居中布局，就得介绍一个新的方式，叫做 flex。 flex 这个布局方式单靠一个 display 等于 flex 是 完不成的，只不过说我们相当于开启了一个开关，可以让让这个标签，让这个标签拥有更多的布局情况。 嗯，开启 flex 之后呢，我们就可以使用一个一个新的属性，叫做，呃，我，我们先给这个 logo 设置一个大小，因为开启 flex 之后，它这里，这个 div， 这个， 呃，这个标签里面的所有子集元素它都发生了变化。嗯，这个比较偏理论，一些知识我们这里可以不用介绍，只知道有这么一个现象就行。 嗯，我们给这个 logo 加一个宽度和高度的这么一个限制。呃，它的宽度和高度刚才是多少来着？是一百四十二， 一百四十二乘四十一。嗯，我们就给这个 logo 添加一个就是 这个宽度，宽度是一百四十二像素，然后高度呢是四十一像素，嗯，这样就回到原始的样子。然后呢，就是 现在我们再看看怎么让这个 logo 垂直垂直居中，使用一个新的属性叫做 alan items， 然后它有很多属性值啊，它有很多属性值，你也可以从这个你看，这不是选项吗？这是这个属性的所有选项。然后浏览器这个开发者工具呢，它在右侧，每个选项的右侧给你添加了一个图示，你可以看这个图示来 来知道这个，嗯，这个属性值它拥有什么功能？你比如说这个 center center， 你 看看英文名就知道它是 居中吗？然后你看这个图示，他也是这么一个居中的这么一个效果，这个按的呢，就是在最最下面吗？你看这个，这个图示，他跟个大楼似的，他底底下有个横线，他就是在 嗯，靠底部对齐的这么一种方式，这就这就是这个开发者工具的一个功能特性。然后你看，我们要垂直居中，就得选择 center， 你看选择完之后，你就能看到这个 logo， 它是垂直居中的这么一个嗯，布局样式了。然后你把鼠标悬停在这个属性上面呢，你在这个红色方块这上面也能看到它有一个指示线，它可以就是说垂直居中的这么一个指示线吧， 嗯，就这么一个小功能，嗯，这样，这样垂直居中我们就做完了，就做完了，所以说我们现在就给它写在代码里，要给这个，要给这个负极的这个 top 八这个类名去写样式啊，不要给这个 img logo 写样式，因为这个 flex 布局啊，都是写给负级呀，负级标签的，不是写给子级标签的。而且呢，这个 align items 是 只有在 flex 布局下才有，才有这个，才有这个功能。比如说你看我们现在把这个 flex 这个前面这个勾号给它关掉， 它就没有，你看它就没有垂直居中的这么一个效果了。嗯嗯，我们找到这个 top 八，嗯，我们没有给 top 八写上啊，这就在这里我们给它一个 display， flex， 一个就是弹性布局的这么一个 显示方式，然后再一个 align 杠 i 杠 items 等于 center， 这就是一个垂垂直居中的这么一个样式。 然后还得给这个，因为开启 flex 我 刷新一下页面啊。嗯，其实我们不用给这个啊， 在我如果我们没有指定这个阿莱奥特曼斯，就单独写一个 flex 的 话，他这个 子集子集这个标签啊，他会产生一些变化，你看，比如说这个大小的变化，但是当我们指定了阿莱奥特曼斯之后呢，他就会按照原先的一个大小呢去进行一个布局， 嗯，所以说呢，我们不用像刚才一样去给这个 logo 设置宽度和和高度了。嗯， 这个 flex 是 我们经常常用的，而且这个垂直居中呢也是我们常用的，所以说呢，我打算把这两个属性给它，嗯，抽离成一个公共的一个样式，还是在这个类 out 这里面， 比如我们写一个就是 flex 布局，点 flex 就 去 flex 这个类名，然后它就一个有一个 display 属性，然后属性值是 flex， 因为 flex 布局它不光能实现水垂直居中，它还能实现其他的一种布局。这个，呃布局样式，所以说呢，单独给 flex 抽离成公公共的样式， 嗯，然后接下来就是给这个，呃垂直居中这个抽屉成公共的样式，这是实现垂直居中，嗯，就叫做，嗯， 就叫做 vertical 杠三档。然后，呃，这里面我就把这两个给它复制过来就行， 然后把这边删掉。其实你看我们这里加了一个 flex 布局的样式，这里还写了一个 flex flex 属性，嗯，显得有点重复了。呃， 其实你可写也可不写，你看我们先看不写的样子，如果不写就是我们先看不写的样子，如果不写的话，我们就得给这个这个 top 吧，这个这个 标签添加一个 flex 类名，让他让他成为这个 flex 布局，然后再添加一个垂直居中的一类名， 让他有一个垂直居中的一个效果。现在我们看一下样式，嗯，他就是一个垂直居中的一个效果。如果我们给这个垂直居中的这个类名加上这个 flex 属性的话，那么我们在这里就只需要写一个， 写一个 vertical 杠 center 就 可以了。嗯，两种方式都可以，都可以。嗯，我为了简单呢，我就只写一个了，就就 就把，就就是这个垂直居中，这这个样式是有这个 flex 布局的属属性的。嗯 嗯，现在这个 logo 我 们就制作完了，然后制作这个菜单专栏，菜单，专栏不包含这个弹出来的这个更多菜单。啊，这是另另另一部分，我们只制作这个，哎，就只制作这一个专栏的一个标题。 嗯，我们先看一下它有哪些标签组成吧。首先肯定是有一个大的 d i v 把这一整片区域包裹住，嗯，我们先把这个大的 d i v 给它写出来吧。 d i v 给它起一个类名，就叫做 had 杠杠 n n v 吧。一个热门导航链接， 然后给他添加个样式，添加一个，嗯，你看他的宽度，宽度是多少呢？我们 我们可以随便起随便设置一个宽度，比如说设置一个七百像素的高度，也高度设置一个高度，我们设置一个跟这个， 嗯，我在想怎么高度，就先设置一个八十像素吧，不，先设置一个五十像素吧，为了为了一会就是演示这个弹出框， 好，演示一下弹出框，先设置一个五十，让他小一些，然后给他设置一个蓝色的背景框， 嗯，现在就在这个位置，然后，而且，而且因为我们刚才给这个给这个红色方块，也就是 top 八设置了一个垂直居中的这么一个效果，所以说呢，这个蓝色的这个方块它也是一个垂直居中的这么一个效果，因为都属于这个红色方块的子集嘛。 嗯，然后我们让这个 logo 和这个专栏之间有一个距离，控制两个标签之之间的距离。用什么呢？就是我们之前介绍的就用这个 margin 外边距， margin 就是 控制两个标签之间的距离，所以呢我们给这个 nnv 这个内面添加一个 margin， 嗯，添加一个 margin 杠 left， 因为我们只需要给它的左侧添加外边距嘛，所以就是用 left， 然后添加多少呢？嗯，添加多少一个距离呢？没有一个固定的， 嗯，像素随意就行。我们看看这个，嗯，再稍微大一些吧，比如说给一个八十像素，嗯，这样看着还行，就给一个八十吧，就，然后他们的区域呢？就就占这些。 最后呢我们就是把这个文字给他添加到这里面来，文字呢，他是 因为这是一个一个大的 diy 包裹嘛，文字就是每每一个，每一块的文字都是由一个 diy 包裹，然后呢这两个 diy 就 用一个 spa 标签来这个包裹文字， 我们写一下 diy， 这个 diy 是 包裹这个文字的，然后这个 spa 呢，就是 第一个游戏资料，嗯，然后还有一个 spa， 就是 下面这个英文了， game 应付，嗯，给他复制过来就行。然后这就是一个呃专栏的一个 整体的一个结构，然后我们给他们添加一个类名，比如说这是这个 diy， 是 这个每个专栏的每一项，我们就叫做 呃， had 杠， n n v 杠 item item， 就是 每一项的意思嘛。然后这个这个游戏资料这个文字呢，我们就给一个 header gun n n v gun title， 嗯，然后这个 game four， 它就是一个子标题的这么一个功能，功能，然后就叫做 header gun n n v gun gun subtitle， 子标题嘛， 它们它们的一个结构，还有类名就是这个样子，然后保存一下，然后我看这个，这里有一个英文，只不过是黑色文字，看着不是清晰， 嗯，我改一下，改一下背景颜色吧，就改成 yellow， yellow 看的，嗯，这样看的清晰一些。 然后呢就是我们就设置这个文字的样式，呃，不，我们先把剩余的这个这四个给它完善一下，嗯，大，大家可以鼠标旋停在这个 这个 vs code 的 这个左侧，左侧这里有个箭头，然后点一下，它可以折叠起来，再点一下就可以展开，然后这个功能挺挺实用的，我们把这一段代码给它复制出来，然后第二个就叫商城合作，复制一下， 下面就是 store， 然后再复制一个， 这叫社区活动互动，社区互动这个单词，然后再点一下，再复制一个，这是赛事官网， 然后再点一下，再再做最后一个自助系统。 ok， 这一个内容就就就写完了。保存一下代码，看一下它们，因为我们没有给它们指定指定一个布局方式嘛，然后我们它们的子集都是 div， div 就是 用从上到下垂直显示的这么一个效果， 但是呢，这里是水平显示的。嗯，我们先我们先让它水平显示。如何实现水平显示呢？就是我们要给这个红黄色方块，也就是这个 n v 这个方块添加一个 flex 布局。哎，对，就刚才我们说的是一个 flex 布局， 像这种水平显示就是水平显示，然后还有就是垂直居中显示。这些东西 flex 是 都可以实现的， flex 它的功能很强大的。 嗯，这个我们在这个案例里面就是会经常用到这个 flex 布局，所以说呢，这个我们之后慢慢了解。嗯，现在加一个 flex 之后呢，你看它就是默认的就是这种水平显示的方式了。嗯， 那这就完了，我们就加一个 flex 就 行了。我们给这个 n v 这个这个标签添加一个 flex 公共的类名，这里就是 flex 嘛，这就是我们刚才设置的一个公共的样式啊，保存一下。 嗯，设置完，设置完水平显示之后呢，就是该让它们就是垂，让这些文字垂直居中，垂直这个显示了。 嗯，首先我们就是得得先设置一下这个每一个专栏像的这么一个区域，你看现在它们是一个不固定的，我们给这个专栏像，也就是说 hide 杠 n v 杠 item 添加一个背景颜色，比如说设置一个，嗯，因为如我们先设置一个，就是呃 pink 粉色 看不出效果来，我们我们得让每一个就是这个专栏像它都有不同的一个背景颜色，我们在这里可以临时使用这个 style 属性 background 的 光 color 等于 pink。 然后呢复制一下 给第二个专栏像设置一个，呃，第二个专栏像就不用设置，给不用设置呢，它就会使用透明的，然后也就是说显示会显示黄色， 呃，我们给第三个设置一个粉色，给最后一个设置一个粉色，让它有一个间接的这么一个效果。 你看现在他们每一个专栏像他，他的宽度都是不固定的，他的内容有多 多宽，那么这个专栏像就有多宽。你看游戏资料这个文字比较多，那么他的宽度就比较多一些，这个赛事官网呢就比较少，他的这个宽度就比较小一些。 所以说呢，就是我们得得让这个每个专栏像的宽度平分平均。我们这个黄色，黄色的方块呢，他是刚才设置的是一个呃七百像素， 我们让每个专栏像都平分这个，这个这个七百像素，我们可以算一下 还有几个展览箱，一二三四五五个，七百除以五一百四嘛。然后我们可以就是说给这个 item， 给每个 item 设置一个， 设置一个宽度，宽度等于一百四十像素，你看这样他们就平均了。然后呢？呃呃，如果，如果内容比较长的话，他就会自动换行，嗯，但是这是 如果，但是这是针对这个黄色背景是一个固定的宽度，你看他就七百像素，我们可以算出来他是一百四十像素。 然后呢，但是如果说他的黄色，这个黄色的方块，他的宽度不确定，是一个不固定的，随时会发生变换的。而且呢，假如说这个里面的这个每一个 嗯专栏像他数量也是不固定的，比如说这个时候是四个，未来就是六个或者是三个，那么这个这个每个专栏像的宽度也就不是一个固定的一百四十亿像素了。所以说呢，我们就是不用这种写死的方式， 我们不用这种写死的方式，我们用另一种方式，还是跟 flex 相关的一种方式。你看现在这个黄色方块，它已经是一个 flex 这个布局的一个方式了，你看这 display 等于 flex 嘛？ 然后呢，我们接下来就是让这个在这个 flex 它的子集里面 必须是直属子集啊，你看这个这个 div 下面的这个这些 div， 如果是这个 span span 不是 这个 flex dv 的 直属子集，必须是直属的。 我们在这个也就是说这个 item 这里给它设置一个一个新的属性，叫做 flex。 flex 等于一 等于一，就代表着平分这个平分这个负极的这个空间， 现在它的负极空间是七百像素嘛， flex 等于一平分之后，每一个就是一百四十像素。哎，因为我们给的是 item 设置的，所以说每个 item 都有这么一个 flex 等于一的这么一个样式，所以说呢，它们这五个都会平分 空间，平分这七百像素。那假如说，嗯，未来我们把这个换成九百像素了，你看他依然能平分，这就是一个弹性布局的一个好处，他可以，他不， 不用不用，不用，要求你这个页面的样式固定啊什么的，他会自己去计算，然后再设置一个最终的一个样式。 所以说呢， flex 等于一就是平分剩余空，平分这个负极的空间。这个 flex 等于一也很常用啊，我们得我们给他设置一个公共的样式，在这里设置吧，就叫做平分负极空间， 嗯，就这么取吧，就叫做，然后就叫做 flex 等于一，然后呢我们在这里把它给删掉， 把它给删掉，然后给这个每个 item 制定一个这个公共的样式类名 保存一下，现在它们就是一个平均的这么一个样式了。

前端网页开发入门案例实战第二十三集高亮，他不是所有的标题都高亮，他只有当前的这么一个 才高亮。所以说呢，我们需要通过一个类名，也就是说给这个标要高亮的这个标题标题添加一个特殊的类名，只有有这个类名之后才给他设置成高亮，那么这个类名我们就 取名叫做 active 就 可以了。这个类名我们需要给这个标题标签，而不是标题容器啊，也不是这个 spa 标签，而是给这个标题的 diy 标签添加。我们先先 我们先写死 active， 也就是说写死，也就是说给这个给这所有的这个标签，你看最后他都有一个 active 的 这么一个类名，我们先让所有都有，我们之后再慢慢调， 嗯，先把这个开头给它复制过来，然后后面再跟着一个点 active， 这之前已经见过一次这这样的一个选择器了，这就是代表说如果这个标签的类名它是这个 title， 并且还有这个 active， 那 么就应用这个样式， 嗯，高亮的一个高亮，他有什么样式呢？就是首先是这个背景颜色变白，还有就是这个文字是一个橙色，还有就是一个有一个下边框的这么一个样子，我们右键检查一下，把他的一个样子给他取出来。 嗯，首先就是背景颜色，白色，它不是一个纯白色，它是这么一个数值， f 七 f 六、 f 六， 还有就是字体颜色，字体颜色是这个值，也就是 color 属性是一个 ab 八 e 六六这么一个数值。还有就是它还有一个下边框，下边框，也就是 bottom， bottom 杠， bottom 就是， 呃，设置下边框， bottom 就是 设置边框后面再跟一个 bottom， 就是 设置下边框。这跟之前介绍的什么，嗯， margin left 是 一个样子，你看这个 margin left 就是 设置左外边距嘛， 那么这就是设置下边框下边框的一个样子，样子是什么呢？我们检查一下。 嗯，这个边框他是边框的宽度，他是两二像素，嗯，因为是下边框嘛，他就是高度， 下边框他是垂直方向，也就是高度，高度是二像素，然后他是一个实线的，实线也就是这个。然后边框的颜色呢？是，我需要看一下这个， 呃，边框的颜色，呃，它来回动我都没法看边框的颜色是这个 cea 八六幺啊，点一下保存，看一下效果。嗯，现在它就是 全都是高亮的一个状态，我们之后慢慢调啊，我们右键检查，我们先 双击，双击这个克拉斯属性值，我们可以在这个开发者公卷里面去给它进行调整，进行一个编辑。比如说我把这个 active 给它删掉， 那么这个精选皮肤半价这个它就没有这个 active 这个类名，也就是说它不是高粱，你看现在就是高粱和不高粱的一个样式对比， 这里有一个细微的一个差别，就是因为我们这里设置的一个标下边框嘛， 下边框它是占这个，也是占这个标签的一个高度。嗯，什么意思呢？我们把这个下边框的一个数值给它调大吧，比如说原本它不是，嗯，两像素宽吗？我们给它设置成十像素， 现在他是这么的，你看这个有标题，不是高亮和不高亮，他这个标题显示的位置 他是不一样的，你看这个比较高，因为他是有边框的原因，所以说把这个文字往上挤了， 他这个没边，没有高亮，他是没边框，所以说呢，他还是在这个中间的位置，这样就很 很突兀，就看起来很很不那么好看，你这个高，这个低的就肯定不好，所以说呢，我们让这个，让这个不高量的这个标签也有一个这个下边框的一个样子， 但是他这个下边框呢，他并没有颜色，他是一个透明的颜色，所以说呢，他有了一个下边框，他这个 这个标题的一个位置就跟这个高亮的是在同一个位置了。我们现在修改一下代码， 在这个 title 这个位置里写一个 bottom， 然后二像素实现透明的一个背景呢，就是 transparent， 这就是一个透明的一个关键字， 就是完全透明，但是你也可以使用之前说的 rgb 这个函数。嗯，前三个数值零零零就是黑色吗？你看这里 vs 扣的也给你也给出了一个这个颜色 标识，它是一个黑色，然后第第四个数值就是透明度，那么零就是透明了， 完全透明的一个意思，这是设置透明的一个方式。这 transparent 这个也是设置一个透明的意思，这个就代表说这个你这个边框没有任何颜色，全透明了，我们这里使用这个 这个内置的这个关键字就可以了，然后点一下保存， 嗯，二像素看不出效果来，我们改成十像素，这个都改成十像素。现在你看 他这个没有高亮的，他就还这个位置跟这个有高亮的是在同一个位置，这样看起来就比较自然一些了，而不是一个上一个下，这样看起来特别的难受，这样给它修改成二像素。嗯， 因为我们给这个 type 已经设置了这个下边框，只不过这个边框它是透明的，所以说呢，我们在这个 active 这里就不需要重复的去设置这个下边框了，我们只需要给这个边框设置一个颜色就可以了。 设置颜色就是 bottom 杠， bottom bottom， 它还有一个后面再跟一个杠，就是 color， 就是 给下边框设置 这个这个边框颜色，对，这个后面再跟一个 color 就 可以了。我们把这个纸给它复制过来，然后删掉这一段代码，然后点一下保存，这样也是可以的，也是可以的。 接下来我们就是把这个 active 给它删掉，我们让这个 active 呢是一个动态的，谁高亮就谁有这个 active 类名，嗯，不高亮的就没有这个类名， 我想让他就是每隔两秒就自动切换到下一个标题，然后这个图片呢，也是每隔两秒就是向左，就是向左移动，然后切换到下一张图片里，这个 间隔两秒。这个操作该怎么实现呢？这里需要用到一个叫做定时器的这么一个功能。嗯，我们在最下面这个位置写一下测试代码， 定时器就叫做这三个字。定时器它是用一个内置的一个函数来实现的，这个函数的名称就叫做 set interval， 哎， 就叫做这个就是叫做这个名称，它是由两个单词组成的，这个 i 要大写，这个要注意一下，因为它是一个函数嘛，我们要使用，所以就得加上圆括号去调用它。 这个函数呢，他接收两个参数，第一个参数就是还是接，就是接受一，接受一个函数作为一个参数，然后呢第二个参数他是就是时间间隔，也就是，嗯， 间隔时间吧，对，就叫接收这么两个参数，这个间隔时间的意思就是说，嗯，我多少多长时间之后执行一遍这个函数。 比如说我这里写上两千，他是以毫秒为单位的，以毫秒为单位，呃，两千换算两千，毫秒换算成秒的话就是两秒，所以这里要写两千， 呃，这个这个这段代码的意思就是每隔两，每隔两秒就执行一遍这个函数，这个就是定时器的一个作用， 时间到了就执行一遍这个函数。那么这个函数呢？我们在这里创建一个简单的一个函数吧，就叫做 welcome， 我希望就是在两，每过两秒就在控制台里输出一遍欢迎语句，那么这里就要用到 ctrl 点 log 就 输出一下你好这个两个字。 现在呢，我们要把这个 welcome 这个函数传递给这个 settable， 这个函数的第一个参数，我们把这个名字复制过来， 复制过来之后就完事了，这里不要加上圆括号，加上圆括号呢，就相当于调用这个 welcome 这个函数了，我们我们不需要手动调用，而是我们把这个函数的本身 传递给这个这个函数，这个定时器，这个函数等时间到了之后， 在这个定时器内部里自己去调用这个 welcome 这个函数，所以说我们不能加上这个圆括号，不加圆括号就代表着把这个函数本身传递给某个变量， 现在他被当做一个参数了嘛，所以说就是把这个函数传保存在这个参数里面，时间到了就让他自己去调用。然后现在我们点一下保存，点一下保存，然后看一下控制台是一个什么效果， 你看这里这个他在控制台里有你好这两个字，然后在他前面有这个数字，也就数字就是说我有输出了几遍，现在是八遍，然后他就 他每过两秒他就会自动输出一遍，这个就是定时器的一个作用。然后现在我们来看一下，就是说如果我在这个 welcome 后面加上这个圆括号调用了，是一个什么样的情况？点一下保存， 他这个输只输出了一遍。你好，他前面并没有数字，没有数字就代表着就只输出了一遍， 这一遍是我们手动调用的，而不是说这个定时器给我们调用的，因为我们在这加了圆括号了嘛，所以说这就是加了圆括号以及不加圆括号的一个现象。 嗯，现在我们就可以使用这个定时器来完成我们这个轮播图的一个自动切换的一个功能。呃，先把这些测试代码删掉， 我们先只先实现这个 title 的 高亮，就是说，嗯，先不实现这个图片的切换，先实现这个 title 的 高亮。 我们在肯定是在这个循环外面，这不是有个 four 循环吗？我们在这个循环外面添加定时器，然后自动切换。嗯， 我们创建一个函数就叫做 auto switch， 在 这个函数里面就是我们要做一个嗯，自动切换的这么一个逻辑，嗯，在这里面要做什么呢？就是， 呃，给标题，给当前要显示要高量的 标题标签添加 active 类名，这是要做的一件事情。 呃，首先就是当前要高量的就是这个，当前我们当前哪个要高量？我们需要通过一个变量，嗯，来保存。比如说我们在这个函数的外面，一定要在函数的外面 创建一个变量，比如说叫做嗯， current， 嗯， current index 吧，就叫做 当前高量显示的缩影值，缩影值它是， 呃，它是从零开始的，跟跟数组相关嘛？从零开始的，比如说这个第一个标题，它的缩影值就是零一二三四，嗯，然后这个默认的这个变量默认等于零，也就是第一个第一个的位置。 然后就是我们我们得在这个 循环的时候，在刚开始这个放循环的时候，这里面不是创建了这个标题的标签吗？ 我们需要把这个他一共循环了五遍，一共循环了五遍，然后呢？也就是说创建了五个标题，我们需要把这个标题保存在一个数组里面，然后在这个函数里面去使用， 配合这个 current index 去取出当前的这个标题标签。所以说我们得在这个负二循环之前创建一个，就是标题簇，专 门用来保存标题标签的，这叫做 one title tag list 吧， 然后等于一个空数组，然后在循环的时候，在循环创建标签的时候，创建完标签之后，我们把这个 title tag list， 嗯，这里说一下，就是之前在介绍这个数组的时候，在介绍这个数组的时候，只是先 写死，在里面写死了一些纸，但现在我们刚开始它是空的，我们需要嗯，在创建完之后一个一个的塞到这个数组里面去，所以说这个需要我们学习一个就是新的一个 呃功能，就是往这个数，往数据库里面添加新的内容，就是用用什么方式去添加呢？我们在控制台里面演示一下，在这里我先创建一个数据库，这叫 a r， 等于一个空数据库， 往这个数据库里面添加就得第一步先把这个数，把这个数据库名先写上 这个述祖名，他虽然是述祖，但是他是一个对象，他也是一个对象，是对象他里面就有很多的这个属性，可以访问 数组，这个浏览器给我们内置了许多的这个属性，也就是说在这个呃箭头这里面它内置了很多属性，现在我们只看到这个 let's 这个一个属性，对吧？这个 let's 这一个，但是它，但是呢它这里还有一个箭头， 这箭头这里面就有很多属性了，关于这个箭头呢，就属于就是呃进阶里面的一些知识了，这个大家现在不用管，你就把这个箭头里面的这些属性，你看这不有这么多属性吗？当做这个箭头里面的属性 也可以都是一样的，都能访问的。你比如说这里面有一个叫做 push， push， push 就是 推送的意思嘛？推送，然后追加的意思，然后 er 点通过点访问啊， 就跟我们当之前访问 list 属性一样，我们也通过点去访问这个 push， 这个这个属性它你看这个我们在访问 push 的 时候，它会先在这个第一个这个位置 里去找有没有这个 push 属性，它发现只有一个 list 属性，没有这个 push， 那 么它就会向第二层级里面去找，然后 他在第二层级里面找到了 pose， 那 么我们就可以使用这个 pose 属性。如果说我们 去访问了一个不存在的一个东西，那么他首先在第一层级这里面没有找到 abc 这个属性，然后就会去第二层级里面发现也没有 abc 属性，然后最后他这里还有一个箭头， 然后再到第三层级发现也没有 abc 之后呢？他这样他就会，他才会返回这个奥尼范的，奥尼范的代表没有吗？这个大家了解一下就行。然后呢大家只需要记住 a r 点 push， 他 有一个 push 属性，这个 push 属性就是往数组里面，嗯，添加东西，这个 push 它是一个函数，所以说呢，我们要就是加上这个圆括号来调用一下， 我们往这个数组里面就是，呃，嗯，添加什么东西，我们就在这个函数里面写什么东西，比如说我想添加一个数字一，那么我就写一个一，然后回车， 这个返回的一先不用管啊，哎，我怎么把这打开了？你看这个控制台里面，它会自动，在我们使用这个 push 之后，它会自动返回一个一，这个一先不用管， 然后我们再来看一下这个尔瑞，这个数组它里面有什么东西，尔瑞这时候直接输出，直接写一个尔瑞就行，因为在控制台里嘛，它就会自动把这个函数给返回来。 嗯，现在在这个数组里面它就有一条数据，这条数据就是一， 这就是这就说明我们刚才执行这个 push 的 时候就执行成功了。然后现在我还想再新加一些内容，比如说 array 点 push， 我 就不添加数数值了，我添加一个字母串，比如说叫做 log， 我 想把这个字母串，把这个名称 push 到这个 a r 这个数组里面去，然后点一下回车，现在它这个这里面返回一个二，它这个返回的是一个数组的长度，这个大家可以不用，不用关心，不用关心。 然后我们再来看一下这个 eric 这个数值里面有什么东西，它就有一个一和一个 log 这两条数据，一条是数值，一条是字母串，这就是 push 的 作用。 push 就是 往这个数值里面追加一个一条新的数据， 他是在这个，嗯，最后一个位置追加，而不是在前面。你看一在最开始的位置， log 在 最后的位置，我们一是先铺式的， log 是 后铺式的，这个数组它是有顺序的，然后我们回到代码里来。 嗯，我们刚才创建了一个 title tag list 的 一个树组，然后在循环的时候，在创建标签之后，我们把这个，把这个创建后的标签 push 到那个树组里面去。呃，复制一下 点 push， 然后一个圆括号，把这个 typeahead 放到这个 push 这个函数的参数的这个位置上，然后呢？这样就完事了，这样就完事了。 嗯，我发现这个海报这个变量我们好像用不到，我们先把这个变量给它删掉吧，只留一个 clear 就 行。 然后我们现在把这个折叠掉，折叠掉看的清晰一些。 嗯，在这个位置，我们在这个位置就是在控制台里面输出一下这个抬头塔格里斯的这个数据库，然后输出一下它，看看在循环之后，循环完之后这个数据库里面都是什么东西，然后点一下保存， 你看这就是那个数组，那个数组它里面有五个标签，这五个标签都是 diy 标签，我们创建的那个标题标签，这就说明我们 pose 成功了，然后呢，我们在这里就可以去使用了。 呃， 我们现在就是需要根据这个 current index 的 这个数值，把从这个数值里面取出当前要高量的这个标题 取出来，就是很简单，就按之前的那种获取数组数据的方式加一个数值，也就是这个变量，变量不就是一个数值零吗？ 那么现在呢？这个函数它我们用 coslog 输出一下吧， 然后我们调用一下这个函数， 点一下保存，它就会输出这个第一条数据，因为这是零吗？第一条数据是一个 diy 标签，嗯，我们把这个 把获获获取到的这个标签给它保存在一个变量里面，就叫做 tag 吧。 呃， type tag， 呃，就叫做 tag 就 行，没必要那么严谨。嗯，然后再给这个 tag， 再使用这个， 再使用这个叫做，哎，那个函数去哪了啊？叫做这个 at class， 这个函数给标签添加，哎，这不是类型，添加类名。 呃，再使用这个函数，给标签添加类名，然后调用一下，把这个 tag 传传给这这里，然后要添添加类 class list 的是一个序组嘛？要添加什么类名呢？就是 active， ok， 现在我们点一下保存，看看页面，你看第一个，他就是拥有 xt 五这个类名，然后他就是一个高亮的一个状态，因为我们没有使用定时器吗？所以说现在只有，呃， 第一条数据，也就是第一个标签，他才有高亮状态。然后我们就是在执行这些操作完之后， 执行这些操作完之后，我希望它自动切换到下一个，那么就需要给这个 current index 加一，让它切换成下一个，我们点一下等于 重新给这个变量进行赋值，然后就等于 current index 加一就是零，加一，然后点一下保存。 因为因为我们只调用了一遍这个 auto switch 嘛，所以说它只会给第一条数据添加 active 这个类名， 然然后但是呢它这个，它这个 character index 又因为这一行代码的关系，它从零变成一了。我们在这个在调用 auto switch 之后，我们输出一下这个变量， 你看在控制台里面它就是一，那么我们就多调用一次，再调用一次就相当于模拟，模拟那个 模拟那个定时器，调用了两遍，它就会给第一条数据，第二条数据都添加 xt 五这个标签， 然后这个 current index， current index 它就是二，就是意味着就是该进行第三条的这个数据操作了。 嗯，我们再多复制几次吧，一共有五次，一共有五次，一二三四五，一共有五次。 ok， 点一下保存，现在它们全都是高量的一个状态了。然后呢这个 current index 的 一个 current index 的 一个变量值呢，就是五，因为我们这个 current index 它是从零开始的零，一二三四，也就是说最大值就是四，因为我们这里只有五个最大值就是四，现在它的它的一个 值，它的一个变量值是五。如果说我们再调用一次这个 auto switch， 那 么就会，就会，呃，哎，它就会报错，嗯， 这个报错原因呢，就是我们把在这个 typeahead 历史的这个数值里面找不到第五条数据，那么这个 tag 变量就是 unify 的， 我们可以可以看一下， 看一下，输出一下这个 tag 变量，点一下保存，你看前五条都没问题，前五条都是这个标签对象，那么最后一条 他就是阿尼范的，因为他找不到吗？第五条他没有无最大，最大就是五条数据，他所以值如果是五的话，就意味着去找第六条数据，所以说他就是阿尼范的， 那么这个时候呢，我们就需要判断一下这个 current index 了，如果说他的这这个变量值他大于四，零一二三四， 最大值就是四吗？如果说它大于四，那么就得给这个 current index 复制为零，让它从第一个重新开始这样的来回循环， 如果数值大于四，重新复制零。嗯 嗯，我们在在复制完之后进行一个判断，如果 current index 大 于四 该怎么办？就是进行重新复制，重新复制为零，把这个注是放在这里， 现在我们点一下保存，你看页面上就没有报错信息了，而且呢它这个这个 current index 这个输出的一个值，它是一是是一。

要在哪个文件借力， htr 文件就写中他，然后右键通过你是扣打开他，打开之后我们就点击这个新界文件 来参见他，在这里写个名字，他的后缀是 htl， 也可以解开啊，不过一般我们都不解，这样方便看 保存，这样文件就出来了，不过这里他没有， 他没有什么内容，我们通过一个通过这个 emmet 快捷键来生成最基本的结构， 这样一个爱奇天奥的最基本结构就出来了。这个部分是写一些像变成格式啊。 标题，这里是在浏览器能写字的，我们在这里随便输入一个字，一段信息看看，在浏览器就能看见了， 我们打开看看，这个直接在浏览器能打开，可以在这里看到我们这个在这里能显示出来了。

今天我们来讲段落，首先我要先告诉大家一件事，学习前端切记心急，一定要把每一个部分稳扎稳打，才可以写出优秀的，没有缺陷的代码。 今天说的是 he 和 p， 废话不多说，直接上演示。这里先给大家演示 h 一 的写法， a 一 是双标签，所以写的时候要加两个括号， h 一 是写文字时常用的代码，它分为六种，分别是 h 一、 h 二、 h 三、 h 四、 h 五、 h 六。数字越小，等级越高，数字越大，等级越低。等级高的字体大，等级低的字体小。 当然在学习 css 之后，也可以手动调节字体大小。如图演示，分别是 h 一、 h 二、 h 三、 h 四、 h 五、 h 六，大小比对 是不是非常明显。最后，这个代码叫做 p， 也是段落的意思，比如要写一篇文章，划分段落的时候就可以用 p， 再用 h 一 等坐标，体会达到让人满意的效果。 如图所示。这是我做的一篇小文章，虽然没有内容，但是层次可以看出来。利用 h 一、 h 二、 h 三和 p 达到在网页中写一篇文章的效果， 你也可以去试试。这里是我又现场添加了一个 h 三和一个 p。 学习前端是一个很漫长的过程，你需要有足够的耐心和定力，如果有什么问题可以私信我。另外本人也接收代写代码的工作，价格非常便宜，欢迎大家尝试。

前端网页开发入门案例实战第十六集。然后现在我们来完善一下这个，呃， create tag 这个函数，就是我们判断一下这个，呃，备注一下吧。 判断 class list 变量是否 有纸，如果没有纸，也就是调用时没有传递数据，就 设置为空数组。嗯，反正就是这么一个复设置默认值的一个方式。先写一个判断语句，然后在这里面判断一下 class list。 呃，这里怎么判断呢？就是我们判断一下这个， 嗯，因为如果没有没有传的话，没有传这个克拉斯里斯的时候，它就会返回 onifone 嘛， 我们也不能直接判断 onifone， 我 们得判断它是不是数组。嗯，我们得判断这个变量是不是数组。 怎么判断它是不是序组呢？我们刚才用刚才这个 type off， 那 type off， 它判断一个序组，它返回的是一个 object， 而不是一个序组的一个标识，所以说通过 type off 来判断它是不是不是一个。呃，合适的一个方案。 呃，我们这里就得介绍一个新的一个东西，在 g s 里面，他有一个叫做而瑞的这么一个对象，他是大写的，大写的 a， 然后呢？他对象对象里面有属性吗？它里面有一个就是 is 而瑞 这个方法，这个函数 is a r， 就是 判断判断这个参数是不是数值。比如说我们传入一个空数组， 它就是返回处，就代表说我们传入的这个参数它是数值。你比如说我们再来一个 a r， 点 is a r， 我 们把这个一二三传过去， 我们把一个一百二十三这个数值传过去，它不是数值。所以说呢，返回 false， 然后我们再把 这个这个对象空对象传过去，它也返回 false。 所以 说呢，判断是不是数值，就用 array 这个对象里面的 is， array 这个函数来判断，而不是用 type off 来判断，用这个来判断是最准确的。 所以说呢，我们得在这个圆括号里面这样写，而瑞点 is， 而瑞， 然后写一个括号调用一下，因为它是函数，所以说我们要呃写一个圆括号进行一个调用，我们把这个我们要判断的这个变量给它传过去，我们要判断这个 class 是 不是数值， 如果是他就返回处，如果不是就返回 false， 但是我们现在想让，就是说想让他在返回 false 的 时候给他复制默认值，如果，如果不是数值， 如果不是数值，呃，我们修改一下这个备注，如果不是数值就设置为空数组， 那么如果它返回处了，那么我们不需要去做做什么操作，因为它就是一个数组，如果它返回 false， 就 会执行 else 这里面的，所以说我们就得 class list 给它 设置成一个空数组，我们该这样，但是呢，现在这个代码里它有有一些多余的代码，就是说这一部分 他是没有执行代码的，而且呢也不需要执行任何代码，就是我该怎么去优化这这个代码呢？我想把这个就是复制空数组的这个这个操作啊，这个代码给他放到这里面，我不需要这个 else 这个这个东西， 那么我就得想办法把这个把这一段代码让它返回处，而不是 false， 因为第一个花括号它是只有返回处的时候才去执行的嘛。嗯，但是怎么让它返回 false， 返回处呢？ 我们接下来介绍一个新的一个，呃，一个运算符跟大于号等于号，那些都是一样的运算符。 一个感叹号就是一个感叹号，这个感叹号呢，它是取反的操作，嗯，什么意思？就是取反，什么意思呢？比如说我们我们要感叹号后面跟着一个 false， 那 么它的返回结果就是一个处， 因为 false 的 一个相反的就是处嘛。然后如果说感叹号后面跟着一个处，那么他就会返回 false， 反正就是处和 false 来回的切换。 比如说我们要对一个一百二十三进行一个取反，一百二十三，在刚才这个呃介绍判断的时候，呃，我们已经删了。在刚才介绍判断语句的时候，一百二十三会被自动转换成处， 所以说呢，这个位置它就是一个处，然后我们再对处进行一个取反，所以说呢，它就是一个 false， 它同这个这一个代码同理成这样，因为一百二十三会被转换成处。嗯，然后呢，比如说感叹号后面跟着一个零， 因为零他会被自动转换成 false 嘛，所以说 false 取反之后就是处，嗯，就是这么一个意思，取反的一个操作，那么我们就可以就是说在这里面进行一个判断了，就是进行一个转换取反的一个操作。 如果这个 class list 它是一个。嗯嗯，备注一下吧，如果 class list 是 一个数组， is a ray， 这个函数就会返回 true， 如果不是数组就会返回 false。 对返回结果进行取反，就可以在第一个花括号，花括号里写代码。 如进行进行一个取反呢，就代表说这里是返回这个，这一段代码返回了一个 false 了， 取反就代表说，呃，如果说这里要想让它执行这个第一个花括号，那么就得让它变成处，但是呢，我们它只有在 class list 的 不是数组的情况下才 才会让它走这里，那么就就得对它进行一个取反，当它为返回 false 的 时候，再进行一个取反，就让它变成处了， 然后就会走这个代码，那么返回 false 的 时候呢？就是这个卡拉斯克拉斯利斯的，他不是数组的情况，不是数组的时候才会返回 false， 嗯，再对，再对 false 进行一个取反，就会 就会执行这个这一段代码，然后就会对这个克拉斯利斯的给他复制成一个空数组。现在这个设置默认值这块我们我们算是就是说给他做完了，我们把这个， 把这个，呃副标题这个克拉斯利斯的给他去掉，不需要点一下保存， 你看这个控制台，这里面也没有报任何的错误。然后呢，这里还正常的，正常的炫就是加载创建，但是呢他这个副标题他是没有样式的，因为我们把这个类名呢给他删掉了，就没有添加类名，他就使用黑体这种普通的文字。 呃，然后我们我们再来看一下这个，我们输出一下这个克拉斯 list， 点下保存。呃，因为他有很多个嘛，因为， 因为他有这里有五个，这里输出了十五遍，我们不用管。不用管这么多啊，也不是说输出了十五遍，输出了，输出了五组，五组每三个是一组，每三个是一组。 呃，我们不用管下面这几组啊，我们只用看前三个，第一个就是这个，第一个是这个，呃， 专栏像容器的容器标签的一个类名，第二个是主标题的一个类名，第三个就是副标题的类名，因为我们没有 没有指定这个 classlist 的 这个属性，所以说呢，它被默认的被设置成了这个呃一个空数组了， 这样就会避免这个代码报错，然后导致这个呃页面创建不了，加载不了。嗯，现在我们把这个 classlist 再给它呃添加回来， ok， 这个现在页面是比较正常的了。接下来这个 text content， 也就是说为标签设置这个文本人本内容，还有就是说这个 app store， 也就是说把一个标签放到 放到指定标签里面，嗯，这两个我们也做成一个函数，呃，因为也比较常用，常常用。然后这个 text content 呢，我们要给它集成在这个 create tag 里面， 在创建标签的时候就可以给它指定这个标签的这个文本是什么？呃，我们，呃大家可以就是说 通过这个 vs code 的 这个软件，按住 ctrl 键，然后鼠标旋停在这个函数的这个变量名称上面， 你看它这个，呃，按住 ctrl 键之后，它这个字体它就变了，然后你再鼠标左键点击一下，它就会跳到这个函数的这个创建函数的这个位置上，这个是一件，是一个很快捷的一个方式。 呃，我们在这里就是加一个参数，就是，嗯，叫做在 purpose 这个对象里面加一个就叫做 content 的 这么一个，呃属性，这个就是呃标签的内容，呃，文本内容吧， 我们在这里给它就是另存到，另存为一个变量里面，就叫做 content purpose 点 content， 嗯，就这样。然后呢， 这 content 它我们要不要给它设置默认值呢？其实，嗯，其实不用设置默认值， 如果不给这个 content 存值，就它就是这个 onifone 嘛，它就是 onifone 的， 嗯， onifone 的 也没事，它不会在这个页面上显示任何东西。所以说呢，我们就不用像这个 classlist 一 样，就说给它设置默认值， 嗯，然后这个给标签设置文本内容的这个代码，我们也给他写一个新的函数，就是说虽然说我们集成在这个 create tag 里面，但是我们不把代码写死在这里面，而是新创建一个函数， 在这个在这里就是给标签添加文本内容，新建一个函数，就叫做就是 set content 吧。设置文本内容嘛，然后他接受一个参数， 接受一个叫做 content 的 这么一个参数，就是文本内容，然后呢在这里接受一个参数， 呃，啊，不，他除了接受一个 content 的 这个文本内容之外，还得接收一个这个叫做一个 tab 标签的这么一个， 呃，参数标签对象就是创建出来的那个标签，嗯，因为我们要给指定的标签添加内容嘛，叫做 tab 点 content 等于 content， 其实就就这一小段代码，然后我们给他封装成一个函数， 嗯，我们在这个，在这个库瑞特 tag 里面就是调用一下这个 set content 这么一个函数，然后把这个 tag 对 象给它传过来，第一个是它 tag 对 象，第二个就是这个 content 这个值， 嗯，然后我们再回到这个代码里来，这个，这个这里来。呃，我们把这里修改一下， 嗯，把这里复制一下，就是这个是主标题的文本内容，把这个主标题的文本内容复制一下，然后找到主标题创建的时候，在这里传一个 content 这么一个属性，这是一个对象吗？给他传一个 content， 然后把这个值传给他， 这样就是在创建变量的时候，就是就呃，一起把这个文本内容也给他设置了，很方便。然后这个副标题这里，我们也给他把这个值给他复制一下，然后写一个 ctrl 属性。 现在现在这个这里就简洁了许多，就是在在创建，在创建标签的时候，呃，既创建了标签对象，也给他复制了这个 class 类名，还设置了这个这个文本内容，所以说这个简化了一些。 呃，这个 applet 我 们也给它设置成一个函数，但这个但这个函数就不给他。呃， 这个函数也我们也可以给它集成在这个 create tag 里面，就是在创建标签的时候，给它插入到指定的这个标签里面。 嗯，我们我们先写一个，先单独写一个，这个，呃，就是另存为，就是这个对象吧。呃，函数就是把标签插入到， 其实这个不能说插入，插入它是指什么意思？你看 你看，这不就是那五个菜单专专项吗？插入就代表说，呃，你在这个指定的这个中间位置或者某个位置去放一个新的标签对象，而这个 applet 呢？它是追加的意思。 追加是什么意思？追加就是在这个在这些标签的最下面这个位置新加一个，新加一个标签对象，所以说我们这里应该就是叫做把标签 追加到指定标签上，而不是说插入，插入它是另一回事，不是一个概念。 function apple child， 就 直接叫 apple child 就 行。然后我们要接受一个 parent 这么一个 parent tag， parent tag 也就是负标签对象，还有就是 tag， 就是 被追加的标签对象，就这么两个参数，呃，我们在这里写一下， 就叫做 tag parent tag 点 apple 等于 tag， 呃，不对，这个 apple 它是一个函数，不能写，等于号 点 tag， 嗯，就这样写。然后我们在这个 create tag 这里面也集成一下，就叫做 properties 点 parent tag， 负， 把创建的标签对象追加到这个对对象里面。 one parent tag， 然后这个 parent tag 我 们不用给它设置默认值，但是呢，我们需要给它判断一下，如果在创建标签的时候指定了它的负极标签，那么就把 把创建的这个新标签给他追加到这个，呃，这个副标签里面，如果没有指定这个副标签，那么就不追加了，因为没有就，嗯，也没法追加嘛，对吧？所以说呢，我们需要先判断一下， 如果指定了指定，哎， 如果指定了负极标签对象，就把创建的新对象追加到负，呃，负标签对象中， 嗯，判断语句呢？就是这个 if 嘛。如果，然后在这里写判断条件，也就是我们判断这个 parent tag 有 没有值， 咳，这个我们直接写个写一个 parent tag 变量就可以了。如果就是如果这个 parent tag 它有标签对象，假如说有指定了腹肌 标签对象，那么这个 parent tag 它就是一个对象，就是一个对象，也就说这就是一个括号。 花括号呢，他不管是空的还是不是空的，他都是他的，返回结果呢？他就是他都会被自动转换成处，也就是说会执行第一个花括号里面的代码，那么如果没有指定负极标签对象， 那么这个 python tag 呢？它就等于 unify 的， unify 的 呢，它会被自动转换成 false， false 呢它就不，它就不会执行这个第一个花括号里面的代码。所以说呢，我们直接 把这个 python tag 这个变量放到这里面就行，依靠它的自动转换功能去实现，就是说，嗯，值不执行这个第一个花括号里面的代码， 我们调用一下刚才创建的 append child 这个函数，呃，然后 第一个是负极标签对象，就是 parent tag， 第二个就是新创建的对象，也就说这个 tag， 嗯，这样就完事了，然后然后再呃， 嗯，这里说一下，就是我们这个 add class， 还有这个 set content， 还有这个 applet， 它的这个在创建函数的时候，它都是定义在这个 crate crate tag 这个下面，也就是说，咳，也就是说先执行这个 crate tag， 然后呢再执行这个 add class。 但是呢，我们在这里面又使用了这这些函数，但为什么没有像变量一样，就是说先使用后创建，没有像变量那样的去报错呢？ 这个这是函数的一个内一个特性，他就是浏览器，他会先给这个函数先定义一遍，先创建一遍，先把这个函数先都创建一遍，然后呢再去等调用的时候再去执行这里面的代码， 也就是说他先把这个函数创建，然后先不管你这里面的内容，呃，然后呢等定等调用的时候再去这个， 再去直实际执行这里面的这个这些代码。所以说呢，在调用的时候，你这些变量就已经创建完了，因为这个创建变量创建函数的这个过程呢？它是发生在最最最开始的一个位置。嗯 嗯，但是为了清晰呢，我们就把这些函数给他放在这个，呃最上面吧，其实放不放在最上面都可以，函数你放在哪里都行。 嗯，现在我们在这个 create tag 这里面就是指定，就是，呃，集成了这个追加的这么一个功能，我们在这里给它修改一下。 呃，这怎么修改呢？就是 menu tag， 就是 这个主标题和副标题它都属于这个 menu tag 这个这个 标签对象里面的内容。所以说呢，在主标题创建的时候，我们就给他指定一个 parent tag 这么一个属性，然后给他指定成 menu item tag， 也就是菜单专栏像的容器的这么一个。呃，标签对象，然后副标题也一样，就是 parent tag 等于 menu item tag， 嗯，然后把这两段代码给它删掉了就可以了。 现在你看是不是清晰了很多？在这个循环这里面，我们只需要调用一下函数就能把相关就是我们需要的这些功能都给它实现了， 总比写一一大堆的代码要强很多。然后呢就是这个，这个，这个追加这个嗨的 n v tag， 它是这个，呃，那么它把这个 menu item tag 给它当做一个字集追加到这个 hide n v tag 这里面来了。所以说呢，我们在创建 menu item tag 的 时候也给它指定一个 parent tag， 等于，呃不，不是，等于是冒号，冒号，然后 hide n v tag 就 这样，然后呢再把这个给它删掉， 现在就是因为你看这个，呃，我们先保存一下代码吧，看看效果，现在我现，嗯现在没有这个 页面上没东西，我们看一下是因为什么情况？我们检查一下这个目录结构， 呃，它是有，它是你看这些主标题、副标题的标签它都是有的，但是它这个 spa 这个标签里面它是没有内容的，也就没有没有那些文字的，那么就是说这个 content 这里面出现问题了。呃，我们看一下这个 content 出现什么问题了？ 嗯，我们先先在这个 create tag 这里面就是输出一下在控制台这里，在控制台这里输出一下这个 content， 看看有没有把值给它传进来。 嗯，我们在我们在这个它，它确实把这些游戏资料跟 me for 这些文本内容它都传进来了，但是呢它并没有给这个标签设置设置一个文本内容。嗯， 那么我们就看看这个 set content 这里面是不是出现问题了？ set content 这个函数 是是这，哦，它这个不叫给给文本内容设置，不是给标签设置文本内容，不是用这个，不是用这个属性，而是用 text content， 嗯，只写错了刚才，然后我们点一下保存，嗯，现在全都有了。 嗯，现在我们这个循环这里面就只剩下这三段代码了， 分别都是它都是调用一个函数就可以了，所以说呢是特别方便的。然后呢然后就是这个 这个变量这个问题，你看这个 menu， item， title， tag 这个是主标题嘛？我们全区搜一下，按住 ctrl ctrl c 复制一下，然后再按一下 ctrl v 调起来这个 查询的这个这个小菜单栏。然后呢我们在这里可以看到就第一项，共一项，也就是说在这个文件里面，我搜索这个这个文字，一共搜到了一项，然后这个高亮的呢，这是第一项， 这共一项呢，就代表说我这个变量他创建了，但是我没有使用。针对这种创建但不使用的这些，我们就给他删掉，就不创建就行了，我们就直接调用这个库瑞特塔格就可以了，我们并不使用他创建出来的这个对象。 咳咳咳，这个 subtitle， subtitle 副标题它也是一样的，就是说共一项，就是说嗯，创建了，但没有使用，像这种呢，我们就不给它创建，我们就直接调用函数，然后创建创建这个 标签对象，然后赋值这些东西，因为它通过这个 python tag 就 已经把创新建的这个标签对象就已经给它，嗯，追加到这个标签这个标签对象里面了。所以说呢，就不用再。 嗯，再创建一个变量，接收这个创建后的这个标签了。但是这个 menu item tag 呢，它是需要的，因为这个 menu item tag 呢，它在这个主标题和副标题这里都有用到这个标签对象，所以说呢，就需要把这个标签对象给它保存到这个， 保存到一个变量里面，方便使用。嗯，如果你不保存到一个变量里面，你就使用不了。

前端网页开发入门案例实战第二十九集，接下来呢，就是给这个标题加上一个背景图片，这个这个图片呢？它是在，嗯，在哪里？我得看一下，不是这个文件 在这啊，在这个 index 杠 s p r 这个点拼记这个文件里面，它在最下面这个位置，你看它这有这些线条，我们要把这个位置， 把这个位置放到这个标题的这个背景图片里去，所以说我们需要先把这个 index 杠 s p r 这个类名，我们在很早就已经。哎， 哦，我们没有写一个公共的类名，我看之前有没有地方用到过， 嗯，没有啊，还没有用到过这个文件。 嗯，我们在 in 在 这个 css 文件下面的这个 index， 点 css 这里， 我们类似于这个创建一个公共的一个类名，就叫做 index 背景图，然后点 index 杠 s p r， 然后把这个复制过来，把这复制过来，把这个文件的名称改一下，改成这个 index 杠 s p r， 点拼音记，然后保存。嗯，我们回到这个这个 boss， 点击 s， 点击 s 这个文件里来，给这个， 给这个这个 type 标题添加一个， 哎，添加一个 index 杠 spr 的 一个背景图片，嗯，这个类名，然后呢？ ok， 它，你看它，它这里有个点，这个背景图片不是很明显。嗯， 因为之前已经介绍过很多方式了，就是这种添加背景图片，然后再通过定位调整图片的位置，已经介绍很多遍了，这里呢，我就直接根据这个 实力，这个这个完成的这个案例去直接把代码复制过来就行。 嗯，回到这个这个这个 boss 点 css 这个文件里来，然后我们再给这个 title 加一个这个 background 光 position， 然后它的一个值呢？就是零， 就是水平位置，水平位置不变，然后垂直位置，然后向下移动，不对，向上移动，一个四百五十八像素。 ok， 点一下保存，现在我们看一下，现在你看他就有， 他就有这些。这个，呃，把这个图片的一个位置呢给他就调整好了，调整好了这里就 就写写这个数值就行，就不用再去这个一些设计软件上再去自己去弄了。因为之前已经知道怎么用过了，所以这里直接直接附用就行。 嗯，接下来就是这个每一条数据了，每一条数据我们先给每一条数据的边框添加一个边框的样子，现在每一条数据都要添加一个上边框，都要添加一个上边框， 就是这个 item item 添加一个上边框啊，把这个 bug 杠 top 这个样式给它复制过来就行。点一下保存，我们看一下，嗯，它是，嗯，放大一下， 他是都有这个边框了，嗯，就就这样。然后呢？然后就是这个这个日期，日期这里我们给他修改一下字体，字体颜色他我们看一下，他就是一个这个颜色纸。 呃，这里我们要把这个 date 这个类名复制一下，给这个类名添加一个样式，添加一个 color， 等于我刚才复制的一个颜色值，就是九 d， 九 d， 九 d 就是 这么一个颜色值。点一下保存， ok， 这个日期这块就调整好了，然后把多余的文件给它关一下。 嗯，接下来就是这个这个每一个标签，然后还有这个文字的一个这个标题的一个文字了， 这个稍微小小的复杂一些，因为就是每个标签它的颜色都不一样，这个我们需要处理一下 这里呢，我们需要回到这个 g s 这里面来，在 g s， 嗯，在这个循环这里，在这个 for 循环这里，我们需要给这个， 啊，不对，就给这个 item 给，我们需要操作一下这个 item 这个标签， 就是我们需要把这个每个类型他这个类型给他放到这个通过一个类名 保存在这个标签上。呃，就比如，假如说，假如说这个都是一个视频，假如说这这每一条数据都是视频，那么就给他这个，给这个艾特姆这个标签添加一个微丢这么一个类名。 那，那如果是公告呢？就添加一个 notice 这么一个类名，就是说根据这个不同的类型添加不同的一个 class 类名，我们要做一个这么操作，嗯， 我们在我们先从简单来做吧，先从简单来做哦，比如说我们要做一个判断， 如果是视频类型就添加 video 类名，我们就先做这个， 先写一个判断语句。然后呢，如果，如果这个 item date 点 type， 视频是什么？视频就是零，视频就是零，如果 type 值等于零，那么就通过 add class 这个函数 给这个艾特木塔格这个标签添加一个微丢。嗯，然后因为因为它有四种类型嘛，所以说我们要做四个判断，如果是新闻 类型，就添加 news 里面，我们 同理需要写一个这个 item date 点 type 等于新闻的值是一，如果 type 值等于一，那么就 add class item tag， 跟着它添加一个 us， 呃，如果是，如果是公告公告类型， 就添加 notice 这么一个类别。 如果 item date 点 type 等于，呃，公告是二等于二，然后 add class at the tag， 然后 that is， 然后如果是，呃剩下一个是赛事 类型，就添加 competition 这么一个类型。如果 item tag 点 type 等于三， add class item tag， ok， 然后我们点一下保存，看一下效果，我们右键检查一下，看一下这个标签， 嗯，你看看这里，在这个位置，每个 class 的 最后一个位置，它，你看这个第一条是视频，那么它就有一个 video 的 这么一个类名。第二条，呃， 第二条啊，第二条啊，第二条也是一个视频，所以说它也有一个 video 的 这么一个类名， 嗯，这样吧。第三条是新闻，那么它就是 news， 第四条就是视频还是 video。 第二条，这个第五条就是新闻，就是 news。 然后公告呢？就是 notice， 所以 说我们要把它的类型，把每一条数据的类型通过这个 class 显示在这个每个标签上面，之后我们才方便去调整样式。呃，我们先给这个每个标题添加一个这个字体颜色，它默认的字体颜色就是一个偏灰色的这么一个颜色， 我们要给这个这个 link link 这个标签 添加一个 color， 颜色值呢？就是颜色值就是四二，四二四二，然后点一下保存，嗯，就是这么一个颜色值，然后然后就是该怎么去给它们添加不同的这个颜色？ 先拿视频来说吧，视频是这个颜色值，是这个颜色值它的一个，我看一下它的一个颜色值是多少？是一个这个， ok， 那 么我们怎么写代码呢？ 这每一个 item， 也就是每一条数据都有各自的类型的一个类名，那么我们就可以通过 类名这个 video 这个类名去给这个每他的子集，比如说这个 tag 这个标签，还有这个 link 这个标签添加样式了，就用我们之前写的 先写一个这个 item 这个类名，然后后面紧跟着 video， 也就是说 item 这个标签既有 item 这个类名，也有这个 video 这个类名的时候， 我们要给这个 link 这个标签添加一个样式，就是每一条数据那个标签同时具有 item， 而且还有 video 的 时候才给这个 link 加加样式。 嗯，这个 link 呢？他是，呃，我们先，我们先给他加一个 car 吧，加一个字体颜色，就这个颜色值就是一九八五二 d， 点一下保存， 你看，这就有了，只有当它是 video video 视频嘛，只有当是视频的时候才给这个字体添加添加样式，嗯，你看这两个视频它都有了， ok， 我 们再通过类似的方式把剩余三个类型也给它添加添加一下样式，也就是一个是，呃， 一个是 video， 还有一个是 news， news 是 新闻，新闻是一个什么颜色纸呢？新闻是这个 新闻是 e d a 六 b a， 点一下保存看一下， ok， 你 看新闻的都变成这个青色的了。 然后还有一个就是这个 notice 公告， 公告是一个什么颜色，是这个 这种颜色，它是 b b 九 a 六 c， 嗯，就这个颜色。 还有最后一个就是赛事了，赛事是这个 赛事的一个 是一个蓝色， 赛事是六三八八 c 五， 哦，嗯，赛事，嗯，这赛事的一个颜色，现在我不想让这个颜色，就是一直都是这种，这种，这种， 嗯，这种敞亮的一个状态，我想让鼠标悬停的时候才显示，才显示对应的一个颜色，所以说我们需要在这个 link 这个后面加上一个 hover， 冒号杠 hover， 嗯，后边就是鼠标移动到上面的时候才应用样式嘛，一定要给每一个都加上 点一下，保存， ok。 现在他们默认都是一个这种黑色的一个样子颜色，鼠标选完停之后呢，他就有各自的一个颜色了，嗯，这就是我想要的一个效果。 然后接下来就是这个每个标签了，每个标签首先它这个标签的字体，字体它是比较小的，这个字体我们要给它调小一些， 也就是这个 tag 这个 class 类型字体呢，这里就使用十二像素就行了，十二像素是很小的一个了，十二像素，然后再给它们每一个都指定一个宽度和高度， 是一个让他变成一个长方形，那么宽度是三十六，高度是二十，这里就直接照搬了。三十六，高度是二十点一下保存， ok。 嗯，因为没有边框嘛，看不出效果来，我们给它们加一个边框， builder 就 只使用一个 builder 就 可以了，不需要使用钢 top 啊，钢 left 什么的，因为它是四个方向都有，所以说就使用一个 builder 就 可以了。为同时为四个方向添加 边框，先添加一个黑色的边框，看一下效果， ok。 现在有边框了，但是呢，这个文字呢，我们需要让他，嗯水平垂直居中，让他在最中间的一个位置， 在最中间呢，就已经用过很多遍了，就是使用一个叫做， 呃，我来这儿吧，来 alt 点 c， s， n， 就 用这个类名，把这个类名给到给到这个 tag 这个标签上面去，嗯，这样就可以了。接下来就是 颜色了，颜色我们还是需要就是像这样像之前这样去写一堆的这个样式，我们先先把这一坨给它，啊不， 哎，先复制一个微丢吧，别复制一坨了，一坨太太，那什么微丢，然后给微丢微丢下面下面的这个 tab， 这个这个类名 添加样式，那么一个是字体样式，还有一个是边框的一个样式，我们可以通过检查看一下成品，这里面字体样式就是这个，也就是 color 这个颜色值，然后边框的一个样式呢，就是这个， 因为我们之前已经写给这个给这个标签，给这个每个标签呢都添加了一个 边框了，所以说我们这里就不用再重复的去写了，比如一像素这个颜色值，嗯，不用再这样重复了，我们就直接 使用包单杠卡了，杠卡了。颜色嘛，就边框的颜色给给边框添加颜色，我们就把这个颜色值给他，赋值给这个属性就可以了， 就不用再这样像这样再写一遍了，直接他把黑色的一个这个颜色值给他替换成这个颜色值了，点一下保存，我们看一下效果，我给你看视频呢，都都被设置成这个样式了，然后 他不需要加后尾啊，他就是一个常亮的一个状态。然后呢就同理我们把这个 把 news 新闻也做一下，新闻就是新闻是一个什么颜色呢？新闻就是这个，检查一下 新闻的一个边框 bottom color 的 一个颜色值呢是六、九、 c 五、 d 二，然后它的一个字体颜色呢，就是 这个字体颜色，就是 e、 d a 六 b a， 点一下保存看一下，这是新闻，嗯，新闻，然后接下来就是公告了， 公告 notice， 嗯，然后在这里看一下， 公告的一个边框的颜色是这个 c 五 a b 八六，然后它的一个字体颜色就是这个 bb 九 a 六 c， ok， 公告有这个了。 然后最后一个就是赛事， 赛事赛事的一个颜色值是这个蓝色的 边框就是九七 a f c 五，字体呢就是六三八八 c 五， ok， 点一下保存看一下， 嗯，赛事也加上了，现在呢这个颜色我们就已经做完了。然后我们还有最后一个要做的，就是你看这个， 这是成品里的，你看它的文字呢，很长，我这里呢我们没有做处理，所以说它是换行显示了， 这有两行默认我，我，但这样太难看了，我想让他只有只有一行，然后多余的呢就给他这个隐藏掉，多余的就给他隐藏掉。还有呢就是这个 胎头，这里你看胎也换好了，很难看，很难看。这里呢成品这里呢也是只显示一行，并且呢这后面加了一个三个点省略号， 嗯，代表着，嗯，还有剩余的，所以说我们要把这个给他做一下，其实这个省略号呢，我们也可以用在这里，你看他这里没有省略号，其实我们也可以给他加加上， 嗯，这是一个新的一个知识点，就是说让文字不换行，并且多余的文字呢给他隐藏掉，然后使用省略号去显示，这个是一个新的知识点，我们需要学习一下 新的知识点呢，我们在这个开发者工具里面去演示一下，演示一下 他这个要想让这个文字不换行，并且显示省略号，也就是三个点，他用到的不止一个属性，需要用到三个属性，我们分别来看一下这三个属性是什么。 首先第一步我们先让他不换行，不换行，然后就得用到 wait space， 用到这个属性，这个属性就是控制，说控制你这个文字要不要换行。 然后其实专业的呢？其实叫做如何处理这个页面上的空白，但是这里大家可以不用不用去深入的了解， 就了解一个，就知道一个这个这个属性值叫做 noop， noop 就是 不换行嘛，你看现在它这个 文字都是只只在一行里显示了，如果我把这个前面这个勾给它取消掉，就不不使用这个样式，那么它就是一个自动化黄的换行的一个效果， 打开， ok， 现在不换行了，但是呢，你看它的两侧这个文字是已经超出了 这个这个这个这个公告版的这个范围了，我想让它超出之后就隐藏掉，超出隐藏呢？这个用一个 over flow 等于黑的这么一个属性，这个已经大家已经用过了，这个就不多讲了。 然后呢，最后一步呢，就是让这个，嗯，给它添加一个省略号嘛，添加省略号也是用到一个新的属性，叫做 text the gun overflow， 就是 文字溢出后该怎么显示 它这个，嗯，这个属性只能不用管，大家只用看这个 ellipse， 这个加完之后它还是没有显示省略号，这个这个单词就是省略号的意思嘛。然后但是我们加完之后呢，它并没有这个显示，这是 这是因为就是我们给这个，给这个标题这个标签添加了这个 flex 这个布局了，因为我们要让它实现这个水平垂直居中嘛，所以说我们这里用到了 flex 布局， 嗯，我们把这个 flax 给它关掉，关掉，不使用。你看现在它就是一个拥有省略号的一个文字了，这个它受这个布局的影响，所以这里呢？ 嗯，我想，我，我想让它显示省略号，但是，嗯，它还得实现水平垂直居中。所以这里呢，我就 不使用 flex 了，不使用 flex， 使用，使用其他方式，因为使用其他方式也能实现这个水平垂直居中，但是呢，这个省略号就只能使用这三个了，所以说我们需要在代码里找到 这个 title 这个标签，我们把这这三个属性给它复制过来。 ok， 点一下保存，现在我们刷新一下页面， 嗯，现在它是不换行了，但是它没有省略号。嗯，其实我在想呢， 要不要要不要这个添加省略号？因为你，你，你如果说去掉 flax 布局的话，就得再介绍一个新的知识点，嗯， 因为我们是入门阶段嘛，我想我想的是，就是能说的越少越好，所以说呢，这里， 嗯，我就不要那个省略号了，不要了，不要，省略号，就，就，就这样展示就行，就这样展示吧，这样也可以。然后就是这里 这个每个每条数据里面的这个标题也要，也要让它只显示一行，也要只显示一行。所以说呢，我要，我们要把这三个，把这三个属性往这个 link， 这是 link 吗？啊，这个 link， 这里给它也加上一个，点一下保存， ok， 嗯，很意外啊，这里为什么就会显示三个点？ 我们右键检查一下。哦，因为， 因为这个 link 它没有，就是说 display 等于 flex， 它没有，但这个这个这里它是有的，所以说呢，这里它是有三个点的，有省略号的。 那假如说你看我们给这个也设置成添加 flag， 那 么它就没有了，所以是这里有，但这里啊，这里它没有，是因为文字就已经到这就没了，没了，没文字了， 嗯，这样就就可以了，然后还要做的完美一些呢，就是你看这三个属性，我们写了两遍，我们写了两遍， 嗯，两遍还能接受，如果是三遍、四遍呢，就很难接受了，所以说呢，我想把它就是抽离成公共的一个属性， 然后属性值呢，就叫做省略号吧，就就我们就把这个单词复制一下就行了。然后回到这个 index 点 css 这里，我们就不在勒 out 点 css 这里写了，因为这里面是跟布局相关的，我们就在 index 点 css 去写吧。 嗯，在这里添加一个备注，就是说文字超出时显示省略号， 然后用用这个单词作为一个类名，我们把这个，把这三个属性给它复制过来， 保存一下，然后把这三个给它删掉，然后在这个 bug 点 gs 这里面，我们把这个类名给这个，给 title 复制一个， 给这个，给这个 link 也添加一个，点一下保存。 ok， 还是有这个效果的，没什么变化。嗯，这样就这样就可以了。 接下来我们做这个底部的这个按钮，这个按钮呢，呃，比较特殊一些，首先就是它， 呃，我们把鼠标移动到这个按钮上面去，这个箭头呢，它就会跳动，向右跳动。嗯， 但是呢，其他地方也是有这种效果的，你比如说这个热门活动，这里也有一个按钮旋停上去之后也可以跳动，在这个周免这块他也是可以跳动的，还有下面这里这都可以，所以说呢，我们要把这个按钮 给他像这个标签页一样抽离成一个公共的函数，到时候在这里使用的时候直接调用函数就行了。 但是呢这个按钮跟这个按钮以及这些按钮他们的样子都不太一样，你看这个就这么长，这个就这么短，然后这个呢他就是金黄色的，这里跟还是这么短， 这个我们该怎么去实现呢？虽然就是虽然说他们就是这个样子不一样，但是他还是有一样的地方的，就比如说箭头，还有箭头左边的这个文字， 你比如说这个箭头左边的文字就是最新资讯这个阅读更多，我们不把不把它包含在内啊，把它排出去就就看最新资讯，那么只看这一点的话，是不是跟这个是一样的？ 那么周免这块呢？我们只看箭头以及字体，这个金黄色方块呢，我们给他忽略掉，那么是不是也跟这个都是一样的呢？所以，所以呢我们就单独的把这一小块给他 这个抽离成一个函数，呃，这些呢还是该怎么写就怎么写， 接下来我们先把这个这个按钮给它实现了，至于说这个跳动的这个部分，我们往后慢慢实现，先回到这个 bug 点 g s 这里面来。呃，我们在在 index html 这个文件里， 嗯，我们给这个 photo 这个标签添加一个 id 属性，方便我们一会获取这个标签 在在这个， 呃，我们简单起见吧，我们这个这个 photo 这块我们就直接使用 html 去编写了，而不是使用 js 去编写。我们先在这里面写加一个 span 标签， 然后 span 标签里面是阅读更多，先先把阅读更多这几个文字给它实现了，然后点一下保存，现在它就是有的 这个按钮呢，它是水平垂直居中的一个状态，所以说我们要给它加一个公共的类名，就是这个水平垂直居中，我们把这个类名给到这个 photo 这个标签，在这个 photo 里面加一个空格，然后放上这个类名就行了， 然后现在它是一个位置，就是一个对的了。然后再修改一下这个字体颜色，字体的样式我们看一下，我们看一下这个字体样式是什么？字体样式是这个， 我们需要需要在 css 文件里面 给这个 photo 添加一个类名。