发表于: 2018-12-02 20:32:38

1 850


编辑日报内容...

今天继续做了任务7,忽然发现之前那些做的有些问题,就修改了下。

{
width: 3.5rem;
height: 3.5rem;
outline: 15px solid white;
outline-offset: -3.15rem;
transform: rotate(45deg);
position: relative;
left: -4%;
}

同时,也是对这个“x”的做法了解了,之前因为对这个数据不咋明白,所以导致大了,也超出了页面,所以搞的有些问题,现在基本已经搞定了。

然后在做正方形的时候,也给文字用了vw,然后就是hover:

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

提示::hover 选择器可用于所有元素,不只是链接。

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

注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

义和用法

:hover 选择器适用于所有元素

用法1:

这个表示的是:当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为黄色

1
2
3
4
a:hover
    {
        background-color:yellow;
    }

这个是最普通的用法了,只是通过a改变了style

用法2:

使用a 控制其他块的样式:

使用a控制a的子元素 b:

1
2
3
.a:hover .b {
        background-color:blue;
    }

使用a控制a的兄弟元素 c(同级元素):

1
2
3
.a:hover + .c {
        color:red;
    }

使用a控制a的就近元素d:

1
2
3
.a:hover ~ .d {
        color:pink;
    }

1. 中间什么都不加  控制子元素;
2. ‘+’ 控制同级元素(兄弟元素);
3. ‘~’ 控制就近元素;

看了这些,大概是明白了,明天就可以做出来了

明天的目标:

完成任务7

今天遇到的问题:

三个正方形排列有问题

收获:

一点一滴的成长




返回列表 返回列表
评论

    分享到