今天完成的事情： 

今天更好的优化了自己的前两个网页，也把hover和opacity给学了，我用把audio引入音频，然后出现一个播放器，然后因为现在学习的只是CSS的方式所以只能用opacity：0来透明然后硬生生的把音频给拽到图标的位置，当点击的时候就会播放了，我用px像素定在了原为，让他不会因为各种屏幕的变化而偏移一点位置代码如下

a:link {color: #FF0000}     /* 未访问的链接 */

a:visited {color: #00FF00}  /* 已访问的链接 *

/a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */

a:active {color: #0000FF}   /* 被选择的链接 */

上面的是音频的

经过各种调试各种被老大折磨的声音，一遍遍的适配，终于合适了位置。

下面总结几点opacity

具体是这样的毕竟只是一个简单的属性

        1.创建一行(<div class="row">)。然后， 添加是需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

        2.不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

响应式 Web 设计 - Viewport

什么是 Viewport?

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

明天计划的事情：
遇到的问题：
收获：