1. 页首和页尾如何定住？------使用position:fixed;top:10px;left:0;
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.el-menu {
display: flex;
align-items: center;
justify-content: center;
}
.header img {
position: absolute;
left: 80px;
top: -4px;
width: 118px;
height: 70px;
z-index: 999;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="header">
<div class="header">
<img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">免费课程</el-menu-item>
<el-menu-item index="3">轻课</el-menu-item>
<el-menu-item index="4">学位课程</el-menu-item>
<el-menu-item index="5">智能题库</el-menu-item>
<el-menu-item index="6">公开课</el-menu-item>
<el-menu-item index="7">内部教材</el-menu-item>
<el-menu-item index="8">老男孩教育</el-menu-item>
</el-menu>
</div>
</template>
<template id="footer">
<div class="footer">
<el-menu class="el-menu-demo" mode="horizontal" background-color="black">
<el-menu-item index="1">关于我们</el-menu-item>
<el-menu-item index="2">联系我们</el-menu-item>
<el-menu-item index="3">商业合作</el-menu-item>
<el-menu-item index="4">帮助中心</el-menu-item>
<el-menu-item index="5">意见反馈</el-menu-item>
<el-menu-item index="6">新手指南</el-menu-item>
</el-menu>
</div>
</template>
<script>
let pageHeader = {
template: "#header",
data() {
return {
activeIndex: "1"
}
}
};
let pageFooter = {
template: "#footer"
};
let App = {
template: `
<div>
<div>
<page-header></page-header>
</div>
<div>
<page-footer></page-footer>
</div>
</div>
`,
components: {
‘page-header‘: pageHeader,
‘page-footer‘: pageFooter
}
};
new Vue({
el: "#app",
template: `<app></app>`,
components: {
‘app‘: App
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/chengxiaofeng/p/11871826.html