华为云大前端学习之旅（四）

一、如何写BanneR ？

模仿https://classroom.devcloud.huaweicloud.com 的首页，仿写一个图片轮播图

编写分析-页面布局拆分

主要分为3个部分，分别为父容器，内部图片容器，和4个小圆点，小圆点点击后可实现图片元素的切换。

本文要对静态页面编写的实验，小圆点切换需要使用到JS代码，本文暂时不做处理。

页面编写：

HTML代码：

<div class="banner">
    <ul class="img-list">
        <li><a href="#"><img src="ia_100000024.png" alt="123"></a></li>
        <li><a href="#"><img src="ia_100000025.png" alt="234"></a></li>
        <li><a href="#"><img src="ia_100000026.png" alt="345"></a></li>
        <li><a href="#"><img src="ia_100000027.png" alt="456"></a></li>
    </ul>
    <ul class="point">
            <li><a class="active" href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
    </ul>
</div>

banner 是外框，开启相对定位，用于给内部子元素进行绝对定位做参考

img-list 是轮播图，用于保存BANNGER 内的图片，多层标签嵌套

point 是小圆点，主要涉及点击切换图片，用JS 代码完成，本文章不涉及

CSS 代码

<style>
    .banner{
        position: relative;
    }
  .img-list{
      position: relative;
      margin: 0 auto;
      width: 1920px;
      height: 350px;
  }
  .img-list li{
      position: absolute;
      width: 1920px;
      height: 350px;
  }
  .img-list li a{
      display: inline-block;
      width: 1920px;
      height: 350px;
  }

  .img-list li a img{
      display: block;
      border: none;
      width: 100%;
      height: 100%;
  }
  .point {
      position: absolute;
      right: 0;
      bottom: 15px;
      left: 0;
      text-align: center;
      z-index: 999;
  }
  .point li{
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 5px;
  }
  .point li a{
      display: block;
      width: 100%;
      height: 100%;
      background-color: tomato;
      border-radius: 50%;
      background-clip: content-box;
      border: 3px solid transparent;
  }

  .point a.active,
  .point a:hover{
      background-color: rgb(0, 160, 253);
      border: 3px solid rgb(0, 160, 253);
  }
</style>

主要涉及各个元素的定位，整体的在1920 的宽度下可以实现官网的效果。

存在的为解决的问题点：页面缩放的时候，或者非1920 的时候不能实现图片的自主缩放和填充，后期考虑使用背景的方式来做。

查看了下官网的样式，官网也是采用的背景的样式做的，这样的可以做到背景的沿X轴方向的填充，如果有好的解决办法，欢迎大家探讨。