周仁敏-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>

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1