HTML+CSS实现酷炫的404错误页面

一、酷炫的404错误页面效果图

二、文件结构展示

使用的开发工具是：Webstorm

三、源码区

1.html文档(index.html)

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "stylesheet" href="css/style.css">
    


    
"main-container">
        
"img-container container-item">
            "./image/404.svg">
        

        
"text-container container-item">
            
"code">404
            
"msg">你查看的页面貌似丢失了呢...
            "action" href="#">
返回首页,查看更多内容.
        
    

2.CSS文档(style.css)

* {
     
    padding: 0;
    margin: 0;
}

html,body {
     
    height: 100%;
}

body {
     
    /* 修改背景色调 */
    background: rgba(223, 223, 255, 0.39);
    display: flex;
    justify-content: center; /*body内容水平居中显示*/
    align-items: center;     /*body内容垂直居中显示*/
}

.main-container {
     
    width: 80%;
    max-width: 1000px;
    max-height: 500px;
    min-width: 600px;
    background-color: white;
    font-size: 0;
    border-radius: 20px;
    box-shadow: 0 0 50px 0 rgba(146, 146, 146, 0.63);
}
.main-container .container-item {
     
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.main-container .img-container {
     
    background-color: rgba(253, 216, 168, 0.692);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.main-container .text-container .code {
     
    font-size: clamp(150px,20vw,200px);
    font-family: 'Arial Narrow';
    color: rgb(86, 86, 253);
    font-weight: bolder;
    text-align: center;
}

.main-container .text-container .msg {
     
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}

.main-container .text-container .action {
     
    color: #0f0f0f;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration-line: none;
}
.main-container .text-container a:hover{
     
    color: #5bc0de;
}

完全实现样式和HTML标签分离的效果
给服务器端良好的用户体验
减少代码冗余、提高代码的层次效果

需要配图的小伙伴可以私信我啦…