经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML » 查看文章
简洁自适应404页面HTML好看的404源码
来源：jb51　　时间：2020/12/21 14:44:38　　对本文有异议

演示图如下：

HTML代码片段：

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>404</title>
  5.         <meta charset="utf-8" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  7.         <link rel="stylesheet" href="assets/css/main.css" />
  8.         <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
  9.         <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
  10.     </head>
  11.     <body>
  12.  
  13.         <!-- Wrapper -->
  14.             <div id="wrapper">
  15.  
  16.                 <!-- Header -->
  17.                     <header id="header">
  18.                         <div class="logo">
  19.                             <span class="icon fa-diamond"></span>
  20.                         </div>
  21.                         <div class="content">
  22.                             <div class="inner">
  23.                                 <h1>404</h1>
  24.                                 <p><!--[-->对不起，你要找的这个页面突然不见了。不过，放心，一切都在我的掌控之中，不会跑多远！<!--]--></p>
  25.                             </div>
  26.                         </div>
  27.                         <nav>
  28.                             <ul>
  29.                                 <li><a href="###">首页</a></li>
  30.                                 <li><a href="###">热搜</a></li>
  31.                                 <li><a href="###">联系</a></li>
  32.                                 <li><a href="###">关于</a></li>
  33.                                 <!--<li><a href="#elements">Elements</a></li>-->
  34.                             </ul>
  35.                         </nav>
  36.                     </header>
  37.  
  38.                 <!-- Main -->
  39.  
  40.  
  41.                 <!-- Footer -->
  42.                     <footer id="footer">
  43.                         <p class="copyright">© Untitled. Design: <a href="http://www.baidu.com">百度</a>.</p>
  44.                     </footer>
  45.  
  46.             </div>
  47.  
  48.         <!-- BG -->
  49.             <div id="bg"></div>
  50.  
  51.         <!-- Scripts -->
  52.             <script src="assets/js/jquery.min.js"></script>
  53.             <script src="assets/js/skel.min.js"></script>
  54.             <script src="assets/js/util.js"></script>
  55.             <script src="assets/js/main.js"></script>
  56.  
  57.     </body>
  58. </html>

图片&css代码部分：

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

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML热门文章

  • 跨域iframe如何实现高度自适应？
  • HTML页面中使用Vue示例进阶（快速学会上手Vue）
  • HTML+JS实现监控切屏功能
  • Http Cookie机制及Cookie的实现原理
  • Go html/template 模板的使用实例详解
  • v-html渲染组件问题
  • 趣味图解HTTP状态码的含义
  • 一个不被程序员认为是编程语言的语言——HTML
  • html实现弹窗的实例
  • 如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture/html2picture

    • HTML推荐文章

  • WPF实现html中的table控件
  • HTML中script 标签中的那些属性
  • 使用Net将HTML简历导出为PDF格式
  • 让chatgpt将html中的图片转为base64方法示例
  • HTML页面中使用Vue示例进阶（快速学会上手Vue）
  • HTML 罗盘式时钟的实现
  • 给原生html中添加水印遮罩层的实现示例
  • HTML 基础
  • 像素数据YUV简介与觉存储格式介绍
  • 跨域iframe如何实现高度自适应？

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号