A.今天学到了什么
1.下拉菜单
a{
text-decoration: none;
color:#fff;
}
ul{
width: 1000px;
margin-left: auto;
margin-right: auto;
background: pink;
list-style: none;
line-height: 50px;
}
li{
float: left;
width: 100px;
text-align: center;
}
.row::after{
content: "";
display: table;
clear: both;
}
a:hover{
background: red;
}
a{ display: block;}
.menu{
position: relative;
}
.key{
position: absolute;
display: none;
background: red;
width: 100px;
}
.menu:hover .key{
display: block;
}
<ul class="row">
<li class="menu">
<a href="">收藏夹</a>
<div class="key">
<a href="">收藏宝贝</a>
<a href="">收藏店铺</a>
</div>
</li>
<li><a href="">卖家中心</a></li>
<li><a href="">联系客服</a></li>
</ul>
2.border-radius
调整边框样式
div{
width: 200px;
height: 50px;
background: red;
border-radius: 20px 40px 80px 150px;
}
3.box-shadow
3.1偏移位置
div{
width: 100px;
height: 100px;
background: red;
/* 1.水平偏移的位置
2.垂直偏移的位置
3.高斯模糊
4.阴影的尺寸
5.阴影的颜色 */
/* box-shadow: 20px 20px 20px 5px blue; */
box-shadow: 0px 0px 20px 5px rgba(68, 206, 246, 0.3) inset;
}
3.2文字阴影
p{
/* 1.水平偏移量
2.垂直偏移量
3.高斯模糊
4.阴影颜色 */
text-shadow: 10px 10px 5px red;
}
3.3.文本省略
/* 文本以省略号结尾 */
p{
text-overflow: ellipsis;
overflow: hidden;
/* 不换行 */
white-space: nowrap;
}
4.transform
4.1用法
div{
/* 位移 */
width: 100px;
height: 100px;
background: rebeccapurple;
/* 横坐标偏移 */
/* transform: translateX(100px); */
/* 垂直方向偏移 */
/* transform: translateY(100px); */
/* translate(X,Y) */
/* transform: translateZ(100px); */
/* 缩放 */
/* transform: scale(x,y); */
/* transform: scaleX(); */
/* transform: scale(2); */
/* 倾斜 */
transform: skew(30deg);
}
div:hover{
/* 旋转 */
transform: rotate(30deg);
}
4.2实现水平垂直居中
.parent{
width: 300px;
height: 300px;
background: rebeccapurple;
position: relative;
}
.child{
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
5.transition
div{
/* 过渡 */
width: 100px;
height: 100px;
background: red;
/* 传参顺序：样式 时间 */
transition: width 4s;
}
div:hover{
width: 200px;
}
6.transition和tranform综合使用
div{
width: 200px;
height: 350px;
margin-top: 100px;
border:1px solid #333;
transition: all 2s;
}
div:hover{
transform:translateY(-20px);
box-shadow: 0 0 15px 10px #eee;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
transition: all 1s;
overflow: hidden;
}
img{
width: 100px;
height: 100px;
}
div:hover{
transform: scale(1.5);
}
7.animation
渐放效果
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<style>
div{
width: 100px;
height: 100px;
background: red;
}
div:hover{
animation: myAnimate 2s;
}
@keyframes myAnimate{
0%{
width: 100px;
height: 100px;
}
20%{
width: 200px;
height: 200px;
background: yellow;
}
50%{
width: 300px;
height: 300px;
background: blue;
}
100%{
width: 100px;
height: 100px;
background: red;
}
}
</style>
8.效果网页
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<style>
div{
width: 100px;
/* height: 100px; */
}
</style>
9.切换原理
input {
display: none;
}
.checkbox label {
background: url("images/off.png") no-repeat;
padding-left: 20px;
}
.checkbox>input:checked+label {
background: url("images/on.png") no-repeat;
}
<div class="checkbox">
<input type="checkbox" id="c">
<label for="c">请选择</label>
</div>
10.border边框
.parent{
width: 1000px;
height: 300px;
overflow: hidden;
background: skyblue;
margin-left: auto;
margin-right: auto;
border: 1px solid #333;
}
.parent>div{
box-sizing: border-box;
width: 25%;
height: 300px;
float: left;
}
.parent>div:not(:last-child){
border-right: 1px solid #333;
}
11.选择器
/* 选中父元素的第一个子元素 */
div>P:first-child{
color: red;
}
/* 选中父元素下的最后一个子元素 :last-child */
/* 不包含某个子元素 ：not() */
