【网易云-body1】

网易云-body1

一、效果

二、html

html 复制代码
    <div class="middle">
        <div class="middle-top">
            <div class="carousel">
                <!-- 左右箭头 -->
                <a href="" class="arrow-left"><span></span></a>
                <a href="" class="arrow-right"><span></span></a>
                <!-- 小圆点 -->
                <ol class="circle">
                    <li></li>
                </ol>
                <!-- 轮播图片 -->
                <div class="carousel_main">
                    <div class="carousel-box">
                        <ul>
                            <li id="0"><a href="#"><img src="./imgs/01.jpg"></a></li>
                            <!-- <li id="1"><a href="#"><img src="./imgs/02.jpg"></a></li>
                            <li id="2" class="current"><a href="#"><img src="./imgs/03.jpg"></a></li>
                            <li id="3"><a href="#"><img src="./imgs/04.jpg"></a></li>
                            <li id="4"><a href="#"><img src="./imgs/05.jpg"></a></li>
                            <li id="5"><a href="#"><img src="./imgs/06.jpg"></a></li>
                            <li id="6"><a href="#"><img src="./imgs/07.jpg"></a></li>
                            <li id="7"><a href="#"><img src="./imgs/08.jpg"></a></li>
                            <li id="8"><a href="#"><img src="./imgs/09.jpg"></a></li>
                            <li id="9"><a href="#"><img src="./imgs/10.jpg"></a></li> -->
                        </ul>
                    </div>

                    <div class="adv">
                        <a href="#" class="download"></a>
                        <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                    </div>
                </div>
            </div>


        </div>



    </div>

三、css

css 复制代码
.carousel_main {
    width: 980px;
    height: 100%;
    margin: 0 auto;
}

.middle-top .carousel {
    position: relative;
    /*小圆点和箭头*/
    width: 100%;
    height: 285px;
    background-color: gray;
}

.middle-top .carousel .carousel-box {
    width: 730px;
    height: 285px;
    float: left;
}

.middle-top .carousel .carousel-box ul li {
    float: left;
    /* display: none; */
}

.middle-top .carousel .carousel-box ul li img {
    width: 730px;
    height: auto;
}

.middle-top .carousel .carousel-box ul .current {
    display: block;
}

.middle-top .carousel .adv {
    position: relative;
    float: right;
    width: 250px;
    height: 100%;
    background: url("../logo/download.png") no-repeat 0 0;
}

.middle-top .carousel .adv .download {
    position: absolute;
    top: 186px;
    left: 19px;
    width: 216px;
    height: 56px;
}

.middle-top .carousel .adv .download:hover {
    background: url("../logo/download.png") no-repeat 0 -290px;
}

.middle-top .carousel .adv p {
    position: absolute;
    bottom: 18px;
    left: 2px;
    width: 254px;
    height: 16px;
    font-size: 12px;
    color: #8d8d8d;
    text-align: center;
}

/* 左右箭头 */
.middle-top .carousel .arrow-left,
.middle-top .carousel .arrow-right {
    position: absolute;
    /*绝对定位后,浏览器将其从inline转换未block,可设置宽高*/
    top: 40%;
    width: 37px;
    height: 63px;
}

.middle-top .carousel .arrow-left span,
.middle-top .carousel .arrow-right span {
    display: block;
    position: absolute;
    top: 17px;
    width: 28px;
    height: 28px;
}

.middle-top .carousel .arrow-left:hover,
.middle-top .carousel .arrow-right:hover {
    background-color: black;
    opacity: 0.2;
}

.middle-top .carousel .arrow-left {
    left: 9%;
}

.middle-top .carousel .arrow-left span {
    left: 12px;
    border-top: 2px solid #e1f2fe;
    border-left: 2px solid #e1f2fe;
    transform: rotate(-45deg);
}

.middle-top .carousel .arrow-right {
    right: 9%;
}

.middle-top .carousel .arrow-right span {
    right: 12px;
    border-top: 2px solid #e1f2fe;
    border-right: 2px solid #e1f2fe;
    transform: rotate(45deg);
}

/* 小圆点 */
.middle-top .carousel ol {
    position: absolute;
    top: 90%;
    left: 35%;
}

.middle-top .carousel ol li {
    float: left;
    width: 8px;
    height: 8px;
    background-color: #ccc5c9;
    margin-right: 10px;
    border-radius: 10px;
}

.middle-top .carousel ol li:hover {
    cursor: pointer;
    background-color: red;
}