[武汉|首席弟子]JS-孟晨|2018年08月04日的日报-技能树.IT修真院

发表于： 2018-08-04 21:11:03

1 1112

今天完成的事情：开始写栅格

开始是这样的，仿bootstrap写的一些，因为这些都是浮动的所以设置了一个清除浮动的类名row，然后顺便学到了

[class*=' '] 可以设置只要带有这里面写的类名就都设置属性，

实际使用后发现，只触发这个，在992px以上时也不触发我设置的值，然后被师兄告知才知道min-width 的需要从小到大的排序

然后把min-width：992px的放在这个的下面就好了

然后发现在min-width768px以下时并不会自动变更为100%，就再次设置了一个媒体查询

任务总结：

任务名称：CSS=TASK14，15

成果链接：https://mc1994shen.github.io/sss/CSS/task14/html/task14-1.html

任务耗时：本次任务从18.07.29-18.07.30 共耗时2天，

技能脑图：

官方脑图

个人脑图

任务总结

本次任务主要出现的问题在轮播图，响应式导航栏和设置html font-size 625%时出现的情况

首先说一下响应式导航的制作，

这个是我的html的结构。。当然这个大体结构是复制的。。。，我一个一个往下说

首先设置了一下，背景色和nav里a，li和input标签的基本属性，a标签是去掉下划线和设置字体颜色

input主要是设置点击效果并隐藏原始的样式，

然后再从上到下说说设置的类名起了什么作用，这里nav是设置大盒子相对定位，方便子级元素绝对定位，clearfix这个是我事先设置好用于清除浮动

container用与约束使整个页面俩边对齐的类名，然后下面就是为了图片设置的使它能更方便的使用代码控制图片的大小

这个部分主要就是缩小显示的按钮的样式

手写的按钮样式，然后控制整个按钮需要一直在右边，所以添加上了浮动，然后overflow：hidde用来隐藏

接下来就到了重点了，平时的时候是这样排列的

使用ul来进行设置，这里是基本的一些属性，这里的ul的设置是完全多余的可以删掉，li里设置都list-style：none这个是第一次使用

它是用来去掉li 的默认样式，就是字前面的小圆点

然后分别使用2段媒体查询，一个是768px以上，一个是768px以下的表现

这个是768px以上时的样式，可以看到。nav-btn这个是按钮的样式，在768px以上时是隐藏的，ui右浮动至长条右侧

li左浮动是排序，

然后是768px以下时

因为只是设置768以上隐藏所以按钮在768以下时无需再去调整，直接就显示出来了，然后设置高度为0进行隐藏

transition这个属性时为了点击时更好的体验，让菜单匀速的下降

然后

制作轮播图，还是跟制作响应式导航栏一样进行学习

这是我轮播图的结构

其中这个部分是图片区

然后这里是轮播焦点（就是下面播到哪张图的5个小点）

然后，这个首先是给大盒子设置相对定位和宽度占满屏幕，

然后我这次是淡进淡的轮播所以设置的是透明，通过动画效果变出来

然后animation-timing-function：linear ，设置动画从头到尾都是相同速度变化

animation-name：fade，这里是设置动画名称为fade，fade是为了设置@keyframes 是用，fade可以设置其他名称

animation-iteration-count：infinite；这里是设置动画效果无限循环

background-size：100%；因为我轮播图的图片是是用的背景图片所以这个属性是为了自适应设置的

顺便这里因为我是设置的背景图片，所以设置了padding来撑起内容

然后继续往下，这里设置了轮播焦点（就是下面播到哪张图的5个小点）的样式

因为需要保证显示在最上层所以设置了z-index

然后因为需要跟着图片一起变化所以设置了动画效果

然后一起设置动画效果，共20s变化，然后按百分比来慢慢从透明变到显示，再变透明
.header-slider-item,.header-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;
}

}

然后设置图片，，印象深的可以看到我设置了5张图片，这是因为可以更方便圆滑的变化，所以这样设置

最后说下html 设置font-size 625%时遇到的问题

这样设置是因为62.5%用rem单位时10px会显示12px还是啥。。

这样子后又突然出现了问题

在设置font-size：625%后，莫名奇妙的这个盒子变大了

检查了好一会还是不知道问题出在哪。。不过感觉发现着问题只出现在图片上

难道img自带多少宽高？但是我是自行设置了宽高的，父级盒子我没设置宽高，莫名被撑大好难受

然后给父级盒子设置宽高也没用。

然后无意间，搜索了下font-size影响div大小发现了答案

原来设置html的font-size会影响line-height的initial值，

标准里面是initial值是normal，而normal是怎样计算的呢？"告诉用户代理根据该元素的字体把应用值设置为一个“合理的”值。该值与<number>的含义相同。我们推荐介于1.0到1.2的“常规”应用值。计算值为'normal'。这个值是参考元素自身的字体大小。"line-height标准所以不指定div.head的高度，直接写入文本：

这样整个div的高度计算成了114px，因为div.head继承了body的line-height,可以看到代理计算值也是在1.0-1.2之间。
继续在div里面插入两个内联元素标签，指定内联元素的line-height和字体大小一样，可以看到整个div的高度还是114px，这是因为div的line-height还是继承body的line-height：

以上是我复制下拉的别人的回答，这个回答就告诉了我们设置了html的font-size后的影响，我看了后大受启发，直接给受影响的父级盒子设置成跟我给这行设置的line-height一样的值，这个问题就完美解决了