html返回按钮怎么设置

现在页面有一个回到顶部的按钮，大家都知道通过为标签秒点即可实现回到顶部的操作。 目前回到顶部的功能是实现了，但是没有过度缓冲的效果。这时候想到了 css 的 scroll behavior 属性，给当前页面的根源素加上该属性，发现并没有任何卵用， 然后再给项目最外层盒子加上，也同样没有生效， 只有给 h t m 有根元素加才能生效， 即使在巴迪上使用也是没有效果的。知道原因的朋友可以在评论区留言， 然后顺便来看一下 program behavior 的相关属性值以及兼容性。我们把头旋转九十度可以看到它的兼容性还是蛮友好的。

这个视频我们介绍两种方法，用 gs 实现返回页面顶部的功能，现在呢，我下拉页面在右下角呢，有一个返回顶部的悬浮按钮啊，我们点击一下它就可以返回到页面顶部。 除了返回页面顶部，还可以随便返回到页面任意一个位置，像以前类似的功能呢，可能会用到锚点， 但是锚点的定位功能呢，没有用 gs 灵活，并且对页面的链接多多少少都会有点影响，比方需要后退到上一个页面呢，可能就会有问题哈，这里我们说一下用 gs 怎么实现， 看一下代码，页面布局非常简单，用了八个地方来模拟页面的内容，还有一个返回顶部的按钮，现在下拉页面点击这个返回顶部的按钮呢，是没有效果的，我们来学一下 j s， 这里会给大家介绍两种方法，先获取到返回顶部的这个按钮，监听一下它的点击事件， 然后来看一下，当点击按钮的时候，希望页面它返回到哪一个位置，这里呢一共有八个点， 比方我希望页面他返回到顶部呢，其实就是返回到第一个地府的顶部，对吧？所以就要先把第一个地府的对象呢获取下来， 第一个呢就是这个集合里面的第零个哈，然后呢用一个 score interview 的方法，里面呢给他传一个对象，这里用 blog 这个属性值呢，用 start， 那也就是起始位置的意思啊，就当我们点击这个按钮呢，页面他就会返回到最前面这个点，他的起始位置，也就是呢返回到 页面的顶部了，下来页面，然后呢点击返回顶部这个按钮，对吧？瞬间呢？跳转到页面的顶部了，但是这里呢，他是瞬间跳转的，没有一种平滑过度的效果，如果希望有过度的效果，可以加上 behave 属性值是什么， 对吧？现在就有过度的效果，慢慢的滑过去了。除了返回到页面的顶部，还可以返回到页面其他的位置啊，比方说现在呢，我要控制它返回到第三个 diff 的顶部，第三个 diff 也就是这个几何里面下标为二的这一个 滑动页面，再点击按钮，没有问题，现在就是返回到第三个地方的顶部了。 block 的属性值还可以用 and， 那是元素的其实位置，也就是那顶部，那 and 就是元素的底部。比方我要页面滑动到第六个地方的底部，也就是那下边为五的地方。滑动页面 再点击按钮，没有问题啊，他是页面的底部对齐了，第六个底部的底部是这样子来对齐的，哪怕呢，你是在前面再点击一下按钮，他也是滑到第六个底部的底部。好，再来说一下第二种方法， crying to biu， 这个方法是我们希望页面滑动到哪个元素上面的时候用的，就要获取到对应的这个元素对象。 再来说一个方法，这个方法呢，就不是控制他滑动到哪个元素上面了，而是直接控制他在熨斗上面来进行滑动。方法呢是 scroll two， 参数呢，同样给他传一个 对象属性呢，就要改一下，这里不用 block， 改成用 top。 如果希望返回页面的顶部呢， top 就为零，越黑越这个属性要保留，这样才会有平滑过渡的效果。 滑动页面再点击按钮没问题，同样可以返回顶部。那如果现在我不需要他返回到页面的最顶部，就返回到第三个 tiff， 这里可不可以呢？同样没问题，我们只要计算一下前面的高度就可以了，也就是呢前面两个 tiff 的高度， 这里一个地方的高度呢是三百五十像素哈，两个就是七百，所以这里呢就写七百就可以了，不用写单位的。滑动页面， 再点击按钮没有问题，同样可以滑动到指定的位置。好，这个视频我们就分享了两种方法，实现页面滑动到指定位置的，感谢大家的收看。

