简洁自适应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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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安全配置方法
2007/06/16 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
python实现class对象转换成json/字典的方法
2016/03/11 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
园林毕业生自我鉴定范文
2013/12/29 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
基层党建工作简报
2015/07/21 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript