简洁自适应404页面HTML好看的404源码


Posted in HTML / CSS onDecember 16, 2020

演示图如下:

简洁自适应404页面HTML好看的404源码

HTML代码片段:

<!DOCTYPE HTML>
<html>
    <head>
        <title>404</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    </head>
    <body>

        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Header -->
                    <header id="header">
                        <div class="logo">
                            <span class="icon fa-diamond"></span>
                        </div>
                        <div class="content">
                            <div class="inner">
                                <h1>404</h1>
                                <p><!--[-->对不起,你要找的这个页面突然不见了。不过,放心,一切都在我的掌控之中,不会跑多远!<!--]--></p>
                            </div>
                        </div>
                        <nav>
                            <ul>
                                <li><a href="###">首页</a></li>
                                <li><a href="###">热搜</a></li>
                                <li><a href="###">联系</a></li>
                                <li><a href="###">关于</a></li>
                                <!--<li><a href="#elements">Elements</a></li>-->
                            </ul>
                        </nav>
                    </header>

                <!-- Main -->


                <!-- Footer -->
                    <footer id="footer">
                        <p class="copyright">© Untitled. Design: <a href="http://www.baidu.com">百度</a>.</p>
                    </footer>

            </div>

        <!-- BG -->
            <div id="bg"></div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

    </body>
</html>

图片&css代码部分:

链接: https://pan.baidu.com/s/18NcQScW6GKshXBKwHabTnA 提取码: rgaw

到此这篇关于简洁自适应404页面HTML好看的404源码的文章就介绍到这了,更多相关404页面源码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 #HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 #HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 #HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 #HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 #HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 #HTML / CSS
前端水印的简单实现代码示例
Dec 02 #HTML / CSS
You might like
深入php多态的实现详解
2013/06/09 PHP
PHP修改session_id示例代码
2014/01/08 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
pandas数值计算与排序方法
2018/04/12 Python
浅谈python中get pass用法
2019/03/19 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
2014年上半年工作自我评价
2014/01/18 职场文书
社区先进事迹材料
2014/05/19 职场文书
责任担保书范文
2014/05/21 职场文书
环境日宣传活动总结
2014/07/09 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis