发表于: 2018-08-21 22:21:43

1 684


今天完成的事情:写了关于我们页面的样式,搭建了游戏页面的结构

明天计划的事情:写游戏页面的样式

遇到的问题:联系我们的显示与隐藏写得有问题

收获:: hover选择器的使用

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

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

用法1:

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

a:hover

    { 

        background-color:yellow;

    }

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

用法2:

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

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

.a:hover .b {

        background-color:blue;

    }

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

.a:hover + .c {

        color:red;

    }

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

.a:hover ~ .d {

        color:pink;

    }

总结一下使用hover的几种情况:

1. 中间什么都不加  控制子元素;

2. ‘+’ 控制同级元素(兄弟元素);

3. ‘~’ 控制就近元素;

vertical-align的用法

vertical-align:该属性定义行内元素的基线相对于该元素所在行(父级元素)的基线的垂直对齐方式。

所有浏览器都支持 vertical-align 属性(包括 IE8)

可能的取值方式:

baseline: 元素的基线放置在父级元素的基线上;(vertical-align 属性的默认值是 baseline);

text-top/text-bottom:把元素的底端垂直与父元素的文本的顶端/底端对齐;

top:把元素的顶端与行中最低的元素的顶端对齐。

bottom:把元素的顶端与行中最低的元素的顶端对齐。【注意,top/bottom 对应的边界是 父级元素的border 的内边界】

middle:把元素相对于父级元素垂直居中;

所以为了使得元素相对于父级元素垂直居中,我们可以把元素的 display 属性设定为 inline-block;同时把元素的 vertical-align 属性值设定为 middle。




返回列表 返回列表
评论

    分享到