css布局实现简洁粉色系404页面代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现简洁粉色系404页面代码码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>404错误-页面不存在</title>

    <style>
        @charset "utf-8";
    *{
        margin: 0;
        padding: 0;
    }
    *,*:before,*:after{
        box-sizing: border-box;
    }
    .error{
        position: relative;
        width: 100%;
        height: 100%;
    }
    body,html{
        height: 100%;
    }
    body{
        background-color: #f7f5f6;
    }
    .error > .container{
        width: 988px;
        height: 340px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 16px;
        text-align: center;
        background-color: #ffffff;
        box-shadow: 0 10px 40px 0 rgba(128,0,59,.05);
        border-radius: 10px;
        color: #666666;
        text-align: center;
        font-weight: 400;
    }
    .error > .container > .icon,.error > .container > .go-back{
        display: block;
        margin: 0 auto;
    }
    .error > .container > .icon{
        width: 543px;
        height: 213px;
        margin-bottom: 30px;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh8AAADVCAYAAAD3sZIqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNjI0RkQyNDU1MkMxMUU5QTExMUYxRDlEOEUwMUE5MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNjI0RkQyNTU1MkMxMUU5QTExMUYxRDlEOEUwMUE5MyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkY2MjRGRDIyNTUyQzExRTlBMTExRjFEOUQ4RTAxQTkzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY2MjRGRDIzNTUyQzExRTlBMTExRjFEOUQ4RTAxQTkzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GbRmEwAAO+RJREFUeNrsnQuwZHWd3//n3r6PuXNnhmF4Do/BAQQRBAcEDcQHvjLG1aqgBjBqYbExW6WJlbibyiY+oglbqU2p5bpRU7jZuCvGdaksqyuuT4KygjxEQASBgWF4DjDDvd331X27T/7ff59/3/85fd6P7tOnv5+qM6e7p+/p0/9z+v///n+vv2XbthhnFq6+Tj98j9w+IbfT5faQ3D4tt78ShBBCSDwCx5Ft117J1jGosQkU75LbN43nLzeeU4AQQgjhOJIjE2wCxacCXv8Em4YQQgjHEYqPIjgz4euEEEIIxxGKj0xMJnydEEII4ThC8UEIIYQQig9CCCGEEIoPQgghhFB8EEIIIYTigxBCCCGE4oMQQgghFB+EEEIIIRQfhBBCCKH4IIQQQgih+CCEEEIIxQchhBBCKD4IIYQQQig+CCGEEELxQQghhBBC8UEIIYQQig9CCCGEUHwQQgghhFB8EEIIIYTigxBCCCGE4oMQQgghFB+EEEIIIRQfhBBCCKH4IIQQQgjFByGEEEIIxQchhBBCKD4IIYQQQig+CCGEEELxQQghhBBC8UEIIYQQig9CCCGEUHwQQgghhFB8EEIIIYTigxBCCCGE4oMQQgghFB+EEEIIIRQfhBBCCKH4IIQQQgjFByGEEEIIxQchhBBCRg/rmXOvGesGmL1gF3Z2WBvxNiGEEBJB6Diyesd+tpABLR+EEEIIGSi1PA/mWBEIIYQQMmbjYxLrDi0fhBBCCBkoNTYBIYQQUjlgXNgmt+1yO8J57N02O++ty+0Rud0qt8coPgghhJDxZFvEdkSIqMC2JeXn/kZuXxPtzldWf3ngRe9/zl6wy87jy+Wa7TLCPi1muxBCCClqHHmrYYWIEhT6fcMGwuPT7cPLX2g98lzHT4Ss3rHfMsVIkpgPig+KD0IIIRtMJbAuHGHsz69oe/xYdOzLV+96/PmQsd9OKj7odiGEEFIltkcIhW0RVog5NqGLS8WE9bPZPSdfKgXIU35v8FpAKD4IIYSMEvMBQiGOFUJvJH9eKgXIjTPnnHDJ2r1P1oMEiAj3IlB8EEIIyZ1ZHyEQFePgFRWTbMbSco41U/uc3P+u8zxT4CnFByGEkMmE1oXtot+dMcNmrDxXze45+aurdz2OlFw/S4cVV5hQfBBCyOiTxLrgJy7m2YRVk5MTwto01d3mprub8Vw4j0XHFp2nF0XrnieFvbgadVRLTFhfkPsLI8RGpAuG4oMQQobLXIh1Ia4VglSMrmCAQNgQDV3BYLw+N2WICv26877pZMP7bLMt1r53v1j7zn1KkIRw/uyeky9cvevxX2T5fhQfhBCSninRX58haXGoKTZjxYTDTM1lXfBaHVzPN5nv2xAbAz/n6Ukx+45zxOQxW8Tytf8Q/u.........完整代码请登录后点击上方下载按钮下载查看