HTML+CSS实现——精美404页面

简介: 本篇文章,主要讲解一下如何创建一个精美404页面

本篇文章,主要讲解一下如何创建一个精美404页面



页面效果图231180fcf1258f63a1f9cb9da45ce9b.png


HTML+CSS部分(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页丢失了哦!</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .frem{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: url('http://175.178.184.206/usr/themes/handsome/gifs.gif');
        background-position: center;
        background-repeat: no-repeat;
    }
    .frem p{
        position: absolute;
        top: 3rem;
        font-size: 7rem;
        color: #00000063;
    }
    .frem h2{
        position: absolute;
        bottom: 8rem;
        font-size: 34px;
    }
    .frem h5{
        position: absolute;
        bottom: 6rem;
        color: #9c9c9c;
    }
    .frem a{
        position: absolute;
        bottom: 1rem;
        background: linear-gradient(45deg, #2a98ff, #09ff00);
        padding: 12px;
        color: white;
        text-decoration: none;
        font-size: 20px;
        border-radius: 13px;
    }
</style>
<body>
    <div class="frem">
        <p>404</p>
        <h2>看起来你迷路了</h2>
        <h5>你所寻找的页面已丢失!</h5>
        <a href="http://wyz-math.cn">返回首页</a>
    </div>
</body>
</html>
目录
打赏
0
0
0
0
23
分享
相关文章
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
108 79
|
1月前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
201 77
|
12天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
31 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
126 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
54 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
65 34
HTML页面基本结构
本文简要介绍HTML中的各种元素及其相关属性,读者需要有一个概念: HTML页面都是由基本元素及属性组成的。HTML页面的结构如下。 doctype 声明 HTML 源文件中, 首先出现的是 doctype 声明。
1278 0
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
85 33