CSS-task14.15-任务总结

成果链接：https://miboweixin.github.io/weixin/rw12/task12.html

任务耗时：11.20-11.30 耗时7天请假3天无延期

官方脑图：

个人脑图：

任务总结：

万事开头难，在整体的布局上还是准备使用的栅格系统，由于14.15的要求不能使用插件所以得自己手写一下啊，开始栅格

我们定义一个2列的布局，那么col-sm-5的意思是占用50%，但是在大、中屏上占占比为50%，在小屏上占比为100%，根据屏幕大小自适应，不需要我们去指定屏幕了，就方便很多。
首先我们需要一个包裹容器：

.container {
width: 90%;
margin-left: auto;
margin-right: auto;
}

然后定义行，因为里面的列的布局我们使用float来实现，所以需要在父元素中并清除浮动

.row::after,
.row::after {
display: block;
content: " ";
height:0;
clear: both;
}

定义列：

[class*='col-'] {
float: left;
width: 50%;
min-height: .01rem;
padding-right: .15rem;
padding-left: .15rem;
}

[class*=”col-“]
选择所有类名中含有”col-“的元素
与此类似的还有：
[class^=”col-“]
选择所有类名中以”col-“开头的元素
[class$=”-col”]
选择所有类名中以”-col”结尾的元素

最后就是通过@media媒体查询来定义什么状态下的行占比
@media screen and (min-width:992px) {
.col-sm-5{
width: 50%;
}
}

在大于于992或等于992的情况下两个元素各占50%

在小于或等于762px的时候各占一行的100%

ps.个人在做栅格系统、汉堡菜单、轮播图的时候直接建立一个单独的css文件方便后面的运用中直接链接就可以使用了避免与其他页

面的媒体查询混在一起

导航栏：在首页制作的有两个难点一个是汉堡菜单，一个是轮播图

1.汉堡菜单，在刚刚开始制作的时候没有正确的结合响应式来使用，在头部使用了两套代码增加了代码量，这里可以在菜单的类名

设置两个在大于768的情况情况下使用a类名的属性，在小于768的情况下使用b类名

制作轮播图时要使用到

input[type=checkbox]{
display: none;
}

input[type=checked]标签用于标识checked 和unchecked 属性，元素是隐藏的，需要用checkbox元素的伪类选择器:checked就可以检测到元素的checked状态，通过label标签来触发checkbox

label标签用于触发下拉菜单：

<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
<input type="checkbox" id="checkbox_toggle">
<label class="pull" for="checkbox_toggle">

能使用显示关联的表单元素有：

input type="text" 文本框，点击标签时关联的文本框获得焦点。
input type="checkbox" 复选框，点击标签时选中或取消选中复选框。ps：做汉堡菜单需要用到此效果
input type="radio" 单选框，点击标签时选中单选框。
input type="file" 文件上传，点击标签时打开文件选择对话框。
input type="password" 密码框，点击标签时密码框获得焦点。
textarea 文本域，点击标签时文本域获得焦点。
select 下拉框，点击标签时，下拉框获得焦点，不过并不展开下拉框选项。

同时需要把菜单的元素隐藏：
<ul class="sky add">
<li class="open"><a href="#">首页</a></li>
<li class="open"><a href="#">职业</a></li>
<li class="open"><a href="#">推荐</a></li>
<li class="open"><a href="#">关于</a></li>

</ul>

sky{
display: none;隐藏元素
list-style:none;隐藏li标签自带的圆点
font-size: .15rem;
}

通过:checked选择器与兄弟选择器来选择对应菜单的状态，当checkbox为选中状态时，下拉菜单就显示，否则隐藏

input[type=checkbox]:checked ~ .sky {
display: block
}

2.轮播图与轮播圆点的制作

01.轮播图：

布局

<section class="slider-contaner">
    <ul class="slider">
        <li class="slider-item slider-item1"></li>
        <li class="slider-item slider-item2"></li>
        <li class="slider-item slider-item3"></li>
        <li class="slider-item slider-item4"></li>
        <li class="slider-item slider-item5"></li>
    </ul>
</section>

