路飞导航条
<!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>
