一.拼接网页
将区域整体划分起名 => 对其他区域布局不产生影响
提出公共css => reset操作
当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
一定需要最外层,且最外层做自身布局时,不要做过多布局操作
二.过渡(动画)
transition属性
transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())
过渡属性具体设置给初始状态还是第二状态根据具体需求
过渡的持续时间: transition-duration: 2s;
延迟时间: transition-delay: 50ms;
过渡属性:单一属性 | 属性1, ..., 属性n | all
transition-property: all;
过渡曲线: cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
三.阴影
x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色
box-shadow: 0 0 10px 10px black;
一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;
四.伪类实现边框
自身需要定位
.box {
position: relative;
}
伪类通过定位来完成图层的布局
.box:before {
content: "";
/*完成布局*/
position: absolute;
top: 10px;
left: 0;
/*构建图层*/
1px;
height: 100px;
background-color: black;
}
.box:after {
content: "";
position: absolute;
100px;
height: 1px;
background-color: black;
top: 0;
left: 10px;
}