今天完成的事情：今天完成了任务十三，遇到了三个问题，都已经解决，问题和解决写在总结里了，这里就不表述了。

明天计划：师兄今天开会准备明天晚上开始进行每晚的交流小会，所以明天需要把要说的深度思考去深挖一下，准备明天交流，然后任务十四让提取组件库，这个需要学习实践一下，为任务十五做组件库，感受一下自己做组件库和使用自己的组件库的效果。

任务名称 ：css13

成果链接：任务十三

任务耗时：2019.7.9-2019.7.10两天

官网脑图：

个人脑图：

任务总结：

1.在写第一页的链接的四个点时，以前是只把原点用伪类:hover，只有点击的瞬间有效果，其实不应该是这样，应该是点击后当前圆点出现蓝色效果，其他仍然是灰色，后来去看了伪类，发现应该使用超链接的伪类：link，：link是未访问时的状态，由于有四个链接点，在第一个页面时要求第一个点是蓝色，表明是第一个页面，以此类推，因此每个页面的四个点分别使用两套：link，伪类，第一个页面的第一个圆点使用蓝色的：link，其他三个使用灰色的：link，第二个页面则是第二个圆点用蓝色，其他三个用灰色，以此类推。

2.右侧的导航栏和复选框连接到一起，做出按钮式侧边导航栏，

<input type="checkbox" id="side-nav">
<label for="side-nav" class="side-nav" name="side-nav">
<header>
<img src="sass/img/menu.png" alt="">
</header>

使用上面的代码让input的复选框按键和顶部header连接到一起，然后使用display：none；将input复选框隐藏，使得只点击header就会有input的效果，然后设置导航栏nav尺寸，使用绝对定位absolute将其放置到左侧外部，然后使用#side-nav:checked ~ nav {left: 0;}将nav和复选框使用普通兄弟选择器连接起来，再用#side-nav:checked ~ .content {transform: translateX(50vw);}将复选框和其他内容连接起来，使得按下复选框的时候导航栏出现，其他内容往左平移动，再次点击导航栏消失，其他内容归位。在这个时候会出现导航栏出现的时候移动端整体页面宽度超过移动端屏幕尺寸可以给所有内容外部添加一个div，使用overflow:hidden;来隐藏，如果不设置这个div，而是直接给body设置溢出隐藏，则会不起作用，因为body 本身就是由内容撑开高度的，既然超出了可视区的高，自然会出现滚动条。也在网上看到比较专业的解释

3.图三给body背景设置颜色后，再给其设置最大宽度，但是超过最大宽度的地方仍然和body的颜色一样。而不是变为初始白色或者透明，后来发现是因为html本身背景默认和body一样，所以给html再设置一个颜色或者给body外面套个盒子设置颜色即可。