心得笔记 | 易学教程

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

标签

position

fixed