今天完成的事情：

1.修改任务7并通过了审核；

2.搞定了自己的wiki系统，完善了各种资料；

3.学习了任务8知识点：bootstrap4和媒体查询；

4.做了任务7的任务总结。

明天计划的事情：

1.开始用bootstrap做任务8，争取多做一些；

遇到的问题：

 1.任务8是做pc端网页，和以前的移动端不一样，有点不适应，需要用bootstrap去做；

2.媒体查询需要精炼总结。

解决方案：

1.新知识点bootstrap比较繁琐，很多东西不需要立刻记住，只需要了解一些基本的东西，然后在动手的时候再去查找需要的知识点；目前需要知道的主要知识点：

  1.插入bootstrap4的 Staticfile CDN 上的库：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">

  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>

  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

  2.Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列，

网格系统有以下 5 个类:

  1.col- 针对所有设备；

  2.col-sm- 平板 - 屏幕宽度等于或大于 576px；

  3.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)；

  4.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)；

  5.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)。

  3.Bootstrap4 通过 .table 类来设置基础表格的样式，还可更改table的样式；

  4.Bootstrap 4 提供了不同样式的按钮，可用于 <a>, <button>, 或 <input> 元素上；

  5.Bootstrap4 折叠可以很容易的实现内容的显示与隐藏，

.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)，注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性；

  6.创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类，并依照flex设置对齐方式；

  7.使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类。

  8.面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加。

2.媒体查询的精炼总结：

  1.“media”就是用来指定特定的媒体类型，使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，还有其他比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。

  2. <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

  表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面

  3.其他：1最大宽度Max Width，2最小宽度Min Width，3多个Media Queries使用：

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面，

4设备屏幕的输出宽度Device Width：<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />iphone.css样式适用于最大设备宽度为480px，

5not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备：

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

6.only关键字：only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的；

7.在Media Query中如果没有明确指定Media Type，那么其默认为all：<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

8.使用逗号（，）被用来表示并列或者表示或：<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />，上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

收获：

任务名称：css-task-07

成果链接：https://fudonghua.github.io/mytask/task7/task7.1/html/task7.1.html

任务耗时：从2018年12月24日到2018年12月27日

官方脑图：

自己的脑图：

css任务7总结：

1.学会使用button按钮实现页面跳转；

2.学会使用音频 播放器；

3.学会了用css做三条杠和“×”；

4.学会了css半透明方法，opacity和rbga（）；

5.学会了熟练使用flex。

下面是详细地剖析：

1.1在学会button之前，我只知道使用<a>标签和<input type="submit">实现页面跳转，后来学会了button onclick="location就方便了许多，具体代码如下：

<button onclick="location='../../task7.3/html/task7.3.html'" class="choice">投死</button>

2.1学会使用音频 播放器：

具体的代码如：<audio controls src="../audio/freedom.mp3" class="freedom">

需要注意1.controls代表播放器组件，可以更改样式，但是很丑布局起来麻烦。方便地使用方法是用opacity隐藏至指定的按钮图形上；

               2.src代表路径，自己写文件时要使用相对路径：../

               3.class的样式可以更改，适应 HTML 的全局属性；

               4.其他属性如loop     音乐循环播放，播放结束后再自动继续播放，autoplay   音频在就绪后马上播放，网页打开自动播放音乐，preload  音频是否被加载及其方式。

3.1.学会了用css做三条杠和“×”，这个没什么多说的，通过transform和border把图形做出来就好了：

4.1学会了css半透明方法，opacity和rbga（），以下是他们的区别：

rgba和opacity的区别

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。也就是说使用opacity设置透明，子元素也跟着透明，而使用RGBA设置透明，子元素不跟着透明。

5.1学会了熟练使用flex：关键在于熟练运用父容器6个属性和子项目6个属性：

父容器6个属性：

① flex-direction属性决定主轴的方向（即项目的排列方向）；

② flex-wrap属性定义，如果一条轴线排不下，如何换行；

③ flex-flow 是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap;

④ justify-content属性定义了项目在主轴上的对齐方式；

⑤ align-items属性定义项目在交叉轴上如何对齐；

⑥ align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

子项目6个属性：

①  order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0；

②  flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；

③ flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；

④  flex-basis定义项目占据的主轴空间。(如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效；

⑤  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选；

⑥ align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。

属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。