今天完成的事件

在重构中学习到新的知识点：

这个里面字体改变颜色 并且在输入的时候字体颜色不会改变代码如下

这里要注意下：  在我们类中的color颜色是不影响 输入框原本的颜色的 而输入宽原本的字体颜色是placeholder所控制。

任务用时1周

成果展示：https://xinchencs88.github.io/-4/eight/eight.html

在做任务8的时候第一次了解到bootstrap框架。主要用来做管网的导航栏，Bootstrap框架直接复制它的导航栏

这个时候你就得自己修改样式比如移动按钮以及背景颜色，还有文字的大小添加自己的一些细节，由于修改的时候会出现自己的属性与复制过的属性相冲突，这时候需要用到优先级代码!important:作用是提高指定CSS样式规则的应用优先权。优先使用你设置的属性而不是BOOTcss框架自带属性。

在修改的时候一定要先查赋值过来的哪些类都是什么作用，不然后会出现改动本来的布局会非常麻烦。

Bootstrap4 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

我们也可以根据自己的需要，定义列数：

Bootstrap 4 网格系统有以下 5 个类:

• .col- 针对所有设备
• .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

大概意思就是 如果你想让你的图片在缩小到多少像素的时候，元素站多少个，如 如果你有4个元素 在最大的时候大一1200px 的时候那么ol-xl-3意思表示一个元素站上面的3个1列 那么在1200px就是4个元素，如果收缩在992px col-md-6 那意思就是4个每个元素占领一半，本来一行4个其他2就被挤下换行。得记住FLEX布局要在父类里面写flex-wrap：wrap;换行。不然上面的类是不会有用的。

这个其实可以自己用媒体查询实现但当时不会用媒体查询只能用框架的，这里还是自己写媒体查询 因为有时候会出现一些小冲突。

动画轮播图 直接从：Bootstrap 框架复制修改就好了这个很简单。

新的属性：

，如果用媒体查询修改 有大概率改崩溃，发现复制代码的后先在浏览器打开打直接复制它的类。

然后进行修改就比较简单了，如果用媒体查询改很容易改崩溃。

box-shado属性

向div元素添加阴影

代码如下
div{

box-shadow:10px 10px 5px #88888;

}

前面2个水平阴影位置和垂直阴影位置 如果想要中间的 前面一般我们都是把他设置为0， 后一个元素是阴影的大小 当然还有个阴影模糊。效果如下：

我们看到阴影的模糊，它的大小模糊是可以设置的，代码如下：

媒体查询：

查询的意思是在分辨率达到多少的时候引用里面的属性经过多次实验大概知道如何引用
@media only screen and (max-width: 1200px) {
.F-box4 {
width: 20vw;
margin: 10px 0 0 0;
}
}

第一个就是在分辨率大于等于1200pxd 时候那么我就每个元素的宽在20vw刚好在我的4个元素可以在1200px的时候 是4个元素效果如下：

这个用法就相当于 在1200px下 是直接用媒体查询里面的属性而且 最开始的设置的属性是直接被媒体查询的属性覆盖掉的，而媒体查询里面没有的属性是直接用最开始的设置的属性，这就比较简单在媒体查询是需要设置宽高等而文字和背景图片以及他们的布局是不受影响的。

看师兄的代码了解到after选择器，又学到一个新的属性。

定义是选定元素之后插入内容。

使用content属性来指定插入内容

我用来事实现下划线效果如下：

代码如下：

G-li::after {
content: "";
position: absolute;
border-bottom: 1px solid rebeccapurple;
left: -15%;
height: 100%;
width: 88%;
visibility: hidden;

}

.G-li:hover::after {
visibility: visible;

}

这里注意有个新的属性 visibility属性：

使元素看不可见到，属性值：

参考：https://www.runoob.com/cssref/pr-class-visibility.html。

遇到问题：A标签是链接用的在鼠标点击的时候它字体就会变成原本的蓝色和下划线。

问题解决：下面是关于超级链接a的样式控制
a:link {
color: #FF0000; /*连接默认的颜色变化*/
}
a:visited {
color: #0000FF; /*连接访问的颜色变化*/
}
a:hover {
color: #00FF00; /*鼠标经过的颜色变化*/
}
a:active {
color: #FFFF00; /*鼠标按下的颜色变化*/
}

效果如下：

你鼠标移动上去就不会出现下划线和字体颜色发生改变。

代码如下：
.B-129-font{
font-size: 14px;color: black;
margin:0 15px ;

}
.B-129-font:visited{
color: black;
}
a:hover{
text-decoration:none ;

}

总结： 通过这个任务知道网页的大致布局而且了解到Bootstrap的用法还有很多没有用到，以及最重要的媒体查询在不同的分辨率下 怎么实现布局这个很重要在我后面的任务基本经常用到。