现在我们来实现点击他，他让刀头布置顶， 点击按钮高同步置顶， 先写个注视吧， 点击这个按钮，点击世界， 我们的世界这个 这只广东调距离顶部的顶部的距离完零就能置顶了， 这个也要弄两个，防止他，防止有的浏览器不接人， 看一下，现在看到他马上就能到下面了，但是他没有动画，我们要搞个动画，动画是怎么实现呢？我们是通过这个摄影头， 每隔几多少毫秒他实现一次， 我们通过他来实现，嗯，发给箭头函数， 这里是多少毫秒，我们先分一毫秒，然后把这个这个放到这里， 现在的是距离同步，同步这个距离每次节俭简易吧。格式化一下， 我们看一下效果，如果滚豆条距离头部小于等于零的时候，我们就清除色， interval 清除， 然后退出，这个就放到上面去， 把这个复制给他看一下，把滚路条往下拉， 点击，可以看到现在他能够缓慢的往下移动了。

我们经常看到这种慢慢的回到顶部的按钮，今天就教大家如何写。第一步，写一个回到顶部的第二位。第二步，使用 position fixed 把回到顶部按钮定位在右下角。 第三步，开始斜 js， 当滚动条滚动大于一百时，出现位大于消失， 返回顶部来看看效果。 nice。

这些视频将使用 js 向用户发送通知。首先 html 里有个 button 按钮，对这个按钮进行点击事件的绑定。我们主要使用 notifications api， 允许网页控制向最终用户显示系统通知。 这些都在顶级浏览上下文市口之外，因此即使用户已经切换标签页，会移动到不同的应用程序也可以显示。首先要用 request permission 方法向用户为当前来源请求显示通知的权限，如果未选择会返回 default 选择禁止返回 denied 选择允许返回 granted 判断当用户已授权允许创建一个新的 notification 对象。实力传入参数定义通知的标题，这是一个最基础的用法。 demo 还可以配置更多参数包底表示通知的正文显示在标题下方。 icon 属性设置图片来源 url 给通知 是配置显示的图标。 data 添加想要与通知相关联的任意数据，可以是任何数据类型。之后可以通过 data 属性访问， 通知会在大约四秒后自动消失。设置 require interaction with true， 可以保持有效不自动关闭。 当我们一直触发发送，会不停的收到新的通知，可以设置 tag 属性识别标签，避免用户的屏幕被大量类似的通知填满。除此之外，还可以监听 recent 相关事件，比如关闭通知返回的数据可以看到事件的类型。展开 target 可以看到对应的这个通知相关的属性，比如正稳和关联的数据等等。 还可以监听 click 事件，在用户点击时触发，室友事件在显示时触发，以及 error 事件在出错时候触发。下面举个例子，比如监听用户离开或回到标签页。 事件判断，当当前文档及页面的 visibility state with hidden 时，给用户发送通知。现在当我切换标签页时会有这个通知，但回到页面还是存在的，所以我们存储这个通知变量要用 close 方法触发关闭。 现在当用户回到标签时，通知就不在了。最后需要注意的是，这个特性在 whitework 中可用。浏览器的安全上下文只支持 https 平安 us 上查询。浏览器的兼容性也一般，部分浏览器，比如安卓 chrome 只支持 service workers 推送通知， ls 在浏览器端触发无反应。我们以 push aloud demo 做演示， 需要先添加到桌面才支持授权和推送。如果使用这个 api， 大家做好渐进增强的处理哦，我们下期再见。

