css布局实现简单系统升级维护404页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现简单系统升级维护404页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
@charset "utf-8";
        * {
            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,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;
    }
    /*a {
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
}*/

@charset "utf-8";
    .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;
    }
</style>

</head>
<body>

<div class="system">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAp8AAAF9CAYAAABCjAMcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQxMEI2MjA4OTBENzExRUE4Q0QxRTREQzc1NEYyMTBBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQxMEI2MjA5OTBENzExRUE4Q0QxRTREQzc1NEYyMTBBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDEwQjYyMDY5MEQ3MTFFQThDRDFFNERDNzU0RjIxMEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDEwQjYyMDc5MEQ3MTFFQThDRDFFNERDNzU0RjIxMEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz50xq+GAACpAElEQVR42uxd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.........完整代码请登录后点击上方下载按钮下载查看