网易云-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;
}