<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task2</title>
<style>
body,ul,li,p{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
.box{
width: 380px;
height: 252px;
background-color: gray;
position: relative;
margin: 0 auto;
}
.box > ul >li{
position: absolute;
left: 0;
top:0;
}
.box > ul > .active{
z-index: 1;
}
.leftbtn, .rightbtn{
width: 25px;
height: 43px;
z-index: 1;
}
.leftbtn{
background: url("./案例图/img/prevbg.png") no-repeat;
position: absolute;
left: 0;
top:103px;
}
.rightbtn{
background: url("./案例图/img/nextbg.png") no-repeat;
position: absolute;
right: 0;
top:103px;
}
.desc {
background: rgba(0,0,0,0.5) url(./案例图/img/bg_03.png)
no-repeat 7px center;
color: #fff;
font: 16px/40px "微软雅黑";
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
text-indent: 53px;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<!--LISTS SHOW PICTURES -->
<ul>
<li class="active"><a href="#">
<img src="./案例图/img/pic1.jpg" alt="">
</a></li>
<li><a href="#">
<img src="./案例图/img/pic2.jpg" alt="">
</a></li>
<li><a href="#">
<img src="./案例图/img/pic3.jpg" alt="">
</a></li>
</ul>
<!-- SHIFT FROM LEFT TO RIGHT -->
<div class="leftbtn"></div>
<div class="rightbtn"></div>
<!-- description -->
<p class = "desc">电视剧女王美女明星李沁</p>
</div>
</body>
</html>