36_尚硅谷_h5_音阶导航.wmv原创

啊，我们来做一个什么呢？来看一下360有个东西。好，我们访问360啊，360史上最不要脸的公司是吧？啊360去他的。呃，这套浏览器啊，渠道的三级的什么。官网吧。哎，是我记得是360是有一个什么叫什么。360。360的。来看一下啊导航。啊，这里你看这什么360导航嘛，哎，三零导航这边大家是不是有一个导航条是吧？OK，大家看这个导航是不是可以点的，而且后面上去大家看是不是有一个后位效果的，是不是来看一下，诶我不知道诶这什么鬼。有有个后卫效果是吧，后面是不是有就要开启啊，走你干嘛。

哎，这个静音吧，现在就干嘛开启了。啊，他资源还没有加载回来，因为。你生不一样。CTRLC干嘛重新，怎么那么慢网？Con。呃，现在是干嘛开启的。是不是没声啊，开启好看的。是没音啊，还是没声吧？这就没了。可能什么啊，可能啊，可能没有了，那我们来看一下啊，看一下我们之前说的。叫音，这个叫音阶导航，我们来看一下。

好来看一下啊，比如说我点去。就是你鼠标后上去时候他会干嘛，像钢琴一样干嘛。弹点声音出来嘛，啊，这个叫做音阶导航啊，这个音阶导航一般是一个隔一个的，就我的主页上面有有音阶，新闻头像上面是没有的，最新一点也是没有的，懂懂有有音阶有音阶有音阶有音阶有音阶讲啊这种东西怎么做，其实蛮还是蛮好做的，首先这种布局能画出来。那我们来写一写吧。零七我们来做一个音阶导航好，那这是我们第一个实例啊，音阶导航好，下午做实D逗号逗号好，来看一下CTRL2L标签好。

马干掉，Pen干掉，OK，马这边什么好，其他先不做好，嗯，对。好。好，来看一下好结构怎么设计，你上来看到了几个结构，先从大的容器上面看，给我看到了几个大的容器。肯定有个包谷期的嘛。漂亮。是不是包括前应该是个U，里面是LY是吧？OK，那就完美了，怎么办？好，写TV ID wi是吧，里面ULOK，给个class吧，叫做never是吧，里面是LYLY里面应该是一个什么样的结果？

啊，待会是不是要有个颜，要有个颜色会上来的，应该几个结构。两个是吧，一般是一个导航嘛，A标签嘛，A标签底下应该有一个快是吧，给一个class。叫做。嗯，叫什么，下面怎么说B1就当吧，是不是OK，这是什么，放在下面那个快吧，OK，那这个结为C。啊IPT是吧，干掉OK，我的主页我的。主页是吧，走你应该有几个九个。一哎，我刚没数，哎，改吧，我的主页新闻OK，这是么？

怎么感觉好新闻？头条是吧，好，这种布局你要想想啊，你能不能写出来好电视剧，最新电影电视剧啊。最新电影好。腿长一米八什么鬼啊，当时的班主任是一个大长腿啊，腿长一米八啊，现在是一个老男人小说。大全，是不是还有什么旅游度假？是这种旅游？度假是不是还有啥？应该是正品团购。应该是正品团购。说明当时很嗨，正品团购是吧，今日。

唱歌。今天日子，今日团购和你们这些没有办法取悦的男人哎。卡了还卡一把。多了一个吧，是不是，那想想这种效果，大家想后效果怎么做，其实就是有个块在下面吧，有个在下面嘛，鼠标后上去让他干嘛上来嘛，是不是在哪，那其实比较好做。OK啊。嗯，你这狗啊，这应该这应该是有什么寓意。看一下，我记得我是写了一些参数的。好，好像正面写30，那我们就去。量一量吧。OK，来看一下这个音阶导航这一块，咱们现在做的这个比较丑是吧？来看一下它的尺寸有多大。

它的尺寸为多大？100乘以多少？100乘以38码是不是？大家想想，那我们这个时候整个ul的宽度应该有多少？有九个码，900还有两边的。边框吧。是不是啊，你看它有几个变化，一二三四五六七八九十嘛，那我们应该给九百十嘛。是吧，边框还有一小数呢是吧？OK，那整个宽度给吗？900Y10我们给什么？910X，那想想910PX的话，OK应该没问题是吧？好，然后呢，高度呢，就给38吧，是不是OK，先给它描个背景色，看他在哪。好，现在在哪？

是不是在这块OK，然后让他居中怎么办？跟谁有关系，让他居中？跟外有关系吧，是吧，其实差居中的话，马是在你左右，凹凸就居中。是不是OK很明显前面是不是前面是不是有些什么去啊末样是这怎么选list style等于那干掉。是吧，OK，它的A标签上的些，我谁给它清了text等于那是吧，我们说A标签，如果我们说A标签乘以麦，是不是有三项数的空隙啊。记不记得，所以A标签的行为一直都比较诡异，所以说我们直接把它列调成多啊，它跟它就跟快计元素差不多了，有不讲啊，OK，来看一下这个颜色里面是不是黑色啊，那给一个color给成黑色。

