图片轮播区域

第一步 创建一个盒子

• 操作： .banner按tab

<div class="banner">

</div>

• 写css

.banner{
            height: 382px;
            width: 100%;
            overflow: hidden;
        }

说明：因为banner里面的图片有3000px宽度，会超出我们的屏幕范围，屏幕会出现横向的滚动条。我不希望出现滚动条，所以我们将banner设置一个溢出隐藏属性，将子元素溢出的部分隐藏掉。

第二步 创建一个小箱子：图片箱子

1. .banner-img 按tab,回车
2. 写一个a
3. 在a里面写一个img，在img的src中写入图片地址
4. 用上一步相同的方法，做出来另外两张图

 <div class="banner-img">
       <a href="">
           <img src="1b386754-f5fe-42a8-9d16-9666ca576db1.jpg" alt=""/>
       </a>
       <a href="">
           <img src="6d405bc3-25af-45b7-9eb6-8ef005577f25.jpg" alt=""/>
       </a>
       <a href="">
           <img src="19addf8c-8893-45f1-b5d4-ccb891aa9c81.jpg" alt=""/>
       </a>
 </div>

现在页面的效果：页面外面有一个白色的间距，没有全屏；图片没有居中。图片宽度是3000px，我们使用js来让图片居中。

计算原理：图片的宽度与文档的宽度的差值，现在从文档中溢出，溢出到文档外右侧。所以我们需要将溢出的这部分的二分之一，向左侧偏移，这样图片就可以居中啦。

    <script src="jquery-2.2.3.min.js"></script>
    <script>
        //获取当前文档的宽度
        var win = $(document.body).width() ;
        //计算偏移值
        var diff = (3000-win)/2 ;
        $(‘.banner-img  img‘).css( ‘margin-left‘ , -diff + ‘px‘ ) ;
    </script>

1. 给body加一个默认的样式，去除掉四周的外边距，同时加一个底部的内边距，方便看效果

    body{
        margin: 0;
        padding-bottom: 50px;
    }

1. 给第一个图片的a添加一个show的class，作为显示的标记
2. 给其他两张图片添加一个隐藏的样式，让他们隐藏掉

<div class="banner-img">
     <a href="" class="show">
         <img src="1b386754-f5fe-42a8-9d16-9666ca576db1.jpg" alt=""/>
     </a>
     <a href="" style="display: none;">
         <img src="6d405bc3-25af-45b7-9eb6-8ef005577f25.jpg" alt=""/>
     </a>
     <a href="" style="display: none;">
         <img src="19addf8c-8893-45f1-b5d4-ccb891aa9c81.jpg" alt=""/>
     </a>
</div>

• 用js写一个计时器，来切换图片

  //计时器
  var timer = setInterval(function(){
             //当前显示的隐藏
            var showing = $(‘.banner-img .show‘);
            showing.removeClass(‘show‘).fadeOut(200);

            //下一个显示
            var needShow = showing.next();
            if(needShow.length == 0 ){
                needShow = $(‘.banner-img a‘).eq(0);
            }          
            needShow.addClass(‘show‘).fadeIn(200);            
        } , 3000 );

写到此处，图片轮播区域完成。

第三步 创建一个小盒子，用于盛放居中的内容

• 注意这个元素是banner的子元素，必须放到banner中，与banner-img是兄弟元素

<div class="container banner-center">

</div>

1. 来给我们的居中元素定义样式。
2. 固定的宽度已经在container中定义过了
3. 固定的高度：与父级banner的高度一致
4. 使用相对于父级banner的绝对定位：先给父级添加一个属性
5. 然后给自己添加绝对定位的属性：定位到父级的左侧50%的位置，顶部0
6. 设置向左侧的偏移量，偏移值为自身宽度的一半

        .banner{
            height: 382px;
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .banner-center{
            height: 100%;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -500px;
            background-color: #000000;
        }

为方便查看效果，我们添加一个黑色背景。到此位置我们的banner-center已经居中啦。

第四步 在banner-center中创建一个小箱子：圆点

• 写html代码，将banner-dot写到banner-center中

        <div class="container banner-center">
            <div class="banner-dot">
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
            </div>
        </div>

1. 写banner-dot的样式，将banner-dot进行绝对定位。
2. 相对于banner-center进行绝对定位，banner-center已经有了position:absolute的属性了

        .banner-dot{
            position: absolute;
            bottom: 20px;
            left: 20px;
        }

1. 写dot的样式
2. 注意，span是内联元素，务必添加内联-块儿元素属性，否则宽高不生效

        .dot{
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #fff;
            display: inline-block;
        }

到此位置，我们的圆点写好啦。

第五步 写一个登录框的小箱子：banner-login

• 写html代码
• 注意，此元素是banner-center的子元素，与banner-dot是兄弟元素

            <div class="banner-login">
                <p>第一行</p>
                <p>第二行</p>
                <p>第三行</p>
                <a href="" class="btn-yellow">立即注册</a>
            </div>

1. 先给banner-login添加样式
2. 一个透明色的背景色
3. 一个内边距20px
4. 相对于父级banner-center定位。
5. 文字颜色黑色的
6. 设置行高，拉开p之间的距离
7. 文字居中

        .banner-login{
            padding: 20px;
            background-color: rgba(255, 255, 255, .8);
            position: absolute;
            right: 0;
            top: 84px;
            text-align: center;
            border-radius:4px;
        }

1. 给注册按钮添加样式
2. 注意a是一个内联元素，必须转成内联-块儿元素

        .btn-yellow{
            width: 200px;
            line-height: 35px;
            border-radius:4px;
            background-color: #ff8813;
            color: #ffffff;
            display: inline-block;
            text-decoration: none;
        }

到此为止，我们的登录框就写好啦。