路飞导航条

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>路飞导航案例</title>
    <style>
        body {
            margin: 0;
            height: 3000px;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <style>
        .footer {
            width: 100%;
            height: 120px;
            background-color: rgba(0, 0, 0, 0.8);
        }
    </style>
    <style>
        .header {
            width: 100%;
            background-color: #ccc;
            position: fixed;
        }
        .header-slogan {
            width: 1200px;
            font: normal 14px/36px '微软雅黑';
            color: #333;
            margin: 0 auto;
        }
        .header-nav {
            width: 1200px;
            margin: 0 auto;
            /*background-color: orange;*/
        }
        /*这个css 清除浮动意义不大*/
        .header-nav:after {
            content: "";
            display: block;
            clear: both;
        }
        .header-logo, .header-menu {
            float: left;
        }
        .header-owner {
            float: right;
        }
        .header-logo {
            width: 118px;
            height: 36px;
            background: url("img/header-logo.svg") no-repeat;
        }
        .header-menu {
            margin-left: 40px;
        }
        .header-menu li {
            float: left;
            margin-top: 26px;
            cursor: pointer;
            margin-right: 20px;
        }
        .header-menu li:hover {
            color: #444;
            padding-bottom: 5px;
            border-bottom: 2px solid #444;
        }
        .header-owner {
            padding-top: 26px;
        }
        .active {
            color: #444;
            padding-bottom: 5px;
            border-bottom: 2px solid #444;
        }
    </style>
    <style>
        .body-box {
            width: 1200px;
            height: 2000px;
            margin: 0 auto;
        }
        .box-normal-course { background-color: pink }
        .box-light-course { background-color: deeppink }
        .box-super-course { background-color: hotpink }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <div class="header-slogan">老男孩IT教育集团 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活！</div>
            <div class="header-nav">
                <h1 class="header-logo"></h1>
                <ul class="header-menu">
                    <li :class="{active: page == 'normal'}" @click="togglePage('normal')">免费课</li>
                    <li :class="{active: page == 'light'}" @click="togglePage('light')">轻课</li>
                    <li :class="{active: page == 'super'}" @click="togglePage('super')">学位课</li>
                </ul>
                <div class="header-owner">
                    <div v-if="is_logout">
                        <span>登陆</span> | <span>注册</span>
                    </div>
                    <div v-else>
                        <span>Owen</span> | <span>个人中心</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="body">
            <div class="body-box box-normal-course" v-if="page == 'normal'"></div>
            <div class="body-box box-light-course" v-else-if="page == 'light'"></div>
            <div class="body-box box-super-course" v-else></div>
        </div>

        <div class="footer"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            is_logout: true,
            page: 'normal'
        },
        methods: {
            togglePage(page) {
                this.page = page;
            }
        }
    })
</script>
</html>
路飞导航条

路飞导航条

推荐阅读
