banner

    <!-- banner -->
    <div class="banner">
        <div class="banner-in">
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li class="no-margin"></li>
            </ul>
            <span class="arr-left"><a href="#"></a></span>
            <span class="arr-right"><a href="#"></a></span>
            <div class="register">
                <p class="total">平台累计成交金额</p>
                <p class="total-money">￥52,565,554.00</p>
                <p class="profit">平台综合年化收益率</p>
                <p class="percent">16.16%</p>
                <a href="#" class="free-register">立即免费注册</a>
                <p class="login">已经是易贷网会员？<a href="#" class=>立即登录</a></p>
            </div>
        </div>
    </div>
    <!-- banner end -->

CSS样式

父相子绝，父盒子设置相对定位。子盒子依据父盒子来设置绝对定位

• 版心设置相对定位

.banner {
    width: 100%;
    height: 400px;
    background:url(./images/banner3.png) no-repeat center top;
}

版心：
.banner-in {
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    /* 父相子绝 */
}

• 左右箭头

.banner-in ul {
    height: 14px;
    width: 122px;
    position: absolute;
    bottom: 16px;
    left: 50%;
    margin-left: -61px;
}
.banner-in ul li {
    height: 14px;
    width: 14px;
    float: left;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin-right: 21px;
    cursor: pointer;
}
.banner-in ul li.current {
    background: rgba(255, 255, 255, 1);
}
.banner-in ul li.no-margin {
    margin-right: 0;
}