今天完成的事情：

任务8-3 的布局完成，其他页面上的一些细节进行修改，查看任务9的要求进行修改代码，学习一些新的属性知识，在不清楚原理的bootstrap上引用样式后修改覆盖其中原本的样式。

学习了圆角属性的单独设置，可以根据页面需求分别单独设置圆角属性

border-top-left-radius（上左圆角），其他的角类似如此设置。

阴影属性：

为文本添加阴影 text-shadow

使用text-shadow，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。（有继承性）

语法  text-shadow：h-shadow  v-shadow  blur  color；比如 :

{text-shadow:5px 5px #aaa;}

• h-shadow   水平阴影的位置，值可以为负数（不可省略）
• v-shadow   垂直阴影的位置，值可以为负数（不可省略）
• blur              模糊的距离（可选）
• color            阴影的颜色（可选）
• none            默认值（text-shadow:none 可以取消文字的阴影效果）

注意：一个元素添加多个阴影样式，每组属性之间用逗号分隔，每个阴影有（2~3个）长度值和1 个可选的颜色值进行规定。省略的长度是 0。

边框阴影：box-shadow

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。 

设置一个盒子边框四周都有阴影

使用box-shadow{0 0 2px color}前两个0意为不水平/垂直偏离，第三个值为设置阴影宽度，阴影将以边框为边线向四周扩大。

因为分配的师弟提交的任务一使用的display：grid网格布局，了解一些关于网格布局的知识。

以下知识点来自：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

display: grid指定一个容器采用网格布局

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;}

上面代码指定了一个三行三列的网格，列宽和行高都是100px。

除了使用绝对单位，也可以使用百分比。
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

repeat()重复某种模式也是可以的。

grid-template-columns: repeat(2, 100px 20px 80px);

上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);}

上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

因为这个也算是比较新发布的布局方式，兼容性还没有那么好，暂时不深入了解

响应式布局学习，首先是媒体查询：

有好几种方式使用媒体查询，在现有样式表中使用@media规则，

或是在一个新样式表里使用@import规则，

或是用link标签给html文档引用一个单独的样式表。

通常推荐在现有样式表中使用@media规则，以避免多次发送http请求

以下来自https://www.cnblogs.com/cumting/p/6741663.html

以@media开头来表示这是一条媒体查询语句

1.all:用于所有设备

2.print：用于打印机和打印预览

3.screen：用于电脑屏幕，平板电脑，智能手机等

4.speech：应用于屏幕阅读器等发声设备

1.and 把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时，结果才为真。

2.or 或，（逗号） 如果任何一个媒体查询返回真，样式就是有效的。

3.not 应用于整个媒体查询，在媒体查询为假时返回真,在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 


4.only 

操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用,其实无论是否使用only操作符都对结果无影响

实际上，only、not、and和or(用逗号表示)这四种逻辑中，只有and比较常用

媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符

媒体属性必须用括号()包起来，否则无效

1.width | min-width | max-width//定义输出设备中的页面可见区域宽度。

2.height | min-height | max-height//定义输出设备中的页面可见区域高度。

3.device-width | min-device-width | max-device-width//定义输出设备的屏幕可见宽度。

4.device-height | min-device-height | max-device-height//定义输出设备的屏幕可见高度。

注：设备宽度(device-width)指的是 显示该页面的屏幕宽度，这里指的是屏幕宽度，通常可以使用于移动设备的，因为这样的设备具有更小的显示区域。宽度(width)指的是浏览器窗口的宽度，特定媒体类型的渲染视区，对于桌面的操作系统来说，其实就是当前浏览器的宽度（并且是包括滚动条的）。且宽度默认等于屏幕宽度（width=device-width）

5.aspect-ratio | min-aspect-ratio | max-aspect-ratio//定义输出设备中的页面可见区域宽度与高度的比率

6.device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio//定义输出设备的屏幕可见宽度与高度的比率。

7.color | min-color | max-color//定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0

8.color-index | min-color-index | max-color-index//定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0

9.monochrome | min-monochrome | max-monochrome  //定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0

10.resolution | min-resolution | max-resolution //定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

11。scan | grid  //定义电视类设备的扫描工序|用来查询输出设备是否使用栅格或点阵。

-------------------------------------------------------------------------------------------------------------------------------------------------------------

类似以下代码，意为 所有常见媒体类型 宽度在800px  到  1024 px

@media all and (min-width: 800px) and (max-width: 1024px) {...}

明天计划的事情：

尽可能完成任务9，重新修改任务8的代码以达到任务9的需求。

遇到的问题和收获：

在设置图片和文字同行的时候，想给图片添加文字右环绕效果，因为我的图片是使用的雪碧图，套用在span里，align：right标签不生效。

只能把文字另外装在div标签里达到效果。

背景图片设置了width：100%宽度也一样导致图片的空隙，搜索了一下是说背景图片不能放大缩小，只能平铺或者居中，然后使用颜色填充空白，

改用img标签设定width：100%解决。

在修改部分细节的时候，关于阴影部分

设定了四个偏移数值，唯独右边框阴影，相邻有边框的时候没有显示出来，暂时没有查询到问题在哪。最后一个正常显示。

后面使用了Z-index属性提高了层级就显示正常了。

调试bootstrap的原生汉堡菜单，因为不理解其中各项属性，只能一个一个看功能修改，其中修改一个背景颜色的时候，

因为bg-light的背景颜色上面写了一个最重要的权重，导致我的修改覆盖无效，解决办法就是在你想修改的颜色上覆盖一个！important。