心得笔记

2019-11-16 15:00:50 阅读：229 来源： 互联网

标签：width top 笔记 header position fixed 心得 left

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>

标签：width,top,笔记,header,position,fixed,心得,left
来源： https://www.cnblogs.com/chengxiaofeng/p/11871826.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

心得笔记