<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小张2023/2/20</title>
<style>
/* 首先是基本全局样式 */
*{
/* 把内外边距取消掉，即设为0 */
margin: 0;
padding: 0;
/* 让边框Border和内边距padding计入宽度width中 */
box-sizing: border-box;
}
body{
/* vh是屏幕 可视高度的1%，所以100%就表示高度为整个屏幕，而与100%的区别是：后者更加相对父元素的大小的，body的父元素是html，而浏览器默认的情况下 */
/* 没有设置html的高度，仅设置html的高度为100%，没有设置body的高度为100%，那么100%不会生效，vh就仅和视窗大小有关 */
height: 100vh;
/* 以下三行就是看个人，子元素居中对齐呗 */
display: flex;
justify-content: center;
align-items: center;
/* 背景颜色 */
background-color: rgb(164, 202, 224);
}
.main{
/*
设计思路：基本样式用了弹性布局flex，并且让子元素进行水平和垂直居中
所以底层的盒子main可以直接设置宽高并让超出的部分隐藏，这样不用设margin就可以让自设宽高的盒子居中
relative是子绝父相，子元素的位置根据main来变化
*/
/* flex是可以让子元素有相应的布局，根据flex的属性进行布局 */
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
border-radius: 5px;
}
.item{
position: absolute;
top: 0;
width: 100%;
height: 100%;
transition: all 0.5s;
/* 这个就是扩大背景图片至整个背景区域，如果图片和区域的比例不一致，那么图片必然会不完整 */
background-size: cover;
}
.item1{
background-image: url(./img/1.jpg);
}
.item2{
background-image: url(./img/2.jpg);
left: 100%;
}
.item3{
background-image: url(./img/3.jpg);
left: 200%;
}
input{
position: relative;
/* 优先级考前且先不展示 */
z-index: 100;
display: none;
}
/* 这是label底层盒子的样式， */
.select{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 10px;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.select>label{
width: 10px;
height: 10px;
background-color: rgb(255, 255, 255);
border-radius: 50%;
cursor: pointer;
border: 1.5px solid white;
}
.main input:nth-of-type(1):checked ~ .select label:nth-of-type(1){
background-color: rgb(26, 26, 26);
}
.main input:nth-of-type(2):checked ~ .select label:nth-of-type(2){
background-color: rgb(26, 26, 26);
}
.main input:nth-of-type(3):checked ~ .select label:nth-of-type(3){
background-color: rgb(26, 26, 26);
}
/* 实现切图，就是哪个输入框被选中，就切换相应位置 */
.main input:nth-of-type(1):checked ~ .item{
transform: translateX(0);
}
.main input:nth-of-type(2):checked ~ .item{
transform: translateX(-100%);
}
.main input:nth-of-type(3):checked ~ .item{
transform: translateX(-200%);
}
</style>
</head>
<body>
<!-- 底层盒子 -->
<div class="main">
<!-- 三个单选按钮，先默认选择第一个 -->
<input type="radio" name="choose" id="choose1" checked>
<input type="radio" name="choose" id="choose2">
<input type="radio" name="choose" id="choose3">
<!-- 放三张图片，用背景图片表示 -->
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<!-- 三个label标签 -->
<!-- 不知道这个label标签是干嘛的 -->
<span class="select">
<label for="choose1"></label>
<label for="choose2"></label>
<label for="choose3"></label>
</span>
</div>
</body>
</html>
ps:以上代码来源网上，加上了个人理解。