发表于： 2019-12-30 22:01:34
1 1041
今天完成的事
1，让轮播图可任意使用前后页面轮播切换块时同时绑定图下小圆点状态改变；
关键测试代码：
html
<div>
<input type="radio" name="carousel" id="a1" checked>
<input type="radio" name="carousel" id="a2">
<input type="radio" name="carousel" id="a3">
<div class="carousel-img">
<img src="image14/15.png">
<img src="image14/16.png">
<img src="image14/18.png">
</div>
<div class="choose-dot">
<label for="a1"><span class="dot b1"></span></label>
<label for="a2"><span class="dot b2"></span></label>
<label for="a3"><span class="dot b3"></span></label>
</div>
<div class="arrow">
<label for="a1"></label>
<label for="a2"></label>
<label for="a3"></label>
</div>
</div>
css （其中也有自动轮播动画代码：carousel）
body {
max-width: 100vw;
overflow: hidden;
}
input {
display: none;
}
.carousel-img {
position: relative;
width: 300vw;
overflow: hidden;
// animation: carousel 8s infinite;
border: 1px solid #333;
}
.carousel-img img {
float: left;
width: 100vw;
}
.choose-dot {
position: relative;
top: 50px;
background-color: tomato;
text-align: center;
}
.dot {
display: inline-block;
margin: 20px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: teal;
}
#a1:checked ~ .carousel-img {
left: 0;
transition: 0.6s ease-out;
}
#a2:checked ~ .carousel-img {
left: -100vw;
transition: 0.6s ease-out;
}
#a3:checked ~ .carousel-img {
left: -200vw;
transition: 0.6s ease-out;
}
#a1:checked ~ .choose-dot .b1,
#a2:checked ~ .choose-dot .b2,
#a3:checked ~ .choose-dot .b3 {
background-color: #fff;
}
@keyframes carousel {
0% {
left: 0;
}
25% {
left: -100vw;
}
50% {
left: -200vw;
}
75% {
left: -100vw;
}
100% {
left: 0;
}
}
.arrow label {
display: none;/*不显示*/
width: 2rem;
height: 2rem;
border-top: 1rem solid #000;
border-right: 1rem solid #000;
transform: rotate(-135deg);
}
#a1:checked ~ .arrow label:nth-of-type(3),
#a2:checked ~ .arrow label:nth-of-type(1),
#a3:checked ~ .arrow label:nth-of-type(2) {
display: inline-block;
position: absolute;
top: 50%;
left: 5rem;
}
2，从boostrap拆分出，想要的响应式容器container；
明天的计划
1，解决从从boostrap拆分出来的导航栏使用效果不佳问题；
2，完成任务八所有页面的重构；
遇到的问题
1，从boostrap拆分出来的导航栏使用效果不佳问题，已找到解决办法；
收获
一，对boostrap初步拆分设计；
1，明确要求: 从boostrap拆出响应式容器；
- Ⅰ，找到类container 容器所定义的样式，以及在各个响应断点时的margin，容器最大宽度值；
- Ⅱ，找到类row 行的所定义的样式；
- 修正：Ⅰ，Ⅱ点注意css排列顺序；
- Ⅲ，找到类col, col-xl, col-x，col-sm-x, col-md-x, col-lg-x, col-xl-x, 其中不同x 值缩放时所占的百分比；
- 修正：为了只拆分出对自己有用的部分代码，需要对自己所使用的类涉及的样式全部列出，注意不要漏掉；
- Ⅳ，从最小分辨率320px开始往上调试寻找；
- 二，解决导航栏问题：
- Ⅰ，不用js控制导航栏的显示与否，可以通过于制作轮播图使用的input，label特性解决；
- （1）媒体查询，在按钮不显示，而导航链接显示时同方向浮动显示，某一分辨率下消除浮动，导航块块级显示，并隐藏
- （2）绑定input单击状态消除隐藏；
返回列表
评论