今天完成的事：提交任务七，看Bootstrap 官方文档，重点看来栅格系统。

明天的计划：用框架写出第一个页面。

遇到的问题：下午在看资料暂时还没啥问题。

收获：

Bootstrap4 网格系统

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

网格类

Bootstrap 4 网格系统有以下 5 个类:

·         .col- 针对所有设备

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

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

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

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

网格系统规则

网格每一行需要放在设置了

·          .container (固定宽度)

·          .container-fluid (全屏宽度)

类的容器中，这样就可以自动设置一些外边距与内边距.

      .container (固定宽度)定义“容器”  容器包囊“行”

.row       来定义 “行”  行包囊“列”

.col        定义“列”  “列”里放元素

才形成一个完整的框架结构    框架才能正常运行。

1.“列”在栅格中被等分为“12”份，通过设置 （.col-*-*）规定每“列”占几份，

具体根据网页布局来确定具体数字。，（范围0~12的整数）

（如果里面没内容设为0会不显示）

第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

2.偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

   <div class="row">

<div class="col-md-4">.col-md-4</div>

 <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>

任务名称：CSS-task7-任务总结

成果链接https://zhanglinqian.github.io/HTML/task7/HTML/End.html

任务耗时：2019-6-21至2019-6-24  耗时4天

技能脑图：

官方脑图：

任务总结：

任务总结：

1.css7学到一些水平垂直居中的知识，学到一些关于影藏的知识。

   其中opacity:0;是元素隐藏

   visibility：hidden，元素仍然占据位置

   display：none.,元素不占据位置

2.CSS层叠中有一条法则十分重要，就是后面覆盖前面，所以伪类的顺序是需要精心考虑的。

　　    1）link和visited必须在最前面，且没有先后顺序，否则link或visited的效果将被覆盖

　　          link和visited称为静态伪类，只能应用于超链接

　　    2）hover、active、focus这三个伪类必须是focus、hover、active的顺序，因为在focus状态下，也需要触发hover和active，而要触发active一定要先触发hover，所以active要放在hover后面

　　          hover、active、focus称为动态伪类，可应用于任何元素，但IE7-浏览器不支持:focus，:hover和:active在IE6-浏览器下只支持给<a>设置

　　          所以最终的顺序只有两种:link、visited、focus、hover、active或visited、link、focus、hover、active

        3.学会使用媒体属性audio