发表于: 2019-09-30 19:08:24

1 770


今天完成的事件

box-shado属性

向div元素添加阴影

代码如下

div box-shadow:10 px 10 px px #888888     ;}

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

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

媒体查询:

查询的意思是在分辨率达到多少的时候引用里面的属性经过多次实验大概知道如何引用

@media only screen and (max-width1200px) {
.F-box4 {
width20vw;
margin10px 0 0 0;
}
}

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

@media only screen and (max-width768px) {
.F-box4 {
width50vw;
margin10px 0 0 0;
}
}

这个是分辨率达到768px的时候我要求4个元素的宽每个行只占 2个元素效果如下

@media only screen and (max-width600px) {
.F-box4 {
width100vw;
margin10px 0 0 0;
}
}

那么最后一个就很好理解 在600px的时候 一行只占一个元素效果如下:


大概知道怎么应用这个东西但还是不够熟练。

第一个网页底部遇到问题 在分辨率达到多少的时候它不换行了 ,明天看看是那出问题。



返回列表 返回列表
评论

    分享到