App下載

輕松設(shè)置簡潔自適應(yīng)404頁面案例源碼分享!

軟妹販賣機 2021-08-17 11:55:43 瀏覽數(shù) (2195)
反饋

我們在進行網(wǎng)頁瀏覽的時候相信不少的小伙伴們有遇到過在網(wǎng)頁中報404的錯誤吧!那么今天我們就來說說有關(guān)于:“輕松設(shè)置簡潔自適應(yīng)404頁面案例源碼分享! ”這方面的相關(guān)內(nèi)容分享!

演示圖如下:

HTML代碼片段:

<!DOCTYPE HTML>
<html>
    <head>
        <title>404</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    </head>
    <body>

        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Header -->
                    <header id="header">
                        <div class="logo">
                            <span class="icon fa-diamond"></span>
                        </div>
                        <div class="content">
                            <div class="inner">
                                <h1>404</h1>
                                <p><!--[-->對不起,你要找的這個頁面突然不見了。不過,放心,一切都在我的掌控之中,不會跑多遠!<!--]--></p>
                            </div>
                        </div>
                        <nav>
                            <ul>
                                <li><a href="###">首頁</a></li>
                                <li><a href="###">熱搜</a></li>
                                <li><a href="###">聯(lián)系</a></li>
                                <li><a href="###">關(guān)于</a></li>
                                <!--<li><a href="#elements">Elements</a></li>-->
                            </ul>
                        </nav>
                    </header>

                <!-- Main -->


                <!-- Footer -->
                    <footer id="footer">
                        <p class="copyright">? Untitled. Design: <a >百度</a>.</p>
                    </footer>

            </div>

        <!-- BG -->
            <div id="bg"></div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

    </body>
</html>

圖片&css代碼部分:

鏈接: https://pan.baidu.com/s/18NcQScW6GKshXBKwHabTnA 提取碼: rgaw

那么通過這篇文章相信很多小伙伴們對:“輕松設(shè)置簡潔自適應(yīng)404頁面案例源碼分享! ”這方面也有了不少的了解,希望小編的分享對大家的學習有所幫助!更多有關(guān)于html5這方面的相關(guān)知識我們都能在W3Cschool找到相應(yīng)的內(nèi)容和知識點!


0 人點贊