[郑州|结业弟子]JS-冯思伟|2019年04月12日的日报-技能树.IT修真院

发表于： 2019-04-12 21:00:38

1 745

今天完成的事：任务8

遇到的问题

在做任务8的时候用到了栅格系统

col-xl 对应的事最大的

其次是col-lg

col-md

dol-sm

col-xs

最小的是col

在写任务8的时候

要做出 ui图的效果需要把12列平均分配成4列所以col-lg-3

当屏幕尺寸小时分成2列 col-md-6

最小的时候col-xs-12

做任务的时候还用到box-shadow

和border 类似

无论你用box-shadow像外扩展了多少，并不影响元素本身的大小

外阴影：box-shadow: X轴 Y轴 Rpx color;

属性说明（顺序依次对应）：阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色

内阴影：box-shadow: X轴 Y轴 Rpx color inset;

默认是外阴影内阴影：inset 可以设置成内部阴影

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

内阴影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 与上面写法相同唯一不同的是添加了一个inset 其它属性与外阴影相同

用到了hover

hover 选择器用于选择鼠标指针浮动在上面的元素。

hover 选择器可用于所有元素，不只是链接。

:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。

用了媒体查询

知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。

上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的"Media Queries"的更多使用方法和相关知识，下面我们开始进入今天的主题。

CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。

换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。
现在最常见的一个例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，
让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

还有display:flex

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。