任务耗时4天
通过任务6学习地的知识点
Sprite 雪碧图:
百度解释：是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。 不太理解。
这东西就是把图片当背景 通过：
background属性的一些应用
通过background:url（）背景图片插入
background-size:；调节背景图片大小
background-position:;调节背景图片的位置定位
通过上面的属性可以直接把文字背景图片通过padding进行调节推向前面，不用在重新img在插入图片直接一行代码搞定文字和图片效果如下
日期的图片我并没有通过img来实现的 直接通过background背景进行图片定位背景大小来实现，这里要注意一定要写on-repeat;意思是不让图片进行重复填满容器。
修改文本被挤压的状态
了解到text-overflow属性
规定文本属性溢出包含元素时候发生的事情
ctip修剪文本
ellipsis 用省略号代替被修剪的文本
overflow:属性
属性规定当内容溢出元素框时发生的事情
成果链接：https://923804846sky.github.io/133/taks7/taks7.1.html
任务耗时：4天
比较重点的几个问题：
因为主体部分需要使用hover来达到鼠标触及的效果，页面二是后面要修改自适应的效果，所以当时只是为了要做出与效果图一样就运用了很多属性，在改的时候就遇到了属性之间的冲突，改的我真的是要崩溃。我给每一行的最大的div设置了margin值撑开了之间的边距，所以在使用display：none隐藏效果的时候，原本被hover图片效果撑开的下面边距在隐藏的时候又还原了，就导致触及上下跳动很奇怪
在这里学到了另一个方法，用opacity透明值一样可以做成hover效果，不需要用到none隐藏，直接给需要触及效果的div设置一个opaticy:0，直接让图片透明化，再设置hover效果opacity：1就可以了，这里的顺序不能弄反了。跟使用z-index可以一样理解。这样就不会因为display：none的隐藏出现缩小边距的问题。
给div设置宽高的vh和vw值后，是可以自适应，但是在div里底部的1号就被挤上去了，如图：
给这两个div的css样式顺序设反了，所以按照自己写的顺序来写样式，避免在div嵌套中过多的时候自己把自己弄晕写错。
整个任务下来收获最大的还是对flex的运用，认识了另外两个属性align-items垂直效果和fiex-direction属性，和justify-content属性一起叠加运用。顺便还学了相对定位+transform的居中方法，
任务名称：CSS-task8-9
成果链接： https://923804846sky.github.io/133/taks8.1/taks8.1.html
官方脑图：
任务总结：
这次任务8、9是做响应式的pc端，难度相比前面对我而言算是难度增加了不少，所以在这个任务中耗时过长，因为对于bootstrap库不是很了解，因为开始不会写下拉菜单，所以师兄们建议是引用去找模板复制过来再自己调整样式，这里就有几个难点了。
1、因为下拉菜单是引用的组件有很多库里样式，有一些是不需要的所以你要覆盖掉，所以这里就涉及到权重问题，怎么去找上级给你想要改变元素覆盖样式，开始对于这个不是太懂，怎么覆盖，问题就是需要在调试中找到需要修改的类名，然后找到上级再修改，方法给上一级类名加id或者新设一个类名，让权重高的自己去找，这样就比自己去一级一级的找要快很多，不懂的原因也是写的少了，后面写的多了就懂了，对于bootstrap这里学到一个方法就是重新建一个html文件，把组件单独复制过去单独调试好，这样避免自己设置其他的属性相互影响，然后去找问题原因就比较耗时间。
2、因为是响应式布局，所以就会运用到媒体查询，因为要适应不同移动设备样式就需要再改变它在不同分辨率下的样式，这个问题的解决方法就只能是使用媒体查询。不然在不同的分辨率下没有响应式的样式就会崩掉。所以响应式也可以理解为适应不同分辨率的设备的布局，让排版看上去好看并能适应相应的屏幕大小。
3、bootstrap栅格的运用可以是实现响应式布局，col-xs-sm-md-lg代表的是不同屏幕分辨率。
4、做的是网站页面，所以有很多需要设hover效果，这里的hover选择器伪类需要多了解下。
任务八九其实难点就在于怎么用栅格和媒体查询来布局，这点写明白了后面就轻松很多，遇到的问题基本上都在前面的日报上，这个任务是关键还是要好好做，不要担心耗的时间太长，积累后悔产生质的飞跃。
转至元数据结尾
任务名称：CSS：TASK10
成果链接： https://923804846sky.github.io/133/taks10/taks10.html
任务耗时：2019/04/15-2019/04/20 共5天
技能脑图：官方脑图
个人脑图：
任务总结：
任务10写起来不是很难，header和footer前面已经写过了，所以重点不在这里，而是在main主体部分，越到后面的任务，样式就越来越多样化，就会用到很多新的元素和伪类选择器。
这里的重点就是在表单的制作，表单是form标签设置，通过form来嵌套input元素和label元素。前面的任务就接触过input标签，用input输入标签写过密码字段写出来比较简单，
但是这里我就遇到第一个难点。type属性定义单选框radio，所以单选框是有自己的样式的，问题就是UI图上和这个是完全不一样的样式，
经过师兄的点播算是清楚input和label这两种元素是要一起用的，label的属性for来关联input，input设di属性
注意要关联id和for的值必须是一致的。写法如下：
<input id="input4" type="radio" name="radio-4">
<label for="input4">外径</label>
如果不使用label关联input的话，单选框样式是写不出来的，这里的圆我们需要通过label元素来写，因为input单选框的样式不能变更，只能通过伪类:before选择器重新写一个圆，
我们为什么要用到label标签呢，因为它不会展现效果，只是用来关联input方便我们写出自己的样式 ，所以怎么写样式呢就需要用到伪类选择器，:
before和:after，按照ui图上要在文本前面写一个新的样式，所以这里用到的伪类选择器是:before，在文本前面添加内容。注意一点最好是input写在label前面。
收获：
在完成CSS任务中学会了怎么制作静态页面，现在开始学习JS任务，让静态页面动起来。
评论