好就过来了，那干嘛。浮动起来是不是就行了，所以为全部都为left。呃，应该是LY浮动是吧，OK，应该是ul底下的所有的LY，你们应该补东西了是吧？所以看一下是不是就上来了，好，每一个LY看现在长什么样。LYY是不是靠内容撑开来了啊，LYY为什么靠内容撑开来，这个LYY是不是一个快元素啊，浮动了，是不是就靠内容撑开高宽了，那怎么怎么办，看为百分百嘛，是不是高度宽度呢。还的百宽度能不能拿百分百，不能宽度是拿U100啊100啊，记得不用算了是不一百是不是就过来了，OK，然后呢，Text等于是是吧，给个行高，然后给个不能写一吧，写一是跟你的方方的size一样吧，应该写38是不是整。

看是不是差不多了，是不是OK，然后让那干嘛，呃，波的是不是他们都应该有什么这个正面给它干掉，他们是不是都应该有个变化，波打Bo波的EPX的实心走。哎，有问题是不是啊，大家看咱们的边框其实应该是，你看这边是不是有多出来了，是是咱们这个边框应该给。U是不是让U外外部先有边框嘛，来看一下只有你是不是先先是这样的，然后怎么办。每一个都给右边吧，最后一个右边不要吧，那是不是UL的吗？他们都应该有个右边框是不是。

是不是啊，我们说他们他们应该都有一个右边框吧，那什么玻璃干什么刚right。是不是EPX的实心女？好，这边多了一个是吧，多了一个怎么办。去了吗？那怎么想落车？Not嘛，是不是排除什么last last last。Of。是不是这么写的？Last last child，或者说last是不是你刷一下啊，最后是就没有了对不对，然后让他稍微下来一点。对吧。啊，我就把它举动让他稍微下一点是不就行了，三百一你管我是不是来，300是不就下来了，跟不讲给200吧，纠结好是不过来了，然后呢，然后咱们是不是就写里面的。

A标签跟d div了，来看一下我们现在这个A标签在哪，你看我在A标签是不是侧面整个L整个LY了，是不是，我们是不是应该有个div在它的下面是吧。OK，其实我们这个直接写就可以了。是不是全局什么。Ul底下不应该是什么ul底下的LY吧？LY底下是谁啊？这个A标签怎么画的这么突兀啊，到上面去。OK，好。U底下的吧，他底下的什么。点到是不是写精确一点，应该这样。是不是啊好，再写精确一点，Div点到可以很好好然后呢，它的高宽呢，宽度我们说的多少三是吧，高度远分是别个呀。

高度不跟LYY一样吗？宽度不是38吗？高度、宽度。其实宽度高度都可以百分百是吧，跟每个LYY一样就就行了是吧，宽高都百分百，那宽度就可以不写高度百分百不就行了吗？是不是看是不是这是不是为什么现在看不到没有颜色而已吧，是不是给一个什么背景颜色给个什么。都在这边吧，好应该什么超过整个什么UI的话，直接为。

是吧，好，全部干掉是吧，然后敷上去让它慢慢上来嘛，是吧，那怎么办？Ul底下什么？来看一下A标签在这是不是每次放在A标签上就是是吧，每次放在A标就是让这个当慢慢上来是吧，OK，那怎么办？U底下的LY底下的A标签每次在你后的时候，你绕谁。A，标签在后面的时候，让点到这个，这个选怎么写，我能怎么写吗。啊，我A标签后面的时候，让A标签底下的档。我能这么想吗？不能吧，在O的时候，现在不好整了。选对，你看我们这行不行，看下圈Y让上走负38PX看一下走你。

刷一下行吗？肯定不行啊，因为干嘛，因为你当不是在A标签底下，你应该在A标签干嘛，LY后位的时候呢，它LY底下的大码这就可以了，刷一下这你看是不就上来了，是不是给一个过渡。给谁过渡啊，谁要谁去啊，他去运动啊，OK，给他一个全三角形，我们给个。两秒吧。那是有点长，那就给秒吧，是吧。一秒你就感觉长啊，你要上天是不是OK点我是不是就可以了，OK，那是不是就做完了，还没想呢，他是不是还他他是还得有声啊，啊主要是主要是得有声音。

啊无所谓有个是哪边是，其实他是多了项是。是不是啊，它是不是多对项数，这里你看后面就没空了是吧，为什么都项数，因为最后这个边框是谁的一万五的是吧，那应该是多了两项数两边的边框吧。只有你这才是才算最好的吧，是吧，OK，好来看一下，那现在是不是就就差放声音了，放声音其实好做干嘛？来看我这边搞一个O，你看这边不是我的U吗？是不是OK，我随便在哪边搞一个。AO，是吧，搞audio什么都不给，我空间都不给，相当于这个标签没写。

