专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
程序员的那些事  ·  北京大学出的第二份 DeepSeek ... ·  17 小时前  
码农翻身  ·  中国的大模型怎么突然间就领先了？ ·  昨天  
码农翻身  ·  漫画 | 为什么大家都愿意进入外企？ ·  2 天前  
程序员的那些事  ·  OpenAI ... ·  2 天前  
程序猿  ·  “我真的受够了Ubuntu！” ·  4 天前  
51好读  ›  专栏  ›  SegmentFault思否

也许 vue + css3 做交互特效更简单

SegmentFault思否  · 公众号  · 程序员  · 2017-11-22 08:00

正文

1.前言

做项目就难免会开发交互效果或者特效，而我最近开发的项目一直在使用 vue ，开发技术栈方面，理所当然就使用了 vue + css3 开发，过程中发现使用 vue + css3 开发特效，和 javascript / jquery + css3 的思维方式不一样，但是比 javascript / jquery + css3 简单一点点。今天就分享三个简单的小实例，希望能起到拓展思维的作用，让大家明白vue+css3应该怎样开发交互效果！如果大家有什么好的建议，或者觉得我哪里写错了，欢迎指出！

  1. 文章上面的代码，虽然代码很简单，不难理解，但是也是建议大家边写边看，这样不会混乱。

  2. 文章所提及的小实例，都是很基础的，大家可以参照自己的想法进行扩展，或者修改，可能会有意想不到的效果。我写这类型的文章也是想授人以渔，不是授人以鱼！

  3. 这几个实例，摘自我自己的平常练习的项目，代码已经提到github上面了(vue-demos)。欢迎大家star。

2.开场小动画

运行效果

gif图模糊效果看着跟实际效果不太一样！大家注意！

原理分析

说到原理分析，其实也没什么可以分析的，就是在页面是下面这个状态的时候，把文字替换掉。至于看到字体缩成一团，就是 letter-spacing 这个 css 属性的控制效果。字体模糊就是 filter:blur() 这个 css 属性的控制效果！看到有逐渐的变化，就是css3动画（ animation ）的效果

下面简单分析下，这个动画的几个步骤，从下面看到，这个动画一共8个步骤。

这下就清晰明了了，我们要在下图这个瞬间开始改变文字，也就是页面加载了两秒后，动画执行了两次后就开始改变文字。然后每隔两秒改变一次文字，直到最后！

下面给出 vue 和 javascript 两种方式的代码，看下哪种方式更加的简单！

vue方式 
  1.     
  2.      lang="en">
  3.     
  4.          charset="UTF-8">
  5.         




    
