一 css居中效果
(1)div行内垂直居中
div li{
height:30px;
line-height:30px;
}
(2)div行内水平居中
div li{
text-align:center;
}
(3) div内块级元素水平居中
div p{
margin:0 auto;
width:50%;
}
(4)div内块级元素垂直居中
div p{
height:300px;
line-height:300px;
}
二、li鼠标悬浮背景颜色从上往下变化
ul li a{
text-decoration: none;
color:#dddddd;
display: block;
background:linear-gradient(white 50%, #373735 50%);
background-size: 100% 200%;
background-position: 0 100%;
}
ul li a:hover{
background-position: 0 0%;
color:#000;
transition: background .3s ease;
}
三、选择器的分类与使用
(1) 核心选择器
标签
类
id
并且 p.one#first
或者 p,.one,#first
(2) 层次
后代 parent sons
子代 parent>sons
下一个兄弟 .one+*
之后所有兄弟 .one~*
(3) 属性选择器(过滤器)
配合基本选择器进行筛选
<input type="text" name="username">
selector[name]
input[name=username] 选择具有name属性的、并且name的值为val元素
input[name*=use]选择具有name属性的、并且name的值包含user的元素
input[name^=u]选择具有name属性的、并且name的值以val开头的元素
innput[name$=e]选择具有name属性的、并且name的值以e结尾的元su
input[name~=username]选择具有name属性的、并且name的值之一为username的元素
(4) 伪类选择器
配合基本选择器进行筛选
1) 子元素
:first-child
:last-child
:nth-child()
:first-of-type
:last-of-type
:nth-of-type()
2) 状态
:hover
:active
:focus
(5) 伪元素选择器
::after
常用于清除浮动,让浮动的子元素将父撑起来。