每天学习一点软件开发技能，成为互联网时代的开发者。今天跟大家聊一聊网站页面中的按钮，咱们先看一下页面里的按钮是什么，这个网站用蓝色框标记的地方都是按钮，点击按钮之后，页面都会给你一些反馈，比如跳转到其他页面了，或者弹出一个框，或者会下载某个文件等等。 可以看到按钮对一个网站是至关重要的，同样大家可以想象一下，一个没有按钮的网站几乎是不存在的，因为他没有实际功能。 来咱们来实践一下。上代码，先花几秒的时间写好一个结构，也就是 htm 的基础，首先我们要告诉他，我们要用 htm 语言，然后给他一个头部菜的，再给他一个身体的包子， 然后在身体上写我们的按钮。今天我们又会学习到一个新词，叫做阿特，也是用标签的形式写出来的，这里 可以看到巴特和其他标签的形式写法一模一样，都是一对成对出现的标签，一个开始，一个斜杠表示结束。我们预览一下页面，可以看到这里好像有一个按钮，但是有点怪怪的，好像和我们看到的其他网站上的按钮不太一样。咱们再来调整一下，在按钮里面加入其他内容， 比如我们输入一个按钮，再看一下效果，这样看起来会稍微正常一些。怎么样一面的实现，你学会了吗？有些小伙伴会问，和刚才发的截图还是不一样啊， 这里跟大家说一下，咱们的网站是用 htm 和 cs 开发的，大家可以想象一下一个箱子是什么样的，大家想到了什么？ 那我再问是什么颜色的，长宽高分别是多少呢？这里可以感受到当他没有颜色，没有尺寸这些设计的时候，是不是不太美观，还有结构和样式概念不清楚的小伙伴可以看一下之前的分享，这里的按 目前还没有样式，也就是没有设计，所以只能长这样子了。咱们后续说到 css 的时候，就可以自己设计好看的按钮了。前几期有小伙伴咨询我们开发使用的什么工具，这里跟大家统一回复一下，我当前使用的是 vs 扣的，大家可以搜索下载一下，找不到的小伙伴可以来找我要。 还有一些小伙伴担心的问题是，又要学习新单词了吗？这个答案是肯定的，不过在之前的分享咱们说过， html 常用的标签只有十几个，同时我想分享的关键是大部分人会的单词远不止十几个，比如苹果、香蕉，甚至还会依据完整的口语 i'm sorry， 所以大可不必担心十几个单词你记不住的问题，重点是你能学会软件开发的技能，有问题咨询的小伙伴可以私信我，都会一一回复的，希望上面分享的能够对你有所帮助。

ppt 返回键怎样设置？怎样一键返回目录页？怎样制作页面跳转按钮？我们在使用 ppt 汇报工作的时候，特别是使用有目录的 ppt 的时候呢，经常会有这样的需求， 当我们点击目录的某个位置的时候呢，我们需要他直接跳到我们需要讲的位置，而当我们的这个目录下面的内容全部讲完的时候，我们又需要一键返回我们的目录所在页， 那么这样的功能是如何实现的呢？今天我们一起来看一下。那首先呢，我们看一下如何一键返回我们的目录页， 那么像这里的这个 ppt 啊，比如我在这里我把第一个目录的内容讲完了，那么我要从这一页 ppt 直接返回到我们的目录所在的那一页幻影片的时候啊，我们可以通过插入 形状，插入动作按钮的方式来实现，点击插入找到形状里面，在下面呢有一个动作按钮，我们可以点击第一个返回按钮，那么在这里呢，我们可以绘制一个返回的按钮， 返回按钮绘制之后呢，这有一个超链接到，那么我们就要找到我们的目录所在的幻灯片，是第几张像我们这一个 ppt 啊，它的目录所在呢是第三张幻灯片，那么我们超链接到了，我们就要选择 幻灯片里面的第三张幻灯片，然后我们点击确定好，我们再点击一下确定，这时候我们点击这个按钮了，就能够直接返回我们的 vlog 所在的第三页，那么有的同学在这里会觉得 这个按钮在这很丑啊，这个不难，我们点击形状格式呢，我们可以修改我们的这个按钮的样式， 那我们来改一下，这时候我们在播放的时候呢，我们第一个目录下面的所有内容讲完了，那么我们点击这个呢，就能够一键返回到我们的目录所在的页，那么我们目录的页码，我们需要直接跳到我们指定的内容， 比如说我们要讲第二个工作完成情况，我们需要直接跳到我们的工作完成这一页 ppt， 那么我们怎么操作呢？ 那么原理呢？还是一样都是通过超链接的方式来进行，有的同学会告诉老师，我们直接使用这个文字超链接不就可以了吗？这个是可以的， 但是我们使用文字抄链接呢，有一个问题啊，我们的文字啊会改变颜色，影响我们整体的美观性，所以在这里呢，我们还是通过插入形状，对形状 制作超链接的方式，让我们的这一页直接跳到我们指定的位置，那么再插入里面，刚才我们使用的是插入动作按钮，其实在这里呢，我们任何一个形状都可以啊，比如在这里我插入一个菱形， 在这里。好，那么在这里呢，我把它的形状样式呢，我改变一下，让它美观一点， 这时候呢，不像我们的动作按钮，它可以直接弹出，我们要跳转到哪一个幻灯片，在这里呢，我们就需要设置超链接的，首先我们看一下我们的工作完成情况，这一页幻灯片在哪里 找到位置，在这里我们看到他是第十四张幻灯片。好，我们记住第十四张幻灯片，那么返回到这里，我们点击这一个形状，找到插入里面的链接 练习的内容呢，我们选择文档中的位置，刚才我们看到是第几张幻觉片，是第十四张， 那么我们单击之后，在右侧这儿呢会有一个显示写会一个显示，我们看没有问题之后我们点击确定好，那么这时候呢，我们的跳转按钮呢就设置好了，能够达到这样的一个效果，到我们的第一个目录下的内容讲完之后， 我们可以使用一键返回的按钮返回到我们的目录页，那么我们的目录页我们想要直接跳转到第二个内容呢， 我们可以直接点击这里的跳转，他一下子就跳转到我们的第二个内容了，是不是非常的快捷，非常的好用？好，今天主要跟大家分享的 ppt 返回键的设置方法，以及跳转动作按钮的制作方法与技巧，咱们下期见。

