距离过年还有25天
今天完成的事情：
1.任务十四十五的拆分组件和导航栏的制作和轮播图的制作；
2.任务十四十五已提交，正在等待通过审核。
明天计划的事情：
1.修改任务十四十五直到通过审核；
2.进入js，先了解一部分js基础知识和js任务一的部分知识点。
遇到的问题：
1.导航栏和轮播图的代码写起来很卡；
2.轮播图的图片大小和格式使用时出现问题。
解决方案：
1.自己理解并做出雏形后照着bootstrap4的代码修修改改，也算OK；
2.轮播图的图片首先需要统一格式和长宽大小，格式为png，大小为960px:600px，然后用ps切图统一大小。
收获：
1.认识到bootstrap 给table默认设了
table {
border-spacing: 0;
border-collapse: collapse;
}
另外
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
2.导航栏的点击效果：
html：
<!--Button -->
<div class="btn">
<label for="boom">
<div class="icon"></div>
</label>
</div>
<input type="checkbox" id="boom" />
css：
#boom {
display: none;
}
#boom:checked~.collapse {
display: block;
}
label {
padding: 6px;
border-radius: 2px;
cursor: pointer;
&:hover{
background-color: aqua;
}
3.轮播图设计：
html：
<div class="rotation">
<!-- 轮播图片 -->
<div class="img">
<img src="../img/brothers.png" class="first">
<img src="../img/nicememory.png" class="first">
<img src="../img/partners.png" class="first">
<img src="../img/sandao.png" class="first">
<img src="../img/fourdang.png" class="first">
<img src="../img/seven.png" class="first">
</div>
css：
.rotation {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
.img {
display: flex;
flex-wrap: nowrap;
position: absolute;
left: 0;
width: 600vw;
animation: rotation 15s linear infinite;
.first {
height: 600px;
width: 100vw;
}
}
}
@keyframes rotation {
0% {
left: 0;
}
9% {
left: 0;
}
18% {
left: -100vw;
}
27% {
left: -100vw;
}
36% {
left: -200vw;
}
45% {
left: -200vw;
}
54% {
left: -300vw;
}
63% {
left: -300vw;
}
72% {
left: -400vw;
}
81% {
left: -400vw;
}
90% {
left: -500vw;
}
100% {
left: -500vw;
}
}
返回列表
评论