周仁敏-2020-10-30

知识总结

    （回顾）
                           动画        悬停的时候能选到（放在类选择器）
                                    transform;all 3s ease;/*过度*/
                                    transform;10s ease-in 3s;/*过度*/
                                    transform;background  3s ease-in 3s;/*过度*/
                                    border:2px yellow solid;
                                   /*background:url（../img/u.jpg);
                                   overfiow：hidden；/*子容器超出父容器的部分隐藏*/
                                   background-size:190px 230px
                            .box :hover
                                   background:url(../img/u.jpg)                                  
                                   background-position:-120:0;
                                     transform:rotate  x/z/y(360deg);/*旋转*/   
                                     transform:scale(数字);/*缩放*/    
                                     transform:skew(45deg);/*倾斜*/   （-45）
                                     transform:translate(300px);/*平移*/        
                                     transform:matrix(-1，-1，-1,0,-1,1);/*扭曲；两行三列的三角函数矩阵*/              
 （今日总结）一、定位
                         1、position: sticky;/*定位：粘性  此为粘性定位*/
                         2、position: relative;*//*相对定位 
                         3、position: absolute;*//*绝对定位 
                         4、position: fixed;/*固定位置*/
                            JavaScript：void（0）——空链接
                     
                    *{
          margin: 0;
           padding: 0;
           border: 0;
                      }
                       /*整个页面*/
                      .page{
          width: 100%;
          /*height: auto;自动调高*/
          height: auto;
                     }
                  /*页眉*/
                   .header{
       width: 100%;
       height: 120px;
                   }
                  /*导航栏*/
                  .naver{
    width:100%;
    height:36px;
    border-bottom: 1px #dedede solid;
    border-top: 1px #dedede solid;/*边框*/
    position: sticky;/*定位：粘性  此为粘性定位*/
    top:0px;/*定位条件，此处是高度为零是条件 一定要给*/
    }
               /*主内容区*/
               .main{
    width: 100%;
    height: 800px;
    /*position: relative;*//*相对定位  子绝对父相对 如果子容器有绝对定位，父容器一定要有相对定位！！！*//*知识点1*/
               }
               /*广告*/
               .adv{
    width: 60px;
    height: 250px;
    /*position: absolute;*//*绝对定位 子绝对父相对 如果子容器有绝对定位，父容器一定要有相对定位！！！然后给子容器定位条件*//*知识点1*/
    position: fixed;/*固定位置*//*如果给了fixed则脱离原文档流，此处相当于与主内容区脱离*/
    top: 100px;
    right: 0px;/*定位条件*/
    
               }
               /*页脚*/
               .footer{
    width: 100%;
    height: 100px;
               }
               /*测试样式*/
               .bg{
    background: red;
               }/*达到想要效果可以删除*/
                   <link rel="stylesheet" href="../css/new_file.css" />
        <div class="page"><!---css内的.page .bg同时应用于其--->
            <!---页眉--->
            <div class="header" ></div>
            <!---导航栏--->
            <div class="naver"></div>
            <!---网页主内容区--->
            <div class="main">
                <!---广告--->
                <div class="adv bg"></div>
            </div>
            <!---页脚--->
            <div class="footer bg"></div>
        </div>

学习心得
今天的实训内容有点难，感觉很难做出来，我也很努力的在学习，今天学了很多有趣的知识，我很喜欢今天的内容
我觉得制作网站很有意义，也许有一天我的工作就是这个，所以我会好好学的，曾经的梦想确实是去腾讯公司，所以对
于我来说这个实训是我必须掌握的，我没有错过任何学习的机会，也在不断发现问题和解决问题的过程中学了很多知识，
这个实训让我觉得很充实，比前几次的更有趣一些，动画的制作感觉很好玩，明天的实验应该会更有趣，对这一方面
我比较有兴趣，我会好好学的，加油！