这样的按钮效果怎么做？这是 h t m l 代码，用 button 标签创建一个按钮，接下来是 c s s 代码。将所有元素的外边距和内边距设为零，并通过 box sizing 属性将元素的宽度和高度计算，包括边框在内。 设置八 d 元素的样式。使用 flex 布局，使内容水平和垂直居中。设置最小高度为适口的高度。字体大小为十像素，并设置背景颜色为红色。 定义按钮样式，设置按钮的宽度为四十 ram， 高度为十五 ram。 背景颜色为红色，字体颜色为白色。 去掉边框，设置边框圆角为三 rem， 字体大小为九 rem， 字体加足程度为七百光标样式为指针添加了过渡效果，使样式变化更平滑。设置位置为相 对定位层级，唯一溢出内容隐藏。当鼠标悬停在按钮上时，改变按钮的字体颜色为红色。 使用伪元素 after 来创建一个覆盖按钮的白色背景，将该伪元素的位置设置为绝对定位层级为负一，覆盖在按钮之下。通过 left、 right， top 和八等属性设置伪元素覆盖区域。 使用 transform 属性将元素沿 x 轴倾斜四十五度，并设置初始尺寸为零。添加过渡效果，使尺寸变化更平滑。当鼠标悬停在按钮上时，改变伪元素的尺寸， 从初始尺寸变为一比一，实现背景展开的效果。更多视频教程链接在评论区，想学习的赶紧去查看！

我们再次做一个按钮，这个按钮是用来返回主页， 双击修改它的属性，文本，改成主界面， 或者你设置成返回主页，操作属性切换到按下功能，这个时候我们不要去选择数据对象时操作，要选择打开用户窗口， 选择温度控制主页，那么当我们按下这个按钮，就会打开主界面，点确认，把它的背景颜色 色改成蓝色，点确认。当我们点击这个按钮，就会返回主界面， 点一下唇盘，把这个窗口关闭，我们再打开温度控制主页，设置水温实时曲线按钮的属性操作属性设置，按下功能， 打开用户窗口，选择水温实时曲线， 那么当我们按一下这个按钮，他就会打开水温实时曲线的界面点确认。这个按钮就是用来切换到实时曲线的显示界面，那么在实时曲 线里面，它下面的主界面的按钮就是返回到这一个界面，水温控制启用的按钮上面有一个红色的指示灯，我们制作它，点击 椭圆，我们先画一个圆的这， 然后设置它的属性，双击填充颜色，选红色，然后选上闪烁效果 表达式，根据采集信息生成，它是读写 s e 状态继电器， s e 状态继电器就是 pid 控温运行，点确认， 选择用图言可见度变化实现闪烁，闪烁速度中， 然后点确认，那么当我们按一下水温控制启用的时候， s e 状态继电器就会接通红色的指示灯，它就会闪烁，表示水温控制启用中。