</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Title</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><style/></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        body{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            background: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#ccc;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        h1 {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            color: white;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            text-transform: uppercase;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            margin-top: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            text-align: center;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            font-size: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">6rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            line-height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            animation: letterspacing </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1s</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">7</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> alternate ease-</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">in</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">-</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">out</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            display: block;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            letter-spacing: .</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">5rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">@keyframes</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> letterspacing {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">% {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                letter-spacing: -</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">72px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                filter: blur(</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">20px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">% {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                filter: blur(</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">6px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">80</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">% {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                letter-spacing: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">8px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                filter: blur(</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">id</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"text"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><h1/></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{{testText}}</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><script><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">src</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"vue.min.js"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></script></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><script><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"text/javascript"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Vue</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">({</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            el:</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'#text'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            data:{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                nowIndex:</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                testText:</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'欢迎浏览'</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            },</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            mounted(){</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                let _this=</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                let timer = setInterval(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(){</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    _this.nowIndex++;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">switch</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> (_this.nowIndex) {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">case</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            _this.testText = </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'守候的文章'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">break</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">case</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            _this.testText = </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'愿您浏览愉快'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">break</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">case</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">3</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            _this.testText = </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'学到知识'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">break</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> (_this.nowIndex > </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">3</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">) {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        setTimeout(() => {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            clearInterval(timer);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        }, </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2000</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                }, </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2000</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        })</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></script></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></ol></pre><h5 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;white-space: normal;">javascript方式</h5><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box;margin-top: 0px;margin-bottom: 0px;padding: 8px 0px 6px;background-color: rgb(47, 54, 64);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);font-size: 10px;line-height: 12px;"><ol class="linenums list-paddingleft-2" style="list-style-type: none;"><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="dec" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">lang</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"en"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><meta/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">charset</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"UTF-8"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><title/></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Title</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><style/></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        body{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            background: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#ccc;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        h1 {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            color: white;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            text-transform: uppercase;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            margin-top: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            text-align: center;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            font-size: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">6rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            line-height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            animation: letterspacing </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1s</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">7</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> alternate ease-</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">in</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">-</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">out</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            display: block;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            letter-spacing: .</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">5rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">@keyframes</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> letterspacing {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">% {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                letter-spacing: -</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">6rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                filter: blur(</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">% {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                filter: blur(.</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">3rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">80</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">% {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                letter-spacing: .</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">5rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                filter: blur(</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0rem</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">id</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"text"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><h1/></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">欢迎浏览</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><script/></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">var</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oH1=document.querySelector(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'h1'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">),nowIndex=</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        console.log(oH1)</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">var</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> timer = setInterval(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> () {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            nowIndex++;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">switch</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> (nowIndex) {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">case</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    oH1.innerHTML = </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'守候的文章'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">break</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">case</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    oH1.innerHTML = </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'愿您浏览愉快'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">break</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">case</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">3</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    oH1.innerHTML = </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'学到知识'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">break</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> (nowIndex > </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">3</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">) {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                setTimeout(() => {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    clearInterval(timer);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                }, </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2000</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }, </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2000</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></ol></pre><h4 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;font-size: 18px;white-space: normal;">3.导航滑块</h4><h5 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;white-space: normal;">运行效果</h5><p><img data-type="gif"  referrerpolicy="no-referrer"  data- referrerpolicy="no-referrer"  src="http://mmbiz.qpic.cn/mmbiz_gif/aVp1YC8UV0egPOxSZKVqicxoPRhrwmf73VY2KTrribmwn3T0ibyDqdqoWPCBQ2QpU5YpTeK3Vwwh9iajvufwUjuf2g/0?wx_fmt=gif" data-copyright="0" style="" class="" data-ratio="0.1575" data-w="800"/><span style="color: rgb(21, 153, 87);">原理分析</span></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">首先，下面是页面初始化的时候，橙色滑块的位置</p><p><img data-s="300,640" data-type="png"  referrerpolicy="no-referrer"  data- referrerpolicy="no-referrer"  src="http://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0egPOxSZKVqicxoPRhrwmf73Yd0GwEM0V9FtbNKGIQVc5IklQcxuuC4dklo2Q7kLbNBNq6jwfLNgNg/0?wx_fmt=png" style="" class="" data-ratio="0.06657018813314038" data-w="691"/></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;"><br/></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">鼠标放到第二个tab上面，大家可以看到，橙色滑块就是向右偏移了一个tab的距离</p><p><img data-s="300,640" data-type="png"  referrerpolicy="no-referrer"  data- referrerpolicy="no-referrer"  src="http://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0egPOxSZKVqicxoPRhrwmf730ZbibAsScgcNVkPPnsc2ShrvM8uB86LbzqqLX8vy6YZnIHtl7fpomgg/0?wx_fmt=png" style="" class="" data-ratio="0.10461538461538461" data-w="650"/></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">鼠标放到第三个tab上面，大家可以看到，橙色滑块就是向右偏移了两个tab的距离</p><p><img data-s="300,640" data-type="png"  referrerpolicy="no-referrer"  data- referrerpolicy="no-referrer"  src="http://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0egPOxSZKVqicxoPRhrwmf73nxcDcZrUZqsMyRL30W9ejFk0omFZtFMzZ87bGUUKcKAG92icR1K6GAQ/0?wx_fmt=png" style="" class="" data-ratio="0.17331288343558282" data-w="652"/></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">如果从第一个tab到第六个tab的索引是0,1,2,3,4,5。</p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">那么滑块的公式就是（索引*tab的宽度）。大家看到有逐渐过去的效果，其实是css3过渡（ <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box;background: rgb(243, 241, 241);color: rgb(88, 88, 88);line-height: 18px;"><span class="pln" style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">transition</span></code>）的效果。大家看下面的代码就行了，一看就懂！代码如下：</p><h5 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;white-space: normal;">vue方式</h5><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box;margin-top: 0px;margin-bottom: 0px;padding: 8px 0px 6px;background-color: rgb(47, 54, 64);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);font-size: 10px;line-height: 12px;"><ol class="linenums list-paddingleft-2" style="list-style-type: none;"><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="dec" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">lang</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"en"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><meta/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">charset</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"UTF-8"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><title/></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Title</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><link/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">rel</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"stylesheet"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">href</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"reset.css"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><style/></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        .nav{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            margin: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            position: relative;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    .nav li{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">float</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">: left;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        width: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        line-height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        color: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#fff;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        text-align: center;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        background: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#09f;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        cursor: pointer;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        .nav span{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            position: relative;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            z-index: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        .nav .slider{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            position: absolute;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            transition: all .</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">5s</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> cubic-bezier(</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0.4</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, -</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0.3</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0.57</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1.38</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            width: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            background: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#f90;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            top: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            left: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            z-index: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nav clear"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">id</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nav"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">mouseleave</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nowIndex=0"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><ul/></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">mouseenter</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">stop</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nowIndex=0"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab One</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></span></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">mouseenter</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">stop</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nowIndex=1"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab Two</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></span></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">mouseenter</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">stop</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nowIndex=2"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab Three</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></span></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">mouseenter</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">stop</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nowIndex=3"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab four</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></span></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">mouseenter</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">stop</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nowIndex=4"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab five</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></span></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">mouseenter</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">stop</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nowIndex=5"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab six</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></span></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"slider"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> :</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">style</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'transform'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'translate3d('</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+nowIndex*</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'px,0,0)'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><script><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">src</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"vue.min.js"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></script></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><script><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"text/javascript"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">       </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Vue</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">({</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">           el:</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'#nav'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">           data:{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">               nowIndex:</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">           }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">       })</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></script></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></ol></pre><h5 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;white-space: normal;">javascript方式</h5><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box;margin-top: 0px;margin-bottom: 0px;padding: 8px 0px 6px;background-color: rgb(47, 54, 64);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);font-size: 10px;line-height: 12px;"><ol class="linenums list-paddingleft-2" style="list-style-type: none;"><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="dec" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">lang</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"en"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><meta/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">charset</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"UTF-8"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><title/></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Title</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><link/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">rel</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"stylesheet"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">href</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"reset.css"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><style/></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        .nav{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            position: relative;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    .nav li{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">float</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">: left;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        width: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        line-height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        color: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#fff;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        text-align: center;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        background: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#09f;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        cursor: pointer;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        .nav span{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            position: relative;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            z-index: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        .nav .slider{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            position: absolute;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            transition: all .</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">5s</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> cubic-bezier(</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0.4</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, -</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0.3</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0.57</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1.38</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            width: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">40px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            background: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#f90;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            top: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            left: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            z-index: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nav clear"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">id</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"nav"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><ul/></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab One</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab Two</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab Three</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab four</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab five</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Tab six</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"slider"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><script><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"text/javascript"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">var</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oDiv=document.querySelector(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"#nav"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">),oLi=oDiv.querySelectorAll(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"li"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">),oSlider=document.querySelector(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">".slider"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        oDiv.addEventListener(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"mouseleave"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> () {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            oSlider.style.transform=</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'translate3d(0,0,0)'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        })</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">for</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">var</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> i=</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;i<oLi.length;i++){</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            oLi[i].index=i;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            oLi[i].addEventListener(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"mouseenter"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> (e) {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                oSlider.style.transform=</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'translate3d('</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.index*</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'px,0,0)'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            })</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></script></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></ol></pre><h4 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;font-size: 18px;white-space: normal;">4.轮播图</h4><h5 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;white-space: normal;">运行效果</h5><p><img data-s="300,640" data-type="png"  referrerpolicy="no-referrer"  data- referrerpolicy="no-referrer"  src="http://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0egPOxSZKVqicxoPRhrwmf739arEGtIuGypbicqWWhp2ibz7ImkoxcIiavj8KicT0xib0cKPvxG7icoXvWEA/0?wx_fmt=png" style="" class="" data-ratio="0.5025" data-w="800"/></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;"><br/></p><h5 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;white-space: normal;">原理分析</h5><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">蓝框的是li，黑框的是div</p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">初始化状态</p><p><img data-s="300,640" data-type="png"  referrerpolicy="no-referrer"  data- referrerpolicy="no-referrer"  src="http://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0egPOxSZKVqicxoPRhrwmf73oEibz1IxYvxicjoutic79rfaE1uALRsCjTgpegpJlhJAj5doNocAef2jw/0?wx_fmt=png" style="" class="" data-ratio="0.22125" data-w="800"/></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">处于显示第二张图片的时候</p><p><img data-s="300,640" data-type="png"  referrerpolicy="no-referrer"  data- referrerpolicy="no-referrer"  src="http://mmbiz.qpic.cn/mmbiz_png/aVp1YC8UV0egPOxSZKVqicxoPRhrwmf73dqjazgB8bgf820MDVZDE3Nriaq66j77VFKicFXPGk3p5Z9zdUJaEJBOQ/0?wx_fmt=png" style="" class="" data-ratio="0.2875" data-w="800"/></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;"><br/></p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">看到上面，其实也就是控制ul的偏移量（ <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box;background: rgb(243, 241, 241);color: rgb(88, 88, 88);line-height: 18px;"><span class="pln" style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">transform:translate3d</span></code>）。计算公式和上面的滑块相似，索引（ <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box;background: rgb(243, 241, 241);color: rgb(88, 88, 88);line-height: 18px;"><span class="lit" style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">0|1|2|3</span></code>）* <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box;background: rgb(243, 241, 241);color: rgb(88, 88, 88);line-height: 18px;"><span class="pln" style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">li</span></code>的宽度。不同的就是，ul的偏移量是取负数，因为ul是想左偏，上面的滑块是向右偏！</p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">当第一张图片的时候，ul偏移量设置（ <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box;background: rgb(243, 241, 241);color: rgb(88, 88, 88);line-height: 18px;"><span class="pln" style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">transform:translate3d(0px,0px,0px)</span></code>）。</p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">当第二张图片的时候，ul偏移量设置（ <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box;background: rgb(243, 241, 241);color: rgb(88, 88, 88);line-height: 18px;"><span class="pln" style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">transform:translate3d(-1000px,0px,0px)</span></code>）。</p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">当第二张图片的时候，ul偏移量设置（ <code class="prettyprint code-in-text prettyprinted" style="box-sizing: border-box;background: rgb(243, 241, 241);color: rgb(88, 88, 88);line-height: 18px;"><span class="pln" style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">transform:translate3d(-2000px,0px,0px)</span></code>）。以此类推，偏移量很简单的就能计算出来！</p><p style="box-sizing: border-box;margin-top: 15px;margin-bottom: 15px;font-size: 16px;white-space: pre-line;line-height: 30px;color: rgb(74, 74, 74);font-family: Avenir, -apple-system-font, 微软雅黑, sans-serif;">可能我说的大家有点懵，但是，看下面的代码，就不会懵了，因为代码也很简单！</p><h5 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;white-space: normal;">vue方</h5><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box;margin-top: 0px;margin-bottom: 0px;padding: 8px 0px 6px;background-color: rgb(47, 54, 64);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);font-size: 10px;line-height: 12px;"><ol class="linenums list-paddingleft-2" style="list-style-type: none;"><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="dec" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">lang</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"en"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><meta/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">charset</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"UTF-8"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><title/></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Title</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><link/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">rel</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"stylesheet"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">href</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"reset.css"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><style/></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            .slide-img {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                width: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1000px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">500px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                overflow: hidden;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                position: relative;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                margin: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">20px</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">auto</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            ul {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                transition: all .</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">5s</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> ease;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            li {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">float</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">: left;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            .slide-arrow div {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                width: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">50px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                position: absolute;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                margin: </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">auto</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                top: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                bottom: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                background: url(</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"http://i1.bvimg.com/1949/4d860a3067fab23b.jpg"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">) </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">no</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">-repeat;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            .arrow-right {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                transform: rotate(</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">180deg</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                right: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"/></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            .arrow-left {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                left: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            .slide-option{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                position: absolute;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                bottom: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">10px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                width: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">%;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                left: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                text-align: center;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            .slide-option span{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                display: </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">inline</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">-block;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                width: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">14px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                height: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">14px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                border-radius: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">100</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">%;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                background: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#ccc;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                margin: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">10px</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            .slide-option .active{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                background: </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">#09f;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"slide-img clear"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">id</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"slide-img"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><!--用tran这个class控制ul是否含有过渡效果，样式已经写好--></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><ul><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> :</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">style</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'width'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:(listWidth*list.length)+</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'px'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'transform'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'translate3d(-'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+(listWidth*nowIndex)+</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'px,0,0)'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></ul></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><!--遍历出来的图片--></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><li><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">v-for</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"(li,index) in list"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> :</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">style</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'width'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:listWidth+</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'px'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></li></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><a><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">href</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"javascript:;"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></a></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><img/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> :</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">src</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"li"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"slider-img"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">/></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"slide-option"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">v-for</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"(li,index) in list"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> :</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"{'active':index===nowIndex}"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"slide-arrow"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"arrow-left"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">click</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">stop</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"switchDo('reduce')"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"arrow-right"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> @</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">click</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.</span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">stop</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"switchDo"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></div></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><script><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">src</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"vue.min.js"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></script></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><script><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"text/javascript"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="typ" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Vue</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">({</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            el: </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'#slide-img'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            data: {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                nowIndex: </span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                listWidth: </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'1000'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                list: [</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'./images/timg1.jpg'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'./images/timg2.jpg'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'./images/timg3.jpg'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">, </span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'./images/timg4.jpg'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                timer:</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            },</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            methods: {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//滑动操作</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                switchDo(reduce){</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    clearInterval(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.timer);</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//根据reduce判断this.nowIndex的增加或者减少！</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(reduce===</span><span class="str" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'reduce'</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">){</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//如果是第一张，就返回最后一张</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.nowIndex===</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">){</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.nowIndex=</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.list.length-</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.nowIndex--;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="com" style="box-sizing: border-box;color: rgb(101, 109, 120);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//如果是最后一张，就返回第一张</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.nowIndex===</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.list.length-</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">){</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.nowIndex=</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                            </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.nowIndex++;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">var</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> _this=</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.timer=setInterval(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> () {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                        _this.switchDo();</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    },</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">4000</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                },</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            },</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            mounted(){</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">var</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> _this=</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                </span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.timer=setInterval(</span><span class="kwd" style="box-sizing: border-box;color: rgb(79, 193, 233);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> () {</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    _this.switchDo();</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                },</span><span class="lit" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">4000</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">            }</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        })</span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></script></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li></ol></pre><h5 style="box-sizing: border-box;margin-top: 1.5rem;margin-bottom: 1rem;color: rgb(21, 153, 87);line-height: 1.35;white-space: normal;">javascript方式</h5><pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box;margin-top: 0px;margin-bottom: 0px;padding: 8px 0px 6px;background-color: rgb(47, 54, 64);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);font-size: 10px;line-height: 12px;"><ol class="linenums list-paddingleft-2" style="list-style-type: none;"><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="dec" style="box-sizing: border-box;color: rgb(172, 146, 236);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">lang</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"en"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><meta/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">charset</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"UTF-8"</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></span></span></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><title/></span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Title</span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"/></code></span></p></li><li><p><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><code style="box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;word-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;white-space: pre !important;"><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        </span><span class="tag" style="box-sizing: border-box;color: rgb(237, 85, 101);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><link/><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> </span><span class="atn" style="box-sizing: border-box;color: rgb(160, 212, 104);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">rel</span><span class="pun" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=</span><span class="atv" style="box-sizing: border-box;color: rgb(255, 206, 84);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"stylesheet"</span><span class="pln" style="box-sizing: border-box;color: rgb(230, 233, 237);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">






请到「今天看啥」查看全文


推荐文章
程序员的那些事  ·  北京大学出的第二份 DeepSeek 教程来了！（PDF可下载）
17 小时前
码农翻身  ·  中国的大模型怎么突然间就领先了？
昨天
码农翻身  ·  漫画 | 为什么大家都愿意进入外企？
2 天前
程序员的那些事  ·  OpenAI 奥特曼官宣早产儿！双父生子背后的科技狂人与程序员爱情。网友：人类首个“AGI宝宝”？
2 天前
程序猿  ·  “我真的受够了Ubuntu！”
4 天前
半导体行业观察  ·  软粉们请再爱我一次！骁龙820可跑Win10意欲何为？
8 年前
新闻夜航  ·  小学现“成人式腐败”！写作业拿好处，零食换班干部……现实版《人民的名义》？
7 年前
陆家嘴制高点  ·  上海30岁月入3万为什么还是焦虑？？？（附上海各收入阶层哭穷指南）
7 年前
实验万事屋  ·  老司机带你玩转分子生物学 （高级）
7 年前
供应链金融  ·  供应链金融深度解析，值得收藏！
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!