发表于: 2018-08-21 22:21:43
1 685
今天完成的事情:写了关于我们页面的样式,搭建了游戏页面的结构
明天计划的事情:写游戏页面的样式
遇到的问题:联系我们的显示与隐藏写得有问题
收获:: 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。
评论