好，同学们，接下来我们就做来做这个菜单啊，做这个菜单选择就查看学生签订，学生餐桌，学生修改，学生查找、学生退出系统，这就是我们的一个买钮，大家看到没有？买钮好，在这里的话，我们首先啊要设计这一个一个的按钮啊，我们把一个按钮内设计出来。 好，那么这个时候我们又来活了啊，在这呢，我们去，不然有些东西太多了啊，我这么来，我添加一个 新界筛选器，在这改个名字啊，叫做工具啊，叫做 easyx 的 t olsex 工具，然后在这我照样的添加一个新建筛选器 eas。 那干嘛呢？就说我把我自己写的一些类啊，把它通通都放在这， 因为这个封装好了之后，咱们不仅仅是这个项目可以用，咱们可以在别的项目上能够用啊。好，在这里的话，我们现在已经有了这个 window 和我们的这个 ctrliga 啊，在这边我们继续来创建，点击 添加，添加什么呢？添加新建项，新建项呢，我们继续来添加一个 cc， 家家的类，在这呢，这个类啊，我们去搞一个这个，我们把继承也用起来。好吧，同志们，我们把继承也用起来， 那么在这个里面我们创建一个 window 叫做积累，积累怎么写来着？叫 b a s s bs 课 w i d gt。 v 几特，咱们来个空间啊，咱们来个空间让他点击 确定， 对吧？大家先好好把这个课程听完，好，这样来了之后咱们在这做一个什么样的操作呢？ 咱们首先啊关于所有，无论是按钮也好，无论是我们的菜单也好，还是我们的一个淘宝也好，他都有 共有的属性啊，共有的属性什么呢？宽度，高度，坐标，对吧？然后咱们移动背景颜色等等，所以说咱们先把它抽象成一个比较基础的一个类啊，咱们从这去继承就可以了，非常方便啊。在这有个 bs g， bs 可危机，可 咱们先来一个 x， 我们再来一个 y， 再来一个宽度，再来一个高度，好，这就来了。当然关于这一些呢，我们必须要有对应的成员给他保存， 我们樱桃的 mx， 樱桃的 m 的 y， 樱桃的 m 的 w， 樱桃的 m 的 h。 好，这几个就不需要注视了吧，真的是简单易懂啊，简单易懂，好，这样来了之后，小白不懂继承 没有关系啊，就是说就相当于结构里欠套一样，同埋，明白吗？就相当于结构里欠套。好，在这的话，我们给他写几个横竖。首先第一个宽度我要不要获取一下？要的，高度我要不要获取一下？我也要的。然后呢，我们还可能设置 y 的赛特 fax 的塞子，什么意思呢？这里我们要设置窗口的宽度和高度啊，设置窗口的宽 度和高度，然后呢，我们再来你的 x 要不要获取一下？那要的吗？那么咱们就 x 来一个， y 也要来一个，那么我们要不要移动坐标呢？要的，那也就来一个吧，咱们用 word 默默的印他的 x， 印他的 y， 这样是不是搞完了？同埋简单吧。好，在这里的话，我们要求每一个窗口都要有一个什么都要有一个受函数啊，咱们在这里呢，去写一个 v i r tuvl 受 怪异的，我们来个虚函数啊，虚函数我们直接给他来一个纯虚函数，这个类不允许实力化啊，不允许实力化。好，咱们就这样就行了，把，这一些函数呢，我们先给他实现 一下，在这边我们把它创建定义，然后 ctrl k o 过来。 好，到这来了之后，首先咱们直接用初始化参数列表的方式来做啊， m 下划线的 x 等于 xm 下划线的 y 等于 y， 然后呢， m 下划线的宽度等于宽度， m 下划线的高度等于高度。好，这几个变亮我们的出炉完成了啊， 然后呢，还有一个，我们这边的宽度宽度，咱们就直接返回 m 下划线的 w， 然后高度呢，咱们就直接返回 m 下划线的 h， x 呢？好，咱们这还有一个是吧，我们再次的 x 等于 x， 再次的 m 的 y 等于 y。 好，这样我们就设置好了， 他为什么有个错误，不能将 m， 我看一下。好，好，我好像发现了一个问题啊，这个宽度和高度在这 w h 写错了啊，一个是 w， 一个是 h， 好，这就行了，然后在这里呢，咱们直接返回 m 下滑线的 x， 返回 m 下滑线的 y。 大家发现没有，咱们 c 家家其实都是在设计类啊，还是挺好玩的。咱们这次的 m 带 x 等于 x， 再次的 m 下滑线的 y 等于 y。 注意这个因为病量的优先级问题啊， 说其优先访问这里的，他不会访问到咱们这里啊，不会访问到这里。好，这样咱们就行了呀，设计完了，同埋，完了没了啊，没了，好，当然在这的话，我们要继续来写我们的另外的啊，同埋，这个好像什么都没写吧，基本上 大家应该能懂吧。好，到这边我们继续来写啊，我们先把这个移动到我们对应的一个文件夹中去，好，这个时候我们来设计我们的疤痕，我们点击添加，添加一个新建项， 先向我们这再来个类，再再点击添加类名呢，再来一个铺式 putt ol 既简单又复杂的函数，那真的是我啥都没干，基本上啊，我就简直透了一层。然后呢鸡类，我们给他来一个叫 b a， s， i， c， w， i， d， g， e， t， 然后呢工友继承过来，然后呢我们点击确定， 稍微等待一下，好，同志们，我们这个内的继承呢关系就好了，大家看到没有，自动给我们继承好了，那么这个继承好之后，我们继续来设计我们的一个这个 qpus 八腾 的这个类。好，到这里的话，首先他肯定要有 x， 他还有 y， 他还有 w， 他还有 h。 好，当然这个按钮的话，我们给他来一个默认值啊。按钮给他来一个默认值，什么默认值呢？这按钮太宽了也不好，太高了也不好，咱们这里就勉勉强强给他来个来个多少，他卖想要多少咱们可以去测量 一下，大概一百，宽度是一百五吧，宽度一百五，高度三十就差不多了啊，或者说一百的三十，如果说需要咱们可以自己在设计，咱们来个一百， 我们这呢再来个三十就可以了，那么坐标呢，我们也给他来个初始化，我们直接把它放到零零的位置。哎，好像还有一个问题，同埋 这个按钮上面是不是有蚊子啊？同伴，按钮上面是不是有蚊子？有蚊子怎么办？咱们是不是给他设计一下？嗯，好，咱们先包含一下咱们的康菲格电源器啊， 好，在这里的话，我们来个 p r ivateprv 这个文字呢，我们来个 std 四寸 m 下划线的这个 past 文本啊，咱们来写这个文本。 好，这个文本显示之后，哎，我们给他可以通过传餐传进去 cos 的 std 四寸引用 past。 好，这就来了。这我们也给他一个默认值，或者说不给也行啊，咱们这呢， 嗯，不给他么，认真给他吧，给他一个算了，咱们这个来个 b u t t o f 全部给他搞个默认值。好，这样就行了。好，来了之后呢，我们接下来要把这个函数到这边呢 进行一个调用定义啊，对他进行一些复制， 文字背景透明啊，文字背景透明的话，我们可以到到这里设置啊，到我们的 bs bs 可为即可，或者说到我们的这个温度，同伴到这个温度里面设计设置一下啊，来 赛亚特 bk 帽的 串子 plant。 好，我们这就设置好了呀，对吧，与这里没有关系啊，咱们的铺式八层也给他拖进来， 铺十八层给拖进来。好，我们在设置这个铺十八层，咱们用这个方式啊，这个方式，首先呢，我们这个我们直接去调用一下负类的 b a s i c 构造函数就可以了，那么负类的话他要有 x y 宽度和高度。哎，这样是不是好了呀？然后呢，还有一个我们的这个 past 啊，我们来 past m 下滑线的， 那是什么呢？ past 咱们直接给他复制好，这样就好了，我们这个购的函数里面好像啥都不用写啊， 那我们这继承起来也太方便了吧，他们有没有发现这太方便了。好啊，这搞完之后啊，其他的什么宽度和高度，我还要不要写？不要，为什么？ 这负那中间不是洗了吗？你直接去获取就完事了啊，直接获取就完事了。好在这个八筒我们这边好像没事干的啊？好像没事干的，但是呢，不对啊，朋友们，咱们的按 有啊，你不只是出来了就行了吗？咱们还要去给他进行一个绘制，我们要重写。同志们，强制重写的是个什么东西啊？我们必须给他重写一下你，不然的话， 你自己也是一个狙击类的啊，也是个狙击类，我们沃意的 owrit。 然后呢，定义一下。好，我们把这个按钮进行一个绘制啊，这个按钮长什么样子？ 这个按钮长什么样子？咱们就来一个肺咬 flow 的 rax， 咱们画一个圆角矩形。好，这里就简单了啊， m 的 x， m 下划线的 y， m 下划线的 x 加上 m 下划线的宽度。好， m 下划线的 y 加上 m 下划线的高度。好，就这一个。然后圆呢？让他有多圆？咱们不是不让他太圆了啊，咱们让他有十个，这样是不是搞完了呀？好，这个他说 mx 无法访问。糟了，忘记了一件事情啊， 咱们在这呢，让他去继承，咱们必须 plt 一 ct edpart time 对吧？让子类能够去用。哎，不用那就糟糕了啊， 太高了。好，这样就行了吗？好，当然这个背景颜色应该是一个白色的，咱们给他设置一下背景颜色啊。

