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

最新推荐文章于 2024-04-20 13:58:07 发布

qq_41775769

最新推荐文章于 2024-04-20 13:58:07 发布

阅读量4.6k

点赞数 5

文章标签： css

本文链接：https://blog.csdn.net/qq_41775769/article/details/105783005

版权

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

在这里插入图片描述

二、文件结构展示

使用的开发工具是：Webstorm
在这里插入图片描述

三、源码区

1.html文档(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>404 - 页面丢失啦</title>
</head>
<body>
    <div class="main-container">
        <div class="img-container container-item">
            <img src="./image/404.svg">
        </div>

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

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标签分离的效果
给服务器端良好的用户体验
减少代码冗余、提高代码的层次效果

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

qq_41775769

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
16
评论
HTML+CSS实现酷炫的404错误页面

一、酷炫的404错误页面效果图二、文件结构展示使用的开发工具是：Webstorm三、源码区1.html文档(index.html)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...
复制链接

扫一扫