中间宽度固定,两边自适应

最新推荐文章于 2022-05-17 16:36:47 发布

LPLIFE

最新推荐文章于 2022-05-17 16:36:47 发布

阅读量533

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/LPLIFE/article/details/83686403

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

小白

<!DOCTYPE html>

<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>Document</title>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
        }

        .not-found {
            display: -webkit-inline-box;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .not-found-data {
            width: 280px;
            margin-left: 48px;
            height: 244px;
        }

        .not-found-img {
            width: 340px;
            margin-right: 48px;
            height: 244px;
        }

        .data-f {
            width: 170px;
            height: 135px;
            font-size: 96px;
            color: #49555E;
        }

        .data-s {
            width: 280px;
            height: 28px;
            font-size: 20px;
            color: #999999;
        }

        .data-s span {
            height: 28px;
            line-height: 28px;
        }

        .back-home {
            top: 20px;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="not-found">
        <div class="not-found-img">
            <img src="./png-404.png">
        </div>
        <div class="not-found-data">
            <div class="data-f">404</div>
            <div class="data-s"><span>非常抱歉,您访问的页面不存在</span></div>
            <div class="back-home">
                <button class="btn btn-primary btn-lg" ng-click="vm.back()">返回首页</button>
            </div>
        </div>
    </div>

</body>

</html>

LPLIFE

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
中间宽度固定,两边自适应

小白&lt;!DOCTYPE html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X-UA
复制链接

扫一扫