今天完成的事：

1.今天主要完成了页面布局的修改处理 ，以及css代码优化.

2.开始任务八第二个页面的布局 ，但是由于状态不佳 ，进展不大 。

任务过程中学习的知识：

如何使用栅格系统：

Bootstrap分为哪些？

Bootstrap分为3和4，他们的区别是在于

bootstrap3和bootstrap4最大的区别就是4用的是flex布局，3用的是float浮动

bootstrap4的栅格类特小(col-)，bootstrap3的栅格类特小(col-xs）

bootstrap4新增加的栅格特大(col-xl-)

bootstrap4用offset来移动bootstrap3用push和pull向左和向右移动

什么是栅格系统（网格系统）

网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，

可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类

Bootstrap4 网格系统规则:

网格每一行需要放在设置了 .container (固定宽度)

.container-fluid (全屏宽度) 类的容器中，

或这样就可以自动设置一些外边距与内边距。

内容需要放置在列中，并且只有列可以是行的直接子节点。

预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

Bootstrap4网格系统有以下 5 个类:

.col-： 针对所有设备          超小设备小于576px              None (auto)        列数量和 ：12 列          30px ：（一个列的每边分别 15px）    可嵌套         列排序 ：Yes

.col-sm-：容器最大宽度540px       列数量和    12       30px： （一个列的每边分别 15px）       可嵌套

.col-md-：大于等于768px          容器最大宽度720px         列数量和    12         30px ：（一个列的每边分别 15px）         可嵌套

.col-lg-：  大于等于992px             容器最大宽度960px       列数量和    12          30px （一个列的每边分别 15px）          可嵌套 

.col-xl-：  大于等于1200px          容器最大宽度是1140px           列数量和    12          30px （一个列的每边分别 15px）       可嵌套

响应式网页设计的优点：

1. 跨平台和终端且不需要分配子域。
2. 兼容当前及未来设备。
3. 节约成本。

缺点：

1. 兼容性 不兼容低版本浏览器
2. 移动带宽增多
3. 加载事件长、无用代码太多。

css有哪些方式可以实现垂直居中？

几种常用到的垂直居中方法：

1、头部和顶部使用相同大小的padding值可以实现居中。

2、单行文本可以用line-height实现垂直居中，设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

3、通过display:flex，align-items: center;或 align-self: center;实现垂直居中。

4、使用position、transform实现元素垂直居中。

5、使用position结合margin：auto实现垂直居中。

6、使用 display :table和 vertical-align 对容器里的文字进行垂直居中, 父元素使用display:table,子元素使用display:table-cell属性来模拟表格，子元素设vertical-align:middle即可垂直居中。

7、通过verticle-align:middle实现行内垂直居中。

明天计划的事：调整好心态 ，投入到学习中去，继续进行任务8和9

遇到的问题：在页面布局的时候由于思路不是太严谨 在任务中做出的页面效果不佳，返工率比较高。

收获：完成第一个页面  开始第二个页面的制作。