2020-09-27 项目实践（二）

太平洋保险官网项目实践（二）

---

实现目标

今日实现目标：轮播图以及轮播图上注册登录框。
具体效果如下图所示：

---

以下是本篇文章正文内容，下面案例可供参考

一、大体布局

1.html

轮播图部分所在div主要分为两个部分：轮播图以及轮播图上登录注册框。
代码如下（示例）：

<div class="lunbotu">
		<!--注册登录框-->
        <div class="download"></div>
        <!--轮播图（方式在下方详细介绍）-->
        <div class="swiper-container"></div>
</div>

2.css

代码如下（示例）：

/*总体布局*/
.lunbotu{
    width: 100%;
    height: 398px;
    position: relative;
}
/*注册登录框整体布局*/
.lunbotu .download{
    width: 208px;
    height: 206px;
    position: absolute;/*定位布局*/
    right: 200px;
    top: 56px;
    border-radius: 5px;
    box-shadow: 0px 4px 17px 0 rgba(159, 159, 159, .53);/*阴影*/
    background-image: url('../image/denglubeijing.png');/*背景图*/
    background-size: cover;
    z-index: 10;
}

二、登录注册框细节布局

1.html

注册登录框主要分为头像、文字以及两个按钮。
代码如下（示例）：

<div class="download">
            <div class="touxiang"></div>
            <h3>Hi,您好</h3>
            <a href="#" class="denglu">登录</a>
            <a href="#" class="zhuce">注册</a>
        </div>

2.css

代码如下（示例）：

/*上方头像*/
.lunbotu .download .touxiang{
    background-image: url('../image/morentouxiang.png');
    background-size: cover;
    width: 59px;
    height: 59px;
    position: absolute;/*定位*/
    top: -28px;
    left: 74px;
    border-radius: 59px;
}
/*Hi，您好文字*/
.lunbotu .download>h3{
    text-align: center;
    font-size: 14px;
    color: #262626;
    letter-spacing: 0;
    font-weight: 100;
    margin-top: 70px;
}
/*注册登录按钮相同布局*/
.lunbotu .download .denglu,.lunbotu .download .zhuce{
    display: block;/*将a标签变为块级元素，才可以设置宽高*/
    text-decoration: none;/*无下划线*/
    width: 126px;
    height: 32.5px;
    margin: 0 auto;/*水平居中*/
    margin-top: 15px;
    line-height: 32.5px;/*行高，使文字垂直居中*/
    font-size: 14px;
    border-radius: 17px;
    text-align: center;  
}
/*登录注册按钮不同样式*/
.lunbotu .download .denglu{
    color: white;
    background-color: #005bac;
    box-shadow: 0 2px 5px 0 #84c0f5;
}
.lunbotu .download .zhuce{
    color: #005bac;
    border: 1px solid #005bac;
}

三、轮播图细节

本项目轮播图采用swiper官网引入轮播图形式swiper中文网，具体步骤如下所示：

1. 进入官网，找到swiper基础演示，查找到自己喜欢的轮播图样式，本项目使用的是280号
2. 点击页面左上角下载地址，下载所需文件
3. 找到自己下载好的文件，解压，将下载好的swiper-bundle.min.css，swiper-bundle.min.js文件（文件所在位置：swiper-6.1.2\package文件中）放在项目的css文件夹以及js文件夹中，然后进行链接，代码如下

    <link rel="stylesheet" href="../css/swiper-bundle.min.css"><!--head中-->
    <script src="../js/swiper-bundle.min.js"></script><!--轮播图所在div后-->

4. 找到demos选项，对自己选中的样式右键——打开方式——文本文档，复制所需html代码以及js代码，插入轮播图所需图片
   

<div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="../image/53053_1920x398.png" width="100%" height="389px"></div>
              <div class="swiper-slide"><img src="../image/53039_1920x398.png" width="100%" height="389px"></div>
              <div class="swiper-slide"><img src="../image/53037_1920x398.jpg" width="100%" height="389px"></div>
              <div class="swiper-slide"><img src="../image/53031_1920x398.png" width="100%" height="389px"></div>
              <div class="swiper-slide"><img src="../image/53007_1920x398.jpg" width="100%" height="389px"></div>
            </div>
            <!-- 小圆点 -->
            <div class="swiper-pagination"></div>
            <!-- 左右箭头 -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <script src="../js/swiper-bundle.min.js"></script>
        <script>
            var swiper = new Swiper('.swiper-container', {
              spaceBetween: 30,
              centeredSlides: true,
              loop:true,
              autoplay: {
                delay: 2500,
                disableOnInteraction: false,
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
            });
          </script>

5. 轮播图完成，查看效果，根据本人需求进行图片修改

---

至此轮播图模块效果实现。 明日预告：轮播图后第一模块！