html 转账用途下拉选
接下来呢，我们来看一下这个下拉列表它是怎么实现的，那下拉列表呢？其实在我们的这样一个表单的这样一种页面中呢，其实也是非常常见的，那它的实现呢？它有专门的几个标签， 我们可以简单的看一下它的一个结构，是这样的一个结构，那我们可以看到呢，我这里放大一点啊，放大个三倍四倍吧， 他这样呢就形成了一个下拉列表的这样的一个选项啊，你这里可以看到他是一个 select， 呃，哦，不是这样的一种 组合来形成的这样一个下拉列表，这样的一个功能呈现，那像下拉列表这种呢，他就是必须啊，他就是必须组合在一块他才会生效的，所以 这种呢就是组合式的一种固定的一种用法。那像这个下拉列表呢，一般他前面肯定会有文字嘛，比如说我们叫做我们用 label 来试一下吧， 可选项哦，选一个叫选一个，好，选一个。然后呢我们这个 label 啊，其实我们之前已经给大家演示过了，它就是通过这个 four 属性，然后跟某个这样的一个表单元素相绑定。那这个下拉列表的话呢，他的一个表单元素你肯定是要绑在这个最外面嘛，如果你要绑的话，所以你这里呢就给他设置一个 id， 我就叫做他做 selection 吧， 我随便取一个名字，然后呢我这里来一个 for， 把它设置在这里啊，设置在这里。然后呢我们可以试一下，那如果我点击这个文字， 是不是相当于是点击这个选项啊？你看这个栏框就出现了啊，只是说我们这里，你点这里他这个东西，这个列表他不会弹出来啊，所以我们用这个 level 呢，这里呢意义也不是很大，因为你想点这里，他就是一个选中的一个状态，但是这个列表没有弹出来吗？ 好，所以我们这里呢，其实你用 span 也是可以的。然后呢我们注意看这里，像这个 select 它的这个元素呢，它上面的这个 name 是要设置的啊， 然后呢它里面的每一个选项他都有他自己的一个 value 的值啊，都有自己的 value 的值。因为我们这里的这种下拉列表呢，其实他就有点像是单选的这种意思， 但是呢它的这个结构呢，又跟单选不太一样，因为它是这种组合式的使用，所以把这个 name 就是这个数据的名称， 我们就设置在这个 select 这上面，然后呢你选中的某个值，某个选项的话呢，它的这个具体的这个值的这个数据，就设置在具体的具体的一个这个 option 的这样的一个上面这样一个元素上面。然后呢这个 selected 这个属性呢，其实就是可以让你去设置一下他一个默认，默认展示的默认选中的这样的一个值，这样的一个选项啊， 那这样的是它一个最基本的使用，那其实呢，它还可以有这样的一种用法，它里面呢还可以分组，就这个选项里面它还可以分组啊，我们可以看到这里呢，我通过 o p t group 这样的一种标签对它里面的内容进行了一个分组啊，然后大家可以看到它这里 就有这种浅灰色的分组的名称，那这个分组的名称是通过 o p t group 它的一个 label 这样的一个属性去设置的啊，去设置的我们可以给它给改一个名字，我们就叫 group， 然后我们就可以看到这边也就变了，对吧？这边也就变了，所以他还可以这种分组的一种形式啊，分组的形式，然后这里呢，其实你看这里他这个呃 name 他没有去设置，对吧？我们应该正常来讲都是要给他去设置好的啊， 如果你这个数据啊，你是确实要传到服务器上去的，你这些一定要设置好，但是如果你这个列表，你这个表单的将是一些样式这样的一些元素的话，你只是做一种假的，就是展示在页面上看的话， 那这个设置不设置，像这个 name 啊，像个具体的 value， 这个设置不设置无所谓的。那然后呢，其实我们之前介绍过的这个 input 这个标签啊，它其实跟另外的一个标签结合起来， 也是可以达到类似的这样的一个效果啊，类似的一个效果大家可以看一下，虽然说这个东西呢，不一定会常用，我们可以给大家看一下， 那我们这样去看的话呢，他是不会有什么特别的地方，但是当你鼠标放到这个元素上面之后呢，你会发现他这里有一个这种可以选的这样的一个小三角，然后你点击他呢，他的选项就会冒出来， 然后你也可以去选，然后你可以删掉他们，然后再去选这个，然后删掉他们，再点一下再去选啊，有点像这种下拉列表的感觉啊，但是他是这种音 put 这样的一种结构去做的，那像 input 这里呢，其实我们是可以继续的输入的，所以它的这种预制的这些选项的内容其实更有点像，你输入了一些信息之后，它会弹出来 就是一个，呃，相应选项的一些提示，就是他文字比较匹配的匹配的内容，他会自动弹出来这个相应的选项的提示，然后你就可以选，选完之后呢，还可以接着去输入， 然后它用到了什么呢？它用到了这个 input 这个标签当中的这样的一个 list 属性， 然后呢再加上这样的一个 data list， 这样的一个标签。 data list 它有个 id 设置了之后呢，这个值要跟这个 list 这个值去对应起来，其实也就是说这个 input 里面的这个 list， 这个数据，这个列表的数据哪里来呢？就是从这个 data list 里面来啊，然后选项啊，具体的这个值要设置好啊，就是你里面的这个选项了，他跟这里还不一样啊，他跟这里还不一样，他是直接通过 value 来设置这个选项的，这个展示出来的这个选项的文字的， 所以这些东西呢还是有区别的。那像这些的话，我们平时大家一定不要去死记硬背啊，你只要知道了有这样的一些东西，这样的一个用法，呃，我们就是在用到的时候你不记得了，你稍微去查一下， 就很快就知道他怎么写了。我们现在最重要的就是理解他的一个基本的一个使用逻辑，大概有哪些标签啊？大概有哪些属性啊？然后大概是一个呈现出来是一个什么效果啊？你知道这些东西就非常 ok 了。
粉丝1.8万获赞8.7万
相关视频
05:05查看AI文稿AI文稿好学前段同学，我们来看一个在开发中遇到了一个经典的问题，就当上面这个门框聚焦的时候呢，我们会出现一个下拉列表，我们希望呢，这个下拉列表以一种动画的方式下拉展开， 怎么做呢？首先啊，这个下拉列表的高度呢，是自动的，你也不清楚它里面有多少个选项，如果说你啥也不管，一开始呢，给它高度设为零，给它加上一个过渡效果，然后文本框聚焦的时候，把它的高度呢设为自动，这种情况下是不会有任何的过渡效果的，因为自动它不是一个有效的数值， 不能使用过度。于是呢，就看到这么一个情况了，没有过度。但是问题是我们也没有办法预先知道它里边高度到底为多少，你告诉我，哎，你哪个像素这样子呢？倒是有过度了，但是高度又不对了，你设置为多少都不合适。 那么这个问题如何来解决呢？首先我们看第一种方案，就是使用 max height 这种方案呢，他是这样的，就不去动他的高度， 高度，让他一直保持自动，不动他，我们动什么呢？动他的 max 孩子最大高度，把最大高度设置为零，当聚焦的时候呢，给他设置一个非常大的一个最大高度，比方说三百个像素，那么这样子一来，他的动画效果就出来了，看一下啊 就出来了，那么它的原理是什么呢？他这样的，比方说这是这个元素它的自动高度，然后你把它的最大高度呢，一开始要设置为零，所以呢，一开始啥也看不见， 当我们聚焦的时候呢，把他的最大高度呢，给他重新设置一下，给他设置为三百个像素，于是呢，他原来的尺寸是不是就可以展现出来了？有空间了吧？当然这样做呢，还是会有一些问题哈，有好几个问题。第一个问题就是最大高度设置为三百合适，那如果说他里边的内容比较多呢？不止这些内容，他有可能会超过三百， 说不好的，对吧？你看啊，其实现在他的高度已经超过三百了啊，他有些已经看不见了一出了，对吧？所以说这种高度到底设置为多少是一个问题，这地理问题。 第二个问题呢，他还会出现这个问题，就是啊，怎么描述呢？就是他的过度啊，过度的是谁？过度的不是他这个高度，过度的是他的最大高度，比方说过度时间为两秒，但是用这种做法的话，你看到这一部分下拉的时候实际上是小于两秒的，能懂这个意思吧？过度时间为两秒指的是这一部分的时间为两秒， 我们实际高度只有这么点，就下拉到这的时候，实际上是小鱼苗苗的，就这个问题。然后呢，当他回收的时候还有问题，他会慢一步，为啥呢？因为他回退的时候啊，就收起来的时候是从最大高度的减少开始收起来的，所以说在这一部分时间里边，你是看不到界面有任何变化的，因为他动的只是最大高度，所以说你们可以明显的感觉到聚焦移开， 停顿了一下，再聚焦移开，是不是有点停顿啊？我们把那个时间设长一点啊，你们感受到更加明显一点，三秒钟聚焦啊，然后失焦，你看是不是明显的有一个停顿啊，就是这种做法的一个问题啊，那就没有 有什么办法了吗？好，咱们来看第三种做法，就使用 gs， 那之前都使用 gs 了，还有啥好说的呢？首先把那个过渡效果给他去了，你四 s 呢，也不要去管什么聚焦和失焦了，让 gs 来搞定，先把它高度呢，一开始设为零，剩下的交给 gsgs。 怎么处理呢？或许到两个元素啊，一个是为闷框，一个是那个 下拉的那个 dav， 当我们弄好失交的时候啊，失去教练的时候，非常简单啊，给大家加上一个过度一秒钟，然后呢，把高度干涉为零，不就搞定了吗？好，关键是聚焦怎么做？聚焦的时候呢？我们其实就是要找到一个高度的变化范围， 一开始肯定是零吗？零变到多少对吧？只要我们把这个问号的值算出来，然后给他加上过渡变就完事了。关于怎么算呢？哎，我们可以这样，先把过渡效果给他取消掉，你别过度了，直接把高度设为凹凸啊，这样子，咱们来试一下啊，把下边的数试掉，好看一下， 是不是聚焦的时候直接就出来了，没有过度，高度自动不就出来了吗？好，出来之后呢，我们是不是就可以通过这句代码拿到这个高度了？好的， 然后你可以把打印一下，可以看一下好，聚焦，你看是不是达到高度了，一百五十二，好，那么于是呢，我们就能够得到，哎，这里是一百五十二，好，接下来就可以变化了，怎么变呢？一物给我回到零，然后加上过度，变到一百五十二就完事了，主要后面这几行代码都在做这个事， 先把它变到零，然后呢强制回流，让他先确认一下好，那么高度就回到零了，然后再给他加上过度，然后再把高度给他射回这个高度不就过度了， 过度就是从零开始，变到这个高度是一个数值，他就能够应用过度效果好，咱们来试一下啊，聚焦你看没问题，一秒钟过渡过来，失焦也没问题，非常的迅速， 没有任何的停顿，所以就完美的解决了大家的问题。但是呢，这样做呢，确实代码要多写一些啊，有没有什么不用 gs 就用纯 css 就能解决的方案？我这里给大家提供的这么一种方案啊，就是你换一种动画效果，怎么换？就是你不再去玩那个高度了，转而去玩那个缩放，对吧？一开始 在歪轴上把它缩放为零，聚焦的时候呢，歪轴的缩放呢，是为一就完事了，你看一下吧，那就不是去玩个高度了，那么这种方案呢，可以完美的解决之前遇到的那些问题，高度是能够自动适应的，而且呢，过度的时间是统一的，也不会有任何的停顿 啊，你看，只是呢，他跟那个高度的变化呢，效果呢，有那么一些细微的差别，你自己可以感受一下。而且这种新的方案啊， 它的渲染效率要远远高于前面的方案，因为前面的是不断改变，高度是要不断的回流的，而你使用圈子过的话，是不会导致以免布局变化的，所以它的渲染效率是非常高的，而且它的动画效果呢，其实也非常好，所以说是袁老师非常喜欢的这么一种下拉方案啊。 要使用这种方案，你唯一的需要做的一件事就是要考验你的沟通能力了，你要说一幅产品经理或者是设计师，让他相信你这种方案是最好的，当然你不能去告诉他这个方案实现起来比较简单啊，你不能这样子说，你自己可以去找一下其他的理由啊。那么这几种方案呢，都给大家讲了一下，根据需要啊，同学们可以自行选择使用哪种方案。
19:14查看AI文稿AI文稿大家好，这次课程呢带大家来做一个很常见也很实用的一个案例，效果就是我们这个导航条还有他的下拉菜单， 当我们把鼠标移到上面的每一项的时候呢，哎，对应的都会出现一个下拉菜单哈，还有就是当我们把鼠标移开的时候呢，这个下拉菜单呢，它就会隐藏掉。 再有就是当我们把鼠标移到上面的每一项的时候呢，它的背景颜色呢会发生变化，会变成红色。 这里呢我会通过两种方法来做这个案例，首先今天这个视频呢，就用传统的 css 加 js 的方法来做，这样子的话相对来说呢就麻烦复杂一点，因为它涉及到这个 js， 但是呢里面有很多知识点呢，我觉得还是比较重要的，所以还是决定跟大家来说一下。下个视频的话，我们就用纯的 css 还有这个 flat 弹性和布局来做呢，这样子的话就简单很多了。好，我们来写代码，这里这个导航条呢，我就用这个 nav 这个标签哈，这个标签呢就放我们这个导航条 在 nav 里面呢，我们做个列表，这个列表里面放的话就是我们这个导航条上面这几个项目哈，上面这个 html 五 css 三这几个项目啊，就放在我们这个列表里面， 一共五个项目啊，所以这里我们一共要给他放五个力，这五个力的话，我们给他一个 class 吧，叫一个 nav 力，然后一共是五个哈，好，这里呢就五个力， 然后在这些里面呢就放我们的项目哈，第一个的话就是 h t m l 五，我先用一个 h 四的标签呢，给他包起来哈，第一个 h t m l 五，后面的呢我就直接给他复制一下了，就是 是 css 三加快里还有这个 view， 我们来看一下效果，现在呢它就只是一个列表，没有什么样式哈，我们这里呢就来学一下这个 css， 先把一些默认的内外边锯呢给他清除一下哈， 然后呢再设置一下我们这个波点，给他一个背景颜色呢，给他三个三，再设置一下他的一个字体颜色白色。 然后呢就是我们这个导航条，这个 nav， 这里的话给他一个宽度呢，三百五十个像素，高度的话就给他一个三十五个像素，这样他移到我们平 目中间的位置啊，上下的话给他五十个像素左右的话 oto 水平。剧中先来看一下效果，这边刷新呢啊，暂时就这个样子啊，还有这个列表的样式的话也要给他控制一下， 这里我们可以给这个导航条呢给他加一个合阴影啊，这样子我们可以看到这一个导航条具体的一个范围片，一直的话是两个像素，五个像素，大小的话十五个像素，然后呢颜色的话就这么一个颜色。 先来看一下效果，这边一刷新的话，哎，这个打完条条的范围呢就显示出来了，因为我们做了这个合影影的效果的话，看起来还有一种悬浮起来的感觉，对吧？再来控制一下这些列表的样式啊，右腰的话，他的宽度呢直接让他百分之一百就可以了。还有呢就设计 一下这个小点的话，让他给清除掉。这边刷新呢就这样子我们让每一项给他横过来排列，这里呢我们就直接拿到这个里他的一个克拉， 控制他横过来排列的话就直接一个 float left， 然后的话给他设置一个宽度吧，因为我们整一个导航，他的宽度呢是三百五十个像素，一共五个的话，所以每一个呢就是七十个像素哈，再来看一下效果，这边刷醒的话，他就横过来排列了， 我们再来控制一下这些字母，在每个里里面实现一个水平垂直剧中呢就差不多了，不过这个导航调的高度好像有点高，我们改小一点吧，给它改成三十个像素，然后要控制这些字母在里面。垂直剧中的话很简单，我们只需要设置这个癞蛤，这个含高等于它的高度哈， 也是设置个三十像素呢，刷新，哎，他就垂直剧中了，还有水平剧中呢，我们就找到这一个力哈，给他设置一个 test glance， 让他 santa。 剧中 刷新的话啊，每一项的话他就在这个里面呢就实现一个水平垂直剧中了，再给这个导航条给他设置一个圆角，这里给他加一个波德瑞的，给他五个像素，还有字体的话给他不用那么大啊， 给他十四个像素。这边刷新的话啊，基本的布局呢就到这里，接着我们就要实现把鼠标移到每一项上面呢，给他出现个背景颜色哈，这里呢我们就先通过这个 j 来实现一下， 这里呢我们就要拿到这个 h 四这个标题哈，这边给他做一个变量叫 ah， 然后呢通过这个 doctor 们下面他的一个科利斯 letter 这个方法，然后呢把这个 h 四这个标签给他传进去呢，我们就可以拿到这个 h 四这个对象的一个数组， 我们现在要让这个鼠标移到上面的时候，可以出现一个红色的背景颜色，就对每一个 h 四的标签给他绑定一个哦猫，偶尔的这么一个事件哈，这里呢就给他做一个 four 循环， 佛循环呢，我们就刚好是从这个数组的下标零开始哈，就挨等于零哎，小于这一个 ah 他的一个长度的时候呢，我们就让这个哎来下架，然后通过这个佛循环呢， 给这个数组里面的每一个呢都分别绑定上一个哦猫，哦，我的这么一个事件哈， 这里大家都知道我们绑定这个事件呢，后面都要给他跟一个匿名函数，对吧？但是我们现在的话， s 六之后呢，我们都习惯可能用这个箭头函数，但是箭头函数我们用在这里有没有问题呢？ 这是我们这个视频呢很重要的一个知识点，这里大家要记一下啊，这里呢我就先用这个箭头函数呢给大家来做一下演示一下。 正常来说就是当我们触发这个 omes older 这个事件的时候呢，我们就要让他的背景颜色变成红色，这里呢我们就可以用这个底，然后带上他的一个 别光看了这个属性，对吧？让他变成红色，正常的做法呢是这样子，我们看一下有没有问题， 这边刷线哈，然后呢把鼠标一移，哎，发现他的背景颜色并没有任何变化，对吧？我们打开这个控制台，他这里说了，他说 setting background colour 的时候呢，这个属性啊， of nd five， 反正呢就说我们设置这个变颜色的时候呢，是出了问题的， 其实这里呢就是我们这个箭头函数里面这个 disc 它指向的一个问题，具体有关这个 gsds 指向的问题的话，后面呢我会专门出一个视频来跟大家说。这里呢大家记住我们这个箭头函书里面用这个 diss 呢，有可能会引发一些问题的，我们这里呢可以把这个 diss 给他 log 输出看一下。 这边我们刷新哈一移的话，发现这个的他的指向呢是冰斗，这个时候哈大家记住就可以了，那我们这里再把它改成 普通的函数来试一下，看一下有没有问题啊。这边一刷新，然后呢一移，哎，发现这个时候背景颜色发生变化了，并且这个 this 呢，现在他指向的呢就是这个 h 四这个标签了，我们这一啊就全部都变成红色了， 这一句呢可以不要了。现在的问题呢就是当我们把鼠标移上去呢，它的背景颜色呢确实变成红色了，但是按道理来说，当我们把鼠标从 html 移到 css 三的时候，原本这个 html 五它的颜色是不是应该恢复到原本的状态才对，对吧？ 所以呢，这里我们就要给他加上一个 omos， 奥，也就是那鼠标移开的这么一个事件，这里我们就复制一下，上面把这个 moso 就改成一个 out， 这个背景颜色呢直接给他清空呢就可以了，现在再来刷新看一下效果哈。一进去一出来，哎，大家发现哈这个时候呢他的背景颜色的变化呢就没有问题了，但是样式上面呢还是有一点点小问题的， 我们看一下做完成。这边呢当我们把鼠标移上去的时候呢，他这个背景颜色呢也是有这个圆角的效果的，但是我们这里是没有哈，这边呢给他加上去， 这里的话我们写一下这个四 s s， 我们就给这个 h 四，这个标签呢，给他加一个尾了一个 r， 当鼠标移进去的时候呢，这里可以给他加一个手心，手心之后的话再给他加一个圆角。波德瑞的这里呢给他三个像素 保存线，这边刷新啊，然后呢这个圆角的效果呢就出来了，这样子呢我们导航条的上面的部分呢就完成了，接下来的话我们就看一下下面的这个下拉列表呢应该怎么做。 这里这个下拉列表呢，我们可以直接写在这个 h 四标箱下面哈，直接写个列表就可以了，给他一个卡有 l 三，然后里面的列表像，我们希望一共有多少，像的话就写几个 li， 这些 li 的话给他个类名，等一下接需要操作他。然后呢这里一共给他五个下，里面的内容呢我就通通都写个 html 五就行了。 好，下面这些呢我就把上面的复制，然后修改一下就可以了，从这个 css 三这个开始， 然后呢粘贴过来，这样子的话我们这几个下拉列表啊，这一个列表部分呢就写完了，现在来看一下效果，这边一刷新的话，哎，这几个下拉列表呢，他就出来了，但是的话 他没有边框呢，没有颜色这些，对吧？我们来控制一下他的一个四 ss， 这里呢我们可以控制一下这一个 ul， 这个 class 为 ulsterm， 这一个 ul 他的样式哈，这里简单一点，我就直接写这个 uls 了，我们需要看到他的一个背景范围的话，很简单，我们只需要把这一个 boss sand， 这一个盒子阴影给他加上来， 再给他做上个圆角吧，播的累点，然后呢三个像素再来看一下效果哈，这个收益刷新的话，哎，这个范围呢，他就出来了。我们现在呢 就要让鼠标移到这个下拉列表的时候呢，就好像上面这里移到每一项里面呢，可以让他这个背景颜色呢变成红色哈， 这里呢我们就要把下面这些小哩给他全部选中，直接把这句给他复制一下， 改成一个 ali， 然后呢把上面这些小利他的 class 给他传一下哈，就 lisa 这里鼠标移到这个下拉列表的时候呢，这个背景颜色发生变化，是不是应该和顶部这几个菜单栏 这个效果一样的，对吧？所以呢，我们这里只需要把这一个佛循环给他复制一下，给他复制一下，然后呢把这个 ah 给他改一下，改成这一个 aa， 再来保存看一下效果哈，这个时候呢，我们刷新，然后鼠标移到上面这个菜单栏呢，没问题，移到下面这里这个下拉列表呢？哎，也没有问题了， 再看回代码。但是呢，我们这里这两个佛循环看起来是不是基本上一样的，对吧？就这一个数组不一样。这里的话，我们就可以考虑一下啊，把他们给他优化一下， 我们直接给他用一个函数来做哈，封一个函数。这里呢我就声明一个函数叫圈咖了， 用箭头函数来抓 这里，我们把代码给他对齐一下，下面这里呢，缩进好里面不同的部分的 的话，我们就用参数给他传进来哈，这个 ah 就全部都改成这个 air。 下面的话，我们就把这个函数呢给他调用一下就可以了。先把这一个 ah 给他传进来，看一下效果， 刷新，然后呢一到头部，哎，这里没有问题，下面这里呢，没有效果，因为我们还没有执行哈， 再吊用一次这个函数，然后呢把这个 aoi 给他传进来，好，这边刷新，然后移到下面这个下拉菜单呢，也没有问题了，我们现在呢就要把这个下拉菜单呢给他隐藏掉啊，先不要让他显示，就是这个 ul 三， 这一二三的话，这里呢就先让他 display 为难，让他隐藏掉，这边刷新呢啊， 他就不见了。接着的话我们要实现了，就是当我们把鼠标移到上面这个菜单栏的时候呢，他对应的这个菜单栏下面的这个列表，他是不是应该给我显示出来 这里呢？我们用这来处理一下啊，先给大家简单来分析一下现在的思路呢，就是当我们这个鼠标移到这一个里哈，这一个里的时候，包括这个下拉列表的范围，只要移到这个范围的时候呢，这个 ul 他都要给我显示出来， 而不仅仅是移到这个 h 四里面哈，不然的话这个鼠标一离开这个 h 四呢，他就消失了，我现在呢是需要在这一个要爱的范围里面呢，这个 ul 他都要给我显示出来， 所以这里呢，这一个 nav 力，这一个克拉斯，还有这个 ul， 这个 ul 三，这里的话我们都要获取一下哈，通过这个 js， 我们把这里复制一， 然后修改一下呢，这里叫 nav 力，这个 class 的话就 nav 力好，然后就是还有一个 ulsam， 就叫 aul 吧， 然后呢就是控制这个 ul 的显示和隐藏呢，和下面这里这一个背景颜色的切换是一样的，差不多的，我们这里呢也是给他来一个活循环， 然后呢哎的话从零开始，哎，小于这一个 ana 他的一个长度的时候呢，我们就要哎加加， 然后呢就是绑定这一个事件的处理函数哈，就第二个，当他 我的时候呢，我们就给他执行一下，但是呢和下面这里不一样哈，这里因为他要用到这个的，所以的话这里只可以用这个普通函数，不可以用这个箭头函数，但是我们上面这里呢是可以用这个箭头函数的， 这里呢我就用这个箭头函数来写一下哈，用普通函数呢，这里也是可以的。为什么这里不用这个 d 呢？是因为当我们把鼠标移到这一个 navli， 也就是这个大的这个力里面的时候呢，我们是要让这个 ul 让他做一个显示或者隐藏的，所以呢这里当这个鼠标移进去的时候呢，我们是要让这个 aul 他的第二个， 然后呢给他做一个显示或者隐藏，他这个时候移进去呢是让他不要显示出来，我们先看一下这里有没有效果，这边我们刷新一下，然后 后呢把鼠标移进去，哎，它出来了，对吧？哎，全部都可以显示出来了，最后呢就是当鼠标移开的时候，再让它隐藏回去呢，就可以了，所以这里的话就是当它 ome out 的时候， 再让他呢 display 再为难就可以了。好，这边刷新然后呢移进去，没问题哈，移出来，哎，基本效果的话就基本上实现了，就还有一些样式上面呢我们再调一下，看一下样式， 这里这个 h 四这个凹啊，我们应该给下面这些每个里应该也给他来上一份，对吧？现在呢上面的话我们移上去呢，是有这个圆角的这个背景颜色，但是移到下面的话，他还是一个矩形哈，并且没有这 手型，所以呢每个力的话也给他来上一份，就是力让他凹我的时候呢啊，也给他加上这个样式，这个时候刷新呢啊，下面的圆角和手型呢都出现了，然后就是像这边做好的，我们怎么样把这个分割线呢也给他加上， 这里大家是不是觉得应该很简单，对吧？我们给这些小粒呢，每一个粒给他加上一个上边框呢，感觉应该可以，对吧？我们这里试一下， 就给每一个力呢给他加上一个上边框啊，这里呢就给他来上一个波德塔，然后是一个像素的虚线的， 然后呢紧 ccc 这么一个颜色，看一下怎么样？这边刷新一移进来呢，哎，这个线他有是有了，但是呢正常来说我们上面的第一条这个虚线 是不需要的，对吧？所以的话我们看一下有没有什么办法把最前面的这一条啊，就第一个的上面的这一条的话，这个分隔线的话我们给它去除掉， 其实这里我们直接选中这个 class 为这个力上，也就是呢直接选中这些力的话是不好操作的，我们可以换一种方法来选中他，这里呢，我们可以这样子来选哈，我们先选中这个 class 为 ulsom 的这个 ul 一二三，然后呢再选中他下面的 lee， 接着的话我们就要排除，用这个 not 来排除，排除什么呢？排除第一个 lee， 对吧？也就是说 first try 第一个 这样子呢，选中的就是 class 为 u l 三了，这个 ul， 它下面的这些小力，但是排除了第一个就是第一个的话，就不会应用到 这个样式，我们来保存看一下效果，这边我们刷新一下，然后把水压仪进来呢，哎，第一个的话他就没有这个上边框了，但是下面这些呢都是有这个样式的。 好了，内容就到这里哈，这种做法的话，可能相对来说呢稍微复杂一点，因为里面应用到很多的 js， 我们下个视频呢可以用这一个 css 和 flash 布局呢， 实现一模一样的效果，并且不需要用到 gs。 但是这里为什么还是跟大家说这种做法呢？因为我觉得这个实力里面的很多这些知识点的话，还是比较重要的， 比方说像这一个普通函数和降投函数，他们的使用场景不一样的话，他们使用的方法也是不一样的，因为这个 disc 的指向不一样。 还有呢，如果说我们代码量比较相似的情况下的话，我们可以封装一个函数来做，这样子可以节省我们的一个代码量，还有看起来也比较可读性比较强哈，好，感谢大家的收看。
611小K师兄
06:11查看AI文稿AI文稿好，接下来呢，咱们带同学们来去学习 sirix 下拉菜单标签的相关内容。咱们的下拉菜单啊，其实在网页中所表示的是给用户提供多个选择项的下拉表单空间， 比如说同学们来看右图所示的效果，在所在城市这个选项中有上海、北京、广州和深圳，那这些城市的名字呢，都是共用的，不需要用户去填写，用户只要点击完之后呢，在其中选择自己所在的城市就可以了， 那像这种场景，咱们可能就会使用下拉菜单这个效果来去完成。那现在啊，咱们想在自己的网页中也展示出一个下拉菜单的效果，那咱们应该怎么去做呢？哎，这边老师就来带同学们去学习我们下拉菜单相关的标签语法以及蛋 实现。那咱们首先来看一下咱们下拉菜单的标签组成，其实啊，咱们的下拉菜单呢，他的组成是有两个标签共同完成的，首先第一个咱们下拉菜单呢，他存在一个整体， 这个整体呢咱们需要使用第一个标签来去完成，叫做史莱克特标签，他表示下拉菜单的整体。然后咱们下拉菜单除了有整体之外，它里面是有一个一个的选项的， 那像这每一个选项，他所使用到的标签是下一个标签叫做 oppo 选标签，表示整体里面的每一个选择项。 好说了咱们标签的组成之后，接下来咱们就来通过代码的形式来带同学们演示一下。这边老师打开咱们的 vsq 的，首先我们来回忆一下刚 刚才所讲到的两个组成标签，第一个标签呢叫做死 like 标签 s 一 l ect， 那他呢？表示的效果就是我们下拉菜单的整体。 好，我们再往下看，咱们下拉菜单除了有正题之外，还有里面的每一项叫做啊，不是什么标签。 optr on， 他所表示的是下拉菜单的每一项。 好说，完了代码组成之后，接下来咱们就通过代码的形式来去把刚才所展示到的所在城市这个部分在咱们资金网页中展示出来。 好，首先咱们在写内容的时候啊，我们还是一步步来去实现他这一个选项表示的是所在的城市。跟上一个冒号。好，要写咱们表单空间了，咱们的 原则是从外往里挨个去写，那先写咱们的整体，也就是这边的死 like 标签，写完之后按下菜谱键哎，生成了一个标签哦。 当然深沉的这个标签身上 vsco 的帮咱们默认提供了两个属性，目前咱们用不上，先把他给删除掉。删除完了之后，咱们很明显会发现，死啦的标签他是一个双标签，那么他的内部是可以填写相关的内容的。 好，我们来看看里面的内容哦，在咱们当前所展示的效果中，它里面是放了四个选项，分别是北上广深，那这边老师就来填上去哦， 为了带满规整一点，咱们就把下面的 spax 标签让他前面加几个缩进在里面，再去填写每一个选项哦。首先我们每一个选项用的标签叫做 啊，不是这么一个标签，写完之后，按下太阳键哎，帮咱们自动生成了一个里面的歪六属性，目前咱们也用不上，先把他给删除掉。起， 那这边一共有几个选项嘞？一二三四有四个，那咱们 ctrl c ctv 复制四个出来，然后填写相关的内容，那咱们填写第一个上海，再是咱们的北京，还有咱们这边的广州，还有深圳，哎， 全都填好了，填完了之后，咱们来看这边的效果和怎么想的是不是一样的哟。此时咱们来去刷新 哎，我们页面中就展示出了一个下拉菜单在这个位置，而且我点击之后是可以用来选择哦，我们当前的所在城市里哦，选上海哎，选北京都是可以的。好，说到这呢，咱们就把下拉菜单 的标签组成已经能把它实际给用起来了。但是我们在实际开发的时候啊，可能会遇到这么一个场景，咱们会发现我们当前所看到的所在城市，网页中一刷新默认选中的是第几个选项呀？ 哎，这是第一个上海这么个选项。那同学们会发现，对于咱默认情况来说，网页一刷新他是选中的是第一项，但现在啊，我想他页面一刷新默认选中的是北京，那这一点咱们怎么去做呢？ 哎，这个时候需要设置到咱们下拉菜单的默认选中了，咱们下拉菜单的默认选中不再是之前咱们所学的 check 的这个属性了。下拉菜单的默认选中，他是另外一个相关的属性，叫做 strut 的这么一个属性，他呢是用来针对于下拉菜单 单的默认选中的。好，那这边带同学们来去感受一下哦。比如说现在咱们想让北京夜明珠一刷新就默认选中，咱们可以直接在北京的这一个奥布生选项中写上这么一个属性，叫做斯拉克 t 的属性， 那么我们敲完首字母之后，这边是有对应的提示的，咱们选择这个提示点击一下。哎，同学们会发现选完了之后，后面帮咱们补全等于号引号了吗？ 没有，意味着这个属性值也是可以省略的。好，弄完了之后我们来看效果哦，此时我们来去刷新 哎，北京虽然说作为第二项，但也是一来就默认选中的，达成了咱们最开始的想法哦。好，说到这里呢，咱们已经把下拉菜单的相关内容都介绍完了哟。 同学们需要注意，下拉菜单呢，是由两个标签共同组成的，整体是 stex 标签，每一项是凹陷标签。如果 同学们想让下拉菜单中的某一项默认就选中，咱们可以使用一个属性叫做史莱克 t 的来进行使用。好，说到了这里呢，咱们就把下拉菜单的相关内容都介绍完了呦！
00:56
00:23
00:363.4万🐚🐚
04:12查看AI文稿AI文稿这个视频我们介绍两种方法，用 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 的高度， 这里一个地方的高度呢是三百五十像素哈，两个就是七百，所以这里呢就写七百就可以了，不用写单位的。滑动页面， 再点击按钮没有问题，同样可以滑动到指定的位置。好，这个视频我们就分享了两种方法，实现页面滑动到指定位置的，感谢大家的收看。
522小K师兄
08:37查看AI文稿AI文稿you make me feel so crazy still in love with you you i can love all right coming around the sight darling alone lord i'm sorry to let you。
412艾恩小灰灰
02:07查看AI文稿AI文稿微信有三种好用方便的转账方式，看看你都用过哪一种，下面跟着我来一起了解一下吧。第一种方式是通过银行卡号来转账，我们长按微信图标两秒钟，然后点这个收付款， 再向上滑动最下方这里有一个向银行卡或手机号转账，我们点开， 然后点上方这里向银行卡转账，在这里我们输入一下收款人的姓名，收款人的银行卡号，然后再点开这里，选择相应的银行收款人的信息，都输入好之后，我们点击下一步， 然后输入转账金额，点这个转账，然后输入这个支付密码，最后就转账成功了。通过银行卡号转账，这里需要注意下， 是需要收取百分之零点一服务费的，这种方式比较适合大额转账。第二种方式，通过手机号向对方转账，我们点击这里，然后在这里输入对方的手机号，输入好之后，我们点击确定，然后输入转账金额，点击这个转账， 输入支付密码，最后就转账成功了。通过手机号转账，这里需要注意下，转账的前提是需要对方开通，允许通过手机号转账才可以开通，方法也很简单，点击这个手机号收款设置， 然后点手机号转账设置，把这个允许通过手机号向我转账，把这个开关打开，对方把这个开关打开之后，我们就可以通过手机号向对方转账了。 第三种转账方式应该是大家用的比较多的一种，直接点开好友的聊天对话框，然后点这个加号，再点这个转账，然后在这里输入金额，点击转账，再输入支付密码， 然后点完成，这样就成功的给对方转过去了。觉得视频对你有帮助的话，可以点赞、收藏转发出去分享给更多的朋友，也可以关注我，每天分享手机小知识。
1836龙哥玩手机
00:09
02:11
00:0712.6万快乐的狗头
05:23
06:56查看AI文稿AI文稿现在呢，我们来介绍最后一种菜单，下拉列表，下拉列表呢，它就两个标签啊，配合使用来实现的，也就是 sled 和 autumn。 它具体语法呢，是这样的，首先呢是我们的 select 标签， select 标签呢，它代表就是下拉列表。在我们的 select 标签内部啊，它有很多的选项，每一个选项呢，我们采用一个 awesome 标签。现在呢我们到具体代码中看一下。 首先呢，我们在表单中啊，插入个 select 标签， 在我们的词类标签中呢，我们插入五个选项，每一个选项呢，我们采用一个 austin 标签。 像这样一堆东西呢，就是我们所说的下拉列表，我们来看一下它页面效果是怎么样的？ 下拉列表，它的页面效果呢，是这样的，我们点击下这个小三角，然后呢他会展示出所有的选项，接着呢我们可以点中其中的某个选项，点中某一个选项呢，就是选中这一个选项。 这样一个东西啊，就是我们所说的下拉列表，他的数据展示方式呢，是以列表的方式啊来展示出来。 也就是说呢，我们可以把下拉列表啊看成是一种特殊的无税列表。之前啊，我们都知道无税列表呢，它是使用 ul 和 li 这两个元素的，而下拉列表呢， 它采用是 sled 和 austin 这两个标签。对于 sled 标签来说呢，它有两个属性，分别是 multiple 和 sign。 我们先来看第一个 multiple， multiple 呢，它的作用啊是用设置下来菜单是否可以选择多项，现在呢我们来尝试一下， 我们在这里啊，给 slide 这个标签添加一个 multiple， multiple 它的曲子呢也叫做 multiple， 但是呢在我们最新规范中啊，他后面这个曲子啊，可以赏略掉，也就说呢，这个属性跟我们之前介绍的串属性啊是一样的，都可以赏略他的值。 接着呢我们来查看一下页面的效果，这个时候呢，页面的效果啊，就变成这样，但是呢，我们 钢铲的效果啊，他只显示其中的一项，只有点击这个小三角啊，他才会展示所有的项，而这里呢，他会展示多个选项。 我们刚才说了， moto 这个属性呢，可以让我们选择多项。怎么选择多项呢？首先我们按住 ctrl 这个键，按住了 ctrl 键之后呢，我们再选鼠标啊来点击， 这个时候呢就可以选择多项。大家一定要知道，我们首先要按住 control， 然后呢再点击鼠标左键，这样才可以选择多项。 对于 select 标签来说呢，它有第二个属性，也就是 site， site 属性呢是用于设置下来菜单呢显示几个选项。现在呢我们修改一下代码，我们为它 添加一个晒属性，晒属性只能为三， 这个时候呢，我们的下来菜单就只会显示三项，不过呢，我们可以拖动右边的滚动条来查看后面的选项。 刚才呢，我们介绍的两个属性呢，都是 slide 标签的属性，其实呢，我们的 auton 标签呢，也有自制的属性。 action 标签呢，它有两个属性，分别是 slightly 和 value。 value 我们就不用多说了，几乎所有的表单元素呢，都有这个属性， 它的作用呢，就给我们这个选项啊，取一个值，这个值一般情况下我们用不上，所以呢，这里我们只需要看一下 auton 标签，它的 select 属性， slotty 这个属性呢，是用于设置啊，我们当前这个选项是否被选中？这里呢，我们为第一个和第三个选项啊，设置它的 slotty 属性， slice t 属性呢，它的举子啊，也叫做 slightly， 但是呢，我们可以省略它的值。 上面这个 side 呢，我们修改一下，接着呢查看一下页面的效果， 此时呢，我们的页面效果啊变成这样了。从这里呢，我们可以看到第三个选项被选中了，但是我们刚才啊，好像也设置了第一个选项是选中的，为什么他只会选中其中的一项呢？ 其实这是因为啊，我们只能对其中的一项进行设置，因为对于下拉列表来说呢，他默认情况下只能选中其中的一项。如果想要选择多项 这个问题呢，小伙伴可以思考一下。其实啊，我们刚才已经介绍过了，就是对 select 标签呢，设置它的 multiple 属性， 这个时候呢，两个 slider 就生效了。从页面的效果呢，我们也可以看出来，第一个和第三个选项已经被选中了，如果没有设置 multiple 属性啊，我们只能选中其中的一项， 但是呢，设置了 multiple 属性之后，我们可以选中多项。最后呢，我们再来解决一下初学者经常会碰到的两个问题。第一 一个问题呢，我们这一章啊，介绍的表单元素那么多，并且呢，每一种表单啊还有非常多的属性，像这样情况，我们应该怎么去记忆呢？其实啊，对于初学者来说呢，表单的记忆啊，是我们最关心也是最头疼的一件事。 不过呢，在 hdm 入门的时候啊，我们只需要感性的了解这些表单元素以及他们的属性就可以了，如果记不住呢，我们就回来翻一下。此外呢，我们的编辑器 hbude 呢，它也有代码提示，在初学者阶段呢，我们只需要借助代码提示来实现就可以了。 第二个问题呢，我们的表单元素啊，是否一定要放在 fun 标签内部呢？其实啊，表单元素呢，它不一定都要放在 fun 标签内部。对一，需要跟我们服务器进行数 数据交互的表单元素呢，我们就必须要放到 fun 标签内部。如果这个表单元素呢，不需要跟我们的服务器啊进行交互，那么呢，我们就没必要把它放在 fun 标签内部，这一点呢，大家一定要了解。
10江夏四卯
![[HTML+CSS] 下拉菜单，赶快封装成你的组件吧#下拉菜单 #前端开发 #程序员日常 #HTML #CSS #计算机 #大学生作业](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/33cec525afff5d02d6d66b442f2982d7~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2107098000&x-signature=eoOnh7%2FgpAhTa%2B3MzdSyjk1beM8%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20261012010246C5D39F4E3C4429EC1BCA)
