|
小张2023/2/20
/* 首先是基本全局样式 */
*{
/* 把内外边距取消掉，即设为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%);
}
ps:以上代码来源网上，加上了个人理解。
|