Newbie_小白
没有都对的别人，也没有全错的自己，至少要有自己的坚持，无关他人、无关外物！
barba 页面渲染

a.css

html, body {
    padding: 0;
    margin: 0
}


ol.menu {
    width: 100%;
    text-align: left;
    padding: 0 !important;
    list-style: none;
    border: 0.1rem solid #ddd;
    border-radius: 0.3rem;
    margin-top: 2rem !important;
    max-width: 40rem;
    margin: 0 auto
}

ol.menu li {
    border-bottom: 0.1rem solid #ddd;
    padding: 0.2rem 0.5rem
}

ol.menu li.active {
    background-color: #F7F7F7
}

ol.menu a {
    display: block
}

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试</title>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
<main class="markdown-body">
    <nav>
        <ol class="menu">
            <li class="">
                <a href="a.html">a页面</a>
            </li>
            <li class="">
                <a href="b.html">b页面</a>
            </li>
            <li class="">
                <a href="c.html">c页面</a>
            </li>
        </ol>
    </nav>

    <div id="barba-wrapper">
        <div class="barba-container homepage">
            <p>首页的内容</p>
        </div>
    </div>

</main>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-73202407-1', 'auto');
    ga('send', 'pageview');

</script>

<script src="js/barba.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>

 

 

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试</title>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
<main class="markdown-body">
    <nav>
        <ol class="menu">
            <li class="">
                <a href="a.html">a页面</a>
            </li>
            <li class="">
                <a href="b.html">b页面</a>
            </li>
            <li class="">
                <a href="c.html">c页面</a>
            </li>
        </ol>
    </nav>

    <div id="barba-wrapper">
        <div class="barba-container homepage">
            <p>A 页面的内容</p>
        </div>
    </div>
</main>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-73202407-1', 'auto');
    ga('send', 'pageview');

</script>
<script src="js/barba.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>

 

posted on 2017-08-17 14:16  Newbie_小白  阅读(222)  评论(0)  编辑  收藏  举报

Copyright © 2024 Newbie_小白
Powered by .NET 8.0 on Kubernetes Powered By博客园