简洁自适应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制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP对象实例化单例方法
2017/01/19 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
FCK调用方法..
2006/12/21 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
浅谈Angular单元测试总结
2019/03/22 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
Python中使用HTMLParser解析html实例
2015/02/08 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
Python ATM功能实现代码实例
2020/03/19 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript