css点击箭头进入图片 |css调整字体粗细

HTML代码：
<div class="container">
<img src="first.jpg" class="active">
<img src="second.jpg">
<img src="third.jpg">
<div class="prev"></div>
<div class="next"></div>
</div>
CSS代码：
.container{
position: relative;
}
img{
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.active{
opacity: 1;
}
.prev, .next{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background: url('arrow.png') no-repeat center center;
cursor: pointer;
}
.prev{
left: 10px;
}
.next{
right: 10px;
}

解释：

首先，HTML代码中包含一个div元素，用于包裹图片和箭头。每个图片都有一个class=”active”，通过CSS中设置opacity为1来表示激活状态。前后箭头的div元素分别设置class为prev和next。

CSS代码中，先将.container设置为position为relative，目的是为了后续absolute定位的子元素可以相对于.container进行定位。

img元素绝对定位到父元素.container的左上角，并设置opacity为0，表示不可见。active类的img元素设置opacity为1，表示可见。

前/后箭头的div元素同样绝对定位到父元素.container的左右两侧中央，水平居中，垂直方向使用transform：translateY(-50%)实现。给前一张图片的箭头设置class为prev，后一张图片的箭头设置class为next。

最后，将两个箭头的宽高设定为30px，并通过background将箭头图案设置为背景。