王娟-20201029

<!---修饰背景的常用样式--->
<!--内容滚动背景不动-->
/*background-color: cadetblue/*背景颜色*/;
    background-image: url(../img/de.jpg);
    background-position: -200px -60px;/*数值可改*/
    opacity: 0.2;/*透明度*/
    /*background-size: cover;/*背景图片的大小或者 300px 300px*/
    /*background-repeat: repeat-x;/*背景图片平铺no-repeat   repeat-y*/
    /*background-attachment: fixed;

    width: 200px;
    height: 220px;
    border: 2px greenyellow solid;
    overflow: hidden;/*子容器超出父容器的部分隐藏*/
    /*background: indianred;*/
    margin: 0 auto;
    /*transition:all 3s ;/*过渡background-color*/
    background: url(../img/yin.jpg);
    background-size:190px 230px ;
    border-radius: 100px;
    transform: rotateY(180deg);
    background: url(../img/de.jpg);
    background-position:-120px 0 ;
    animation:change 3s ;
    animation:change/*名称*/ 3s ease 1s /*持续时间*/forwards/*让动画停在最后一帧*/ 
infinite/*播放次数*/ alternate/*交替播放*/ running/*循环播放*/ /*alternate-reverse，*/;
@keyframes change{
    from{
        background: indianred;
    }
    to{
        background: greenyellow;
    }

<!--盒子模型-->
            块级标签和行级标签的属性转换
            1.块级标签当它加了float（浮动）就有了行级标签不独占一行的属性
            特别注意：使用float时，一定在外面加个容器包起来
    
    border: 5px #dedede dashed/*solid*/;
    box-sizing: content-box;/*盒子实际大小*/
    box-shadow: 0px 0px 50px blueviolet inset/*模糊距离盒子阴影*/;
    /*border-radius:50% ;/*圆角*/
    border-top-left-radius:100px ;
    /*padding-top: 100px;
    padding-left: 100px;*/
    padding:100px; /*100px 200px 300px 400px;上右下左*/
    /*margin-top: 100px;
    margin-left: 100px ;*/
    border: 2px #dedede solid;
    float: left;;/*浮动*/
    margin: 20px;
    float: right;
    margin: 20px;
    margin: 0 auto;

心得总结：今天老师讲的内容有点多，虽然会练习但是还是有一定的难度，还是需要慢慢消化，
而且老师讲着讲着速度就会略微有点快。