效果图
1.布局结构
<body>
<div class="box">
<div class="middle">
<img class="active" src="images/middle1.jpg" alt="">
<img src="images/middle2.jpg" alt="">
<div class="cover"></div>
<i></i>
</div>
<div class="small">
<img class="active" src="images/small1.jpg" alt="">
<img src="images/small2.jpg" alt="">
</div>
<div class="big">
<img class="active" src="images/big1.jpg" alt="">
<img src="images/big2.jpg" alt="">
</div>
</div>
</body>
2.css样式修饰
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
background-color: rgb(219, 219, 138);
}
.box {