今天完成的事情：

做完了任务7，膨胀一下好吧。

今天一上午都在搞那个ps耽误我一上午的时间，今天看了那个透明属性设置。

opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度

opacity: 0.2;

给后面加上数字进行了o就是直接透明，1就是不透明，以此类推。

rgba

设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。

 background-color:rgba(0,0,0,0.2);

前面调颜色后面调整透明度，这个可以背景透明，字体不透明。

今天做任务还用到了超链接，因为要跳转到其他页面，

<a href="https://maikihyh.github.io/task/html/task7.html">

把自己的任务上传到github上，就可以实现跳转，但是需要消除这个超链接的样式，然后自己改变一下颜色

.noon a{
    text-decoration: none;
    color: black;

注意要单独写出来，要不然容易冲突，导致实现不了改变样式。

position: fixed;
top: 0;
width: 100%;
z-index: 999;

z-index：表示各个块之间的层级关系。需要配合定位一块使用，没有定位时，z-index是没有意义的。

position:relative|absolute|fixed;然后加上z-index
z-index数值越大，层级就越高，即在上面显示。
可以简单理解为用定位把一些元素摞起来，z-index数值大的在上面，数值小的在下面。依次排列。

display: flex;

用到最多的就是这个，因为他是弹性布局，自适应，而且用着方便，所以布局方面都用它。

display: flex;
align-items: center;
font-size: 30px;
justify-content: space-between;

今天用透明元素加hover效果

.banner{
    background:url(../img/task7.png) no-repeat;
height: 50px;
    width: 140px;
  margin: 6px;
    opacity:0;

做出了鼠标放到上面的盒子，下面的图片显示出来，还用到了选择器

选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式ID 

选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，你将一个元素的id取值为”navi”，那么在同一页面你就不能再将其他元素id取名为”navi”了。尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可.

子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。

css书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

明天计划的事情：

任务7交接，然后准备任务8，先了解任务8的知识，然后计划，最后开始做。

遇到的问题：

选择器的问题，一开始选择器这个问题并不是多了解，所以百度了一下，明白了有什么区别，用这个做好了hover效果，还有就是盒子的问题，一开始第三个页面做好了之后，我加了几个盒子，就出现bug了，想了想也没什么问题，最后才发现我没有给父元素高，导致他积压就变形了。还有就是四则运算

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()使用通用的数学运算规则，但是也提供更智能的功能：

1. 使用“+”、“-”、“*” 和 “/”四则运算；
2. 可以使用百分比、px、em、rem等单位；
3. 可以混合使用各种单位进行计算；
4. 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
5. 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

收获：

学会了用选择器，达到hover效果，半透明，页面自适应，更熟悉flex。

  任务7总结

任务7用到了flex，用到了半透明，用到了绝对定位，选择器，四则运算，超链接，总之很多任务7让我感觉到，一个页面需要的东西也是特别多的，不仅要写出他的头部，底部，身体内容，还要考虑他的自适应问题，bug问题，做出一个简单的页面就很难，而且还要考虑做几个页面，他们的衔接问题，页面需要什么效果，做出来是否和要求的一样，颜色是否规范任务7让我见识到了css的复杂。

脑图