风暴英雄
favicon
- 几乎所有的网站的快捷图标(收藏图标)都叫做favicon.ico
- 快捷图标(收藏图标)必须要放到站点文件夹的根目录中
- 通过link标签引入快捷图标(收藏图标)
消除默认样式
- reset.css: 很暴力的清除系统默认设置的样式
- normalize.css: 会保留系统默认设置的有价值的样式, 并且修复了很多浏览器的BUG
自动播放背景视频
<!--自动播放 循环 静音 海报(视频)-->
<video autoplay loop muted poster="images/bg.jpg">
<source src="images/bg.mp4" type="video/mp4">
<source src="images/bg.webm" type="video/webm">
</video>
video{
width: 100%;
height: 1080px;
/*被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。*/
object-fit: cover;
background: red;
}
父元素定位会影响子元素a标签的可点击性,可以修改z-index的值
三个元素,一个接一个动画,可以设置每延迟一秒再执行下一个元素的动画
main>.list>li:nth-child(1){
animation: move 1s linear 1s normal;
animation-fill-mode: forwards;
}
.main>.list>li:nth-child(2){
animation: move 1s linear 2s normal forwards;
}
.main>.list>li:nth-child(3){
animation: move 1s linear 3s normal forwards;
}
@keyframes move {
from{
bottom: 0;
}
to{
bottom: 120px;
}
}
在企业开发中, 如果元素是左浮动的, 就不要设置左边的margin;如果是右浮云,就不要设置右边的margin
