實戰心得筆記

時間 2019-11-24

標籤實戰心得筆記简体版

原文原文鏈接

1. 頁首和頁尾如何定住？------使用position:fixed;top:10px;left:0css

.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>

1. 下圖中的「手機」+「>」如何左右分佈？html

1. a標籤包裹span標籤。分別使用sep1，sep2.vue

<div class="header3">
        <div class="header3_left">
            <ul>
                <!--用a標籤將span標籤包起來-->
                <li><a class="sep1"  href="">手機<span  class="sep2" > > </span></a></li>
                <li><a class="sep1"  href="">電視<span  class="sep2" > > </span></a></li>
                <li><a class="sep1"  href="">筆記<span  class="sep2" > > </span></a></li>
                <li><a class="sep1"  href="">家電<span  class="sep2" > > </span></a></li>
                <li><a class="sep1"  href="">出行<span  class="sep2" > > </span></a></li>
                <li><a class="sep1"  href="">路由<span  class="sep2" > > </span></a></li>
            </ul>
        </div>
 </div>

Css格式‘’python

.header3{
    height:500px;
    width:1220px;
    margin:0 auto;
}

.header3_left{
    position: relative;
    float: left;
    width:20%;
    height:500px;
    background-color: #b0b0b0;  /*背景色爲白色*/
}

ul{              /*1.消除默認的ul格式 */  
    margin:0;
    padding:0;
}

.header3 li{       /*2.li標籤控制位置。字體居中、消除默認的小圓點。*/
    text-align: center;
    list-style-type: none;
    padding:5px;
}

.header3 a{      /*3.消除下劃線，調整字體，字體偏移向左*/
    text-decoration: none;
    font-size: 15px; 
    text-align: left;

}

.header3 .sep1{  /*a標籤置爲塊級標籤*/
    position: relative;
    padding-left:20px;
    color:white;
    height:42px;
    line-height: 42px;
    display: block;
}

.header3 .sep2{
    position:absolute;
    top:12px;
    right:20px;
    font-size: 16px;
    line-height: 16px;
    color:#e0e0e0;
}
.header3 li:hover {
    background-color:orangered ;
}

2. 如何控制照片在div中的大小。element-ui

<div class=」c1」>
         <img src=」」>
</div>

.c1 img{
   Width:50px;
   Height:50px;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。