风暴英雄

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