样式的话首先必定slider的大盒子必定是相对定位，另外我们采用在li标签中添加background-image，因为这样才

有可能用纯的css实现响应式，另外背景图为了在响应式中看清全貌，必然使用background-size:100%，另外就是

高度问题了，显然slider-container必需是和li的高度一致，因为响应式中必然这个高度不能固定死，所以使用height属性

不行，padding属性可以解决这个问题，一是background-image可以显示在padding中，二是padding中以%为单位是以

父元素宽度为基准的。

*{
      margin:0;
      padding:0;
}
ul,li{
      list-style: none;
}
.floatfix {
      *zoom: 1;
}
.floatfix:after {
      content: "";
      display: table;
      clear: both;
}
.slider-contaner{
      width:100%;
      position:relative;
}
.slider,.slider-item{
      padding-bottom:40%;
}
.slider-item{
      width:100%;
      position:absolute;
      background-size:100%;
}
.slider-item1{
      background-image:url(imgs/1.jpg);
}
.slider-item2{
      background-image:url(imgs/2.jpg);
}
.slider-item3{
      background-image:url(imgs/3.jpg);
}
.slider-item4{
      background-image:url(imgs/4.jpg);
}
.slider-item5{
      background-image:url(imgs/5.jpg);
}

02.设计动画效果：

淡入淡出效果肯定是使用opacity，首先整体来看所有图片的淡入淡出都是同一个动画，只是时间不一样而已，这肯定

是利用animation-delay来控制，动画无限轮换肯定使用animation-iteration-count: infinite，我们这次5张图片，整个动

画分为图片停留和淡入淡出两个效果，用下图表示，箭头表示淡入淡出过程。

因为css3中没有一个属性是规定两次动画播放的时间间隔，所以我们必须把其他图片淡入淡出时该图片的效果写进动画里，

显然这时候是opacity:0；我们为了写动画的方便，动画使用线性函数，也就是animation-timing-function:linear;整个过程使用20s，

一次停留使用3秒，一次淡入淡出使用1s，折合成百分比也就是15%和5%；

@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;
}
}

接下来就是为每张图片添加animation-delay（定义动画何时开始）了，因为第一张图片必须显示在最前，所以其他通过相邻兄弟选择器使用opacity:0，

第一张图片开始不需要淡入淡出，直接跳至停留也就是5%，所以animation-delay为-1s，第二章图片和第一张相隔20%，也就是

4s，animation-delay为3s，以此类推

.slider-item + .slider-item{
      opacity:0;
}
.slider-item1{
      animation-delay: -1s;
}
.slider-item2{
      animation-delay: 3s;
}
.slider-item3{
      animation-delay: 7s;
}
.slider-item4{
      animation-delay: 11s;
}
.slider-item5{
      animation-delay: 15s;
}

这个时候我们的轮播图可以动了

04.添加轮播焦点

添加轮播焦点当然不是为了点击，而是告诉访问者这里有几张图片和目前图片的位置，首先非常明确的这个仍然可以使用上面的动画，

另外布局肯定使用position：absolute，另外很明显焦点我们必须写两次，一次是当前图片的样式，一次是非当前图片的样式

<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>
<li><div class="focus-item focus-item4"></div></li>
<li><div class="focus-item focus-item5"></div></li>
</ul>
</div>

.focus-container{
      position:absolute;
      bottom:2%;
      z-index:7;
      margin:0 auto;
      left:0;
      right:0;
}
.focus-container ul{
      margin-left:46%;
}
.focus-container li{
      width:10px;
      height:10px;
      border-radius:50%;
      float:left;
      margin-right:10px;
      background:#fff;
}
.focus-item{
      width:100%;
      height:100%;
      background:#51B1D9;
      border-radius:inherit;
      animation-duration: 20s;
      animation-timing-function: linear;
      animation-name:fade;
      animation-iteration-count: infinite;
}
.focus-item1{
      animation-delay: -1s;
}
.focus-item2{
      animation-delay: 3s;
}
.focus-item3{
      animation-delay: 7s;
}
.focus-item4{
      animation-delay: 11s;
}
.focus-item5{
      animation-delay: 15s;
}