发表于: 2020-06-26 22:05:24
1 1015
今天完成的事情:
写两种css轮播图方式
完成任务14页面1
1.轮播图使用的是自动轮播图,html:
<section class="slider-contaner">
<div class="banner-arrow">
<div class="banner-left"></div>
<div class="banner-right"></div>
</div>
<ul class="slider">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
<li class="slider-item slider-item3"></li>
</ul>
<div class="focus-container">
<ul class="floatfix">
<li>
<div class="focus-item focus-item1"></div>
</li>
<li>
<div class="focus-item focus-item2"></div>
</li>
<li>
<div class="focus-item focus-item3"></div>
</li>
</ul>
</div>
</section>
css:
ul,li{list-style:none;padding:0}.floatfix{*zoom:1}.floatfix:after{content:"";display:table;clear:both}.slider-contaner{width:100%;position:relative}.slider-item+.slider-item{opacity:0}.slider-item{width:100%;position:absolute;animation-timing-function:linear;animation-name:fade;animation-iteration-count:infinite;background-size:100%;background-repeat:no-repeat}.focus-container{position:absolute;z-index:7;margin:0 auto;left:0;right:0}.focus-container li{width:1rem;height:1rem;border-radius:50%;float:left;margin:0 .05rem;background:#fff}.focus-item{width:100%;height:100%;border-radius:inherit;animation-timing-function:linear;animation-name:fade;animation-iteration-count:infinite}.focus-item2,.focus-item3,.focus-item4,.focus-item5{opacity:0}.focus-container{bottom:2%;display:flex;justify-content:center}.focus-item{background:#51B1D9}.slider-item,.focus-item{animation-duration:20s}.slider-item1,.focus-item1{animation-delay:-1s}.slider-item2,.focus-item2{animation-delay:3s}.slider-item3,.focus-item3{animation-delay:7s}.slider-item4,.focus-item4{animation-delay:11s}.slider-item5,.focus-item5{animation-delay:15s}@keyframes fade{0%{opacity:0;z-index:2}5%{opacity:1;z-index:1}20%{opacity:1;z-index:1}25%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}.slider-item1{background-image:url("./images/新建文件夹/风景11.jpg")}.slider-item2{background-image:url("./images/新建文件夹/风景2.jpg")}.slider-item3{background-image:url("./images/新建文件夹/飞机11.jpg")}.slider-item4{background-image:url("./images/22.jpg")}.slider-item5{background-image:url("./images/新建文件夹/技能树首页_09.jpg")}.slider,.slider-item{padding:0;padding-bottom:30%}.banner-arrow{width:100%;display:flex;justify-content:space-between;position:absolute;top:40%}.banner-left{width:.2rem;height:.35rem;background-image:url(../image/beijing.png);background-repeat:no-repeat;background-size:cover;z-index:999}.banner-right{width:.2rem;height:.35rem;background-image:url(../image/beijing.png);background-repeat:no-repeat;background-size:cover;z-index:999}
2.重写任务8部分代码
遇到的问题:
关于组件化是如何提前,每个大的盒子如,header.main.footer等是分别将html.css代码提取出来分组的吗
看了任务15,不使用其他框架是否是不使用bootstrap,而是纯是css代码完成
明天的计划:
完成任务14
评论