好看的404页面单页代码

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>页面找不到了404</title>
<link rel="canonical" href="http://www.ctosv.com/">
<meta name="description" content="404">
<meta name="keywords" content="404">
<link rel="shortcut icon" href="/favicon.png">


<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">

    <style>
        .system {
            width: 1100px;
            margin: 0 auto;
            text-align: center;
            padding-top: 140px;
        }

        .system img {
            text-align: center;
            width: 500px;
        }

        .title {}

        .title h2 {
            color: #fff;
            font-size: 36px;
            letter-spacing: 4px;
            text-align: center;
            line-height: 120px;
        }

        .title h4 {
            color: #fff;
            font-size: 18px;
            /* font-weight: bold; */
            line-height: 38px;
            text-align: center;
        }
		  .title li {
            color: #fff;
            font-size: 13px;
            /* font-weight: bold; */
            line-height: 38px;
            text-align: center;
        }


        * {
            word-wrap: break-word
        }

        html,
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr,
        p,
        iframe,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        pre,
        form,
        button,
        input,
        textarea,
        th,
        td,
        fieldset {
            color: #666;
            margin: 0;
            padding: 0;
            font-weight: normal;
        }

        ul,
        ol,
        dl {
            list-style-type: none
        }

        html,
        body {
            *position: static
        }

        html {
            font-family: sans-serif;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%
        }

        address,
        caption,
        cite,
        code,
        dfn,
        em,
        th,
        var {
            font-style: normal;
            font-weight: 400
        }

        input,
        button,
        textarea,
        select,
        optgroup,
        option {
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            font-weight: inherit
        }

        input,
        button {
            overflow: visible;
            vertical-align: middle;
            outline: none
        }

        body,
        th,
        td,
        button,
        input,
        select,
        textarea {
            font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, sans-serif, "WenQuanYi Micro Hei", "\5B8B\4F53";
            font-size: 12px;
            color: #333;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        body {
            line-height: 1.6;
            background: #7395ff;
        }

        h1,
        h2,
        h3,
        h4,
		li,
        h5,
        h6 {
            font-size: 100%
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        a,
        area {
            outline: none;
            blr: expression(this.onFocus=this.blur())
        }

        a {
            text-decoration: none;
            cursor: pointer
        }

        a:hover {
            text-decoration: none;
            outline: none
        }

        a.ie6:hover {
            zoom: 1
        }

        a:focus {
            outline: none
        }

        a:hover,
        a:active {
            outline: none
        }

        :focus {
            outline: none
        }

        sub,
        sup {
            vertical-align: baseline
        }

        button,
        input[type="button"],
        input[type="submit"] {
            line-height: normal !important;
        }

        /*img*/
        img {
            border: 0;
            vertical-align: middle
        }

        a img,
        img {
            -ms-interpolation-mode: bicubic
        }

        .img-responsive {
            max-width: 100%;
            height: auto
        }

        .clears {
            clear: both;
        }

        /*IE下a:hover 背景闪烁*/
        *html {
            overflow: -moz-scrollbars-vertical;

            zoom:expression(function(ele) {
                    ele.style.zoom="1";
                    document.execCommand("BackgroundImageCache", false, true)
                }

                (this))
        }

        /*HTML5 reset*/
        header,
        footer,
        section,
        aside,
        details,
        menu,
        article,
        section,
        nav,
        address,
        hgroup,
        figure,
        figcaption,
        legend {
            display: block;
            margin: 0;
            padding: 0
        }

        time {
            display: inline
        }

        audio,
        canvas,
        video {
            display: inline-block;
            *display: inline;
            *zoom: 1
        }

        audio:not([controls]) {
            display: none
        }

        legend {
            width: 100%;
            margin-bottom: 20px;
            font-size: 21px;
            line-height: 40px;
            border: 0;
            border-bottom: 1px solid #e5e5e5
        }

        legend small {
            font-size: 15px;
            color: #999
        }

        svg:not(:root) {
            overflow: hidden
        }

        fieldset {
            border-width: 0;
            padding: 0.35em 0.625em 0.75em;
            margin: 0 2px;
            border: 1px solid #c0c0c0
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            height: auto
        }

        input[type="search"] {
            -webkit-appearance: textfield;
            /* 1 */
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            /* 2 */
            box-sizing: content-box
        }

        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none
        }

        /*
	Name:style_clearfix
	Example:class="clearfix|cl"
	Explain:Clearfix(简写cl)避免因子元素浮动而导致的父元素高度缺失能问题
*/
        .cl:after,
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }

        .cl,
        .clearfix {
            zoom: 1
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }
		.footer{
			height: 100px;
			width: 100%;
			position: fixed;
			bottom: 0;
			text-align:center;

			}
    </style>

            </style><style id="panai-style">
                .panai-container { z-index: 99999!important }
                .panai-popup { font-size: 14px !important }
                .panai-setting-label { display: flex;align-items: center;justify-content: space-between;padding-top: 20px; }
                .panai-setting-checkbox { width: 16px;height: 16px; }
            </style><style id="instant-style">
                .instant-popup { font-size: 14px !important; }
                .instant-setting-label { display: flex;align-items: center;justify-content: space-between;padding-top: 15px; }
                .instant-setting-label-col { display: flex;align-items: flex-start;;padding-top: 15px;flex-direction:column }
                .instant-setting-checkbox { width: 16px;height: 16px; }
                .instant-setting-textarea { width: 100%; margin: 14px 0 0; height: 60px; resize: none; border: 1px solid #bbb; box-sizing: border-box; padding: 5px 10px; border-radius: 5px; color: #666; line-height: 1.2; }
                .instant-setting-input { border: 1px solid #bbb; box-sizing: border-box; padding: 5px 10px; border-radius: 5px; width: 100px}
                 @keyframes instantAnminate { from { opacity: 1; } 50% { opacity: 0.4 } to { opacity: 0.9; }}
                .link-instanted { animation: instantAnminate 0.6s 1; animation-fill-mode:forwards }
                .link-instanted * { animation: instantAnminate 0.6s 1; animation-fill-mode:forwards }
            </style></head>

<body class="mdui-loaded">

    <div class="system">
        <img src="https://tool.ctosv.com/images/2022/08/26/166150024063087b502b368.png">
        <div class="title">
            <h2>Sorry页面找不到了,请返回</h2>
             <h4>www.ctosv.com</a></h4>
        </div>
    </div>
	<div class="footer">
	<p style="font-size:18px;color:#474440">Copyright © 2021-2022. <a href="http://www.ctosv.com/" target="_blank">壹念+</a> All rights reserved.</p>
	</div>


<div style="position: fixed; right: 25px; bottom: 25px; cursor: pointer; z-index: 2147483647; user-select: none;" class="no-print" id="darkBtn"><div style="background: #333;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%"><svg style="position: static;margin: 0;padding: 0;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M513.173 128A255.061 255.061 0 0 0 448 298.667c0 141.376 114.624 256 256 256a255.36 255.36 0 0 0 189.803-84.203A392.855 392.855 0 0 1 896 512c0 212.075-171.925 384-384 384S128 724.075 128 512c0-209.707 168.107-380.16 376.96-383.936l8.192-.064zM395.35 213.93l-3.52 1.409C274.645 262.827 192 377.77 192 512c0 176.725 143.275 320 320 320 145.408 0 268.16-96.981 307.115-229.803l1.536-5.504-1.6.64a319.51 319.51 0 0 1-106.496 21.227l-8.555.107c-176.725 0-320-143.275-320-320 0-28.48 3.755-56.406 10.944-83.2l.405-1.536z" fill="#adbac7"></path></svg></div></div></body><style id="igor_ext_nofollow">a[rel~='nofollow'],a[rel~='sponsored'],a[rel~='ugc']{outline:.14em dotted red !important;outline-offset:.2em;}a[rel~='nofollow'] img,a[rel~='sponsored'] img,a[rel~='ugc'] img{outline:2px dotted red !important;outline-offset:.2em;}</style></html>
© 版权声明
THE END
喜欢就支持一下吧
点赞9赞赏 分享
评论 抢沙发

请登录后发表评论