学习情况：

1、页面1，导航条使用的bootsrap样式.nav，会自动响应宽度展开，改起来好像很麻烦，不知道合规不，后续考虑折叠模式或者访问显示方式实现全折叠。

2、中间翻页部分，使用 Bootstrap 轮播（Carousel）显示了一个循环播放元素的通用组件。简化版链接页面2。

3、页面2背景音乐，纯CSS没弄好一键播放暂停，加了简单js代码增加逻辑判断。button样式定义为背景播放图片。

        <audio src="./财富自由.mp3" controls="controls" preload id="myaudio" hidden >你的浏览器不支持</audio>

        <button id="a"   onclick="a();"></button>

    <script>

        function a(){

            var audio = document.getElementById('myaudio');

            if(audio.paused){audio.play();}

            else{audio.pause();}

        }

    </script>

4、隐藏4个小图片，原属性使用opacity: 0将其透明隐藏，增加hover属性改为不透明。底部键跳转页面3。

5、页面3，中间使用图片设置好尺寸，媒体查询条件时，将字体和图片尺寸改小。左上角主页键跳转页面1。

6、底部半透明+不透明固定位框，大盒套小盒后，小盒子透明度不会变。只能拿出来平级单独设置。

问题：

本来想设置最大宽度的，body{max-width:},结果发现fixed固定栏head和footer都没有变化，还是浏览器窗口宽度,请师兄指导下。

计划：

修正任务7，任务8开始走电脑端页面，争取周五出初稿。