静态英雄联盟轮播图布局

---

前言

学习了一段时间的JavaScript总觉得并不是非常熟练，写一个静态LOL轮播图练练手。

轮播图在许多网站上都可以看到，像淘宝，京东等电商网站的首页，是不可或缺的页面元素。

先来看看实现效果吧~

一、轮播图效果

二、轮播图是什么？

示例：轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块

三、样式标签是什么？

style标签的作用是用来说明所要定义的样式，style标签用于为HTML文档定义样式信息，在style元素里，可以指定HTML元素在浏览器里的呈现方式，style标签应放在head里

代码如下（示例）：

<style>

</style>

轮播图大体结构：

HTML部分：

创建一个div标签，用于编写整个轮播图结构，命令.banner

   <div class="banner">

根导航据banner中内容，划分成img区域，以及导航区域,区域div

 <div class="banner_img">
 <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220513/1880117fcca33efc8c78ca9710544c12.jpeg"> 
 </div> 
 <div class="banner_nav">

网页还原过程中，如果需要编写对应的并列结构，直接使用无序列表进行开发ul>li

             <ul>
            <li class="active">EDG冠军战队皮肤</li>
            <li>EDG冠军荣耀宝箱</li>
            <li>西部魔影2022</li>
            <li>西部魔影通行证</li>
            <li>2022西部秘宝</li>
          </ul>
      </div>
   </div>
</body>
</html>

CSS部分：

 清除网页的默认距离  
  *{margin:0;
    padding:0;
  }

网页长宽高度大小

   .banner{
   
    width: 820px;
    height: 380px;
    background-color:blue;
  }

背景图片大小

  .banner_img{
    width: 820px;
    height: 340px;
    background-color:red; 
  }

  .banner_nav{
   
    width: 820px;
    height: 40px