大家好，这个视频呢，带大家来用 css 来画这么一个按钮，先来看一下效果，这边呢当我们把鼠标移到这个按钮的时候呢，它的背景颜色发生变化，并且当我们点击它的时候呢，很明显哈它有一个按压的这么一个效果， 我们就来看一下这个效果呢，具体是怎么实现的，这里呢我就简单的在包底里面呢写一个钓鱼的标签，这个钓鱼里面呢，我就写一个 click， 然后呢通过 css 来控制一下他的样式哈， 来控制一下这个 div 呢，给他宽度三百像素，高度的话一百像素，再给他一个背景颜色这么一个颜色，先来看一下效果哈， 打开，然后呢再调整一下他的位置，给他加一些外边距，给他一个麦顶上下的话一百五十个像素，让他往下面来移哈，然后呢 左右的话水平是居中，刷新他的位置就在这里了，再来控制一下里面这个字体，字体呢，给他一个字体颜色白色，再来控制一下里面他的一个大小哈风扇，给他三十八个像素。 这边刷新，然后呢再来控制这个字体他的一个水平垂直剧中水平剧中像的，然后呢垂直剧中的话就拉开，等于他的一个高度就可以了， 这边刷新啊字体他就水平垂直剧中了。再给他一个圆角，这个圆角呢给他十五个像素， 好，再给大家加上一个和阴影哈。水平方向呢，我们不需要，我们只给他垂直 发现一个十五个像素，再给他加上一个井九九九这么一个颜色，这边刷新了这个阴影，他就出来了，我们先来实现，当我们鼠标仪上去呢，背景颜色可以发生一个变化啊，就一个啊，我的围泪背景颜色变成这么一个颜色，再给他一个手型， 这边刷新鼠标仪上去呢，背景颜色就可以发生变化了，然后呢就是我们这一个按压的效果，看一下怎么实现我们这个按钮发生一个按压的效果，其实就是我们已经点击了这一个按钮这个 div， 对吧？ 点击呢，其实呢他就是一个激活的这么一个状态了，我们要给他加上这么一个 ft， 这么一个围类，然后就是我们要出现这个按压的效果呢，实际上啊是修改了这个和阴影他的一个值， 什么意思呢？我们要把这个按钮他有一个按压下来的效果，是不是感觉这个按钮他被压缩下来了，对吧？所以呢这个阴影他垂直方向上这个直呢，我们把它改小一点，然后呢再让他变个颜色， 让他变深一点这个颜色啊，我们先来看一下效果，这边呢我们刷新一按呢，哎， 他好像是有点效果，但是这个按钮他怎么是往上面来按的，对吧？我们完成的效果呢？这个按钮呢他是往下面来按的，但是呢他这个阴影是往上面来说的，所以呢我们这里要给他调一下方向， 之所以这个按钮呢，我们感觉他好像往上面来移动了，对吧？往上面来按压是因为我们这个和阴影垂直方向上呢，本来是十五个像素的，但是当我们点击他之后呢，他变成了七个像素，也就是呢他是往上面已经缩减了 八个像素了，所以呢我们这个时候要把这个按钮呢他往下面来再平一个八个像素呢，这样子的话他就会抵消这个效果，他就会有一个往下面来按压的感觉了。 这里呢我们就要给他来做一个平移哈，让他往歪轴往下面来移动八个像素，这个时候呢再来看一下效果，我们再点击呢，哎，这个点击按压的效果呢，他就实现了，好，感谢大家的收看。

这期我们看一下按钮弹性展开工具栏。 dom 结构中由名为 button 的标签容器和展开后的五个亿标签组成。脚本中绑定按钮的点击事件用于绑定或取消 ike 和 open 样式。 样式中设置按钮及展开后 ican 的默认样式。通过 ascar 伪元素设置按钮图标。最后当触发点击事件时，按钮旋转四十五度并距六十像素同时展开 ican 列表项。今天的分享就到这里，我们下期见。