404页面

最新推荐文章于 2024-06-18 23:42:42 发布

益生菌冻干粉

最新推荐文章于 2024-06-18 23:42:42 发布

阅读量180

点赞数

分类专栏：大前端文章标签： html css

本文链接：https://blog.csdn.net/Cheng_XZ/article/details/112390506

版权

大前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="main-container">
        <div class="img-container container-item">
            <img src="images/404.svg" alt="">
        </div>
        <div class="text-container container-item">
            <div class="code">404</div>
            <div class="msg">你查看的页面貌似丢失了呢...</div>
            <div class="action"><a href="#">返回首页查看更多</a></div>
        </div>
    </div>
</body>

</html>

CSS

div,
img {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(223, 223, 255, 0.39);
}

.main-container {
    width: 80%;
    max-width: 1000px;
    min-width: 600px;
    max-height: 500px;
    background-color: #ffffff;
    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.6);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

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

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

.main-container .text-container .action {
    font-size: 15px;
    font-weight: 200;
    text-align: center;
    text-decoration-line: underline;
    cursor: pointer;
}