我都没给空间嘛，你给空间就要出事，你给空间他要占位了是不是？兄弟一给空间他就要占位了是，那我就不给空间是不是？OK，不给空间我就让在这么待着是不是？然后每次我后上去时干嘛想呗怎么办，写GS呗，是不是先把这个音乐音乐给你们找到。OK。CTRLC是吧，我们去找一下大家看。这是不是想一下只有你，然后呢B然后呢C然后。D懂了，它其实到G啊，看到G有没有啊，G后面什么ABCDEFGH。

就没了啊，到到到G9啊，就GG了啊，再来看一下那怎么办，这么玩，那这个地址是不是干嘛得拿过来好可以去换C。Ctrl a ctrl c是吧，把这个例子给它拎过来好，是不是我要对这个地址上面去动一些手脚，首先你不管，你要把所有的L给我拿到。是吧，首先拿到所有的LY，因为你干嘛进入到你LY领地的时候，你是不就应干嘛，那这个O对SR干嘛想起来是不怎么办的Q，哦，是不是找到什么ul底下的所有的ly OK，找到这LY之后怎么办？啊，其实最好不要写U万，为什么不要写U万，因为页面上肯定可能会有很多UI，我如果不是给它取的名字叫200嘛，是吧，OK，那怎么办？循环嘛，每次干嘛。

问，一个I等于零是不是I小于？点佳佳是吧，怎么办？每次上去干嘛？他的什么？啊不，诶，问题是现在我要拼这个东西啊，那怎么办？还要拿到O6吧，画一个a do6等于什么？多找到这个什么，是不是找到，找到找到时候怎么办。不就是干嘛去改他的什么吗，什么。我们先就给一模一样的吧，是不是其实其他暂时不是不用放到循环里面去了，是吧，是其实在负循环干嘛，负循环里面要干嘛要要干一点事情，每次在你好吗。点是哪叫什么某。

Over什么吧，是不是让你触发一个函数吧，这个函数里面上来是吧，就取给它懂吗？点吗？Src等于什么？等于这个玩意儿CTRLC来看一下行不行，是不是就可以了，来看一下。说一下。没有想吧，啊，其实你是不是只改了改了SC啊，你有两家放吗？A，不对，电视不去放走你。你发现是不是干嘛，你看我上去想一下吧。可是你发现你看我每次是干嘛斯干嘛，我们说欧斯是不有可能触发多死啊，很不干净的吧，干嘛我说么某斯摁着是不是更好走，你上去你看出来就一直上去，出来就一直报，其实刚刚上去出来发了他让他发了两次声音是吧，因为你进去也是摩斯头，出来也是摩斯，懂吗？所以说Mo斯头不干净，那应该用Mo斯。

是吧，而且我们说每一个LY隔着有吧，是不是，那我们是不是还得做个判断，而且CD不一样吧，那怎么办？是不是应该有个标记啊，是不是来看一下。就我们说第一个项应该有是吧，FLG反出来等于一个。A是吧，只你这个flag等于B是吧？OK，这个flag等于C，是不是本身就要跳一个。

第二个应该没有给。给这个是吧，CTRL好，这个应该没有CTRL应该给给他是吧，这应该干嘛给他移过来。ABCDOK，这个呢？没有abcd是什么是吧，OK，怎么办？这里面做个。判断呗，是不是耶，你有这个flag我才让你去啊。去想吧，OK，那我怎么去拿到这个flag，那这个flag是不是可以直接直接干嘛，直接写到这个G的位置上，是不是OK，只有你加加。Flag是不是可以了？好，这么呢？一个flag等于什么？this.get找到这个flag不就可以了吗？

是不是get什么？不就拿这个属性吗？来看一下。有没有，是不是可以了，其实如果浏览器如果你不想考虑什么兼容性的话，你可以这么想。对杠是不是不知道里面是不是就就是这么干的，所以跟GS有关的属性都加对杠啊，其实我们习惯性你做一个东西的时候，跟G有关都加杠啊，你在这边如果兼容性想高一点的话，你可以通过什么对杠去拿。是吧，这样也可以拿到啊，算下是吧，啊，其实我们有更好的方案可以么？谁this点什么，是不是点什么。

是不是可以了，当然你可以在在什么，你看比如说现在是不是这个这个这个是不是也可以啊，当然很有可能，有时候干嘛拿不到嘛，那怎么办。那你看它是不是等等于U，如果不等于，我直接去。拿它。是不是OK，如果干嘛。就拿这个。是不是就可以了，那这么写是不是稍微有点烦了，你还不如直接写什么上面这个呢，是不是来看一下这个行不行，算一下没问题是不是？OK，这就是我们做的一个硬阶导航啊，那下午我们来做一个自定义播放器。