祈德斌-20201029

1.动画
.box{
    width: 200px;
    height: 200px;
    background: red;
    margin: 0 auto;
    transition:all 3s ease;/*过渡*/
}
.box:hover{
    transform: rotate(360deg);/*旋转*/
    transform:scale(0.7);/*缩放*/
    transform:skew(45deg);/*倾斜*/
    transform:translate(300px);/*平移*/
    transform:matrix(-1,-1,-1,0,-1,1);/*扭曲:两行三列的三角函数矩阵*/
    transform:rotate()
}
overflow:hidden;/*子容器超出父容器的部分隐藏*/
 1.rotateY延y轴旋转
 2.scale(1.5);缩放,>1放大  1>x>0缩小
 3.skew倾斜
 4.translate()平移
 5.matrix()扭曲,其中它的参数是一个两行三列的三角函数矩阵,如transform: matrix(-1,-1,-1,0,1,1)
6 .如果让很多动画同时出现
在同一个transition中用空格将每一个动画的程序分隔开来,如transform: scale(1.2) rotate(360deg) skew(1.5);
盒子模型
 1.margin-top上外边距、margin-bottom下外边距
2.内边距(也叫内填充,当设置了padding时相当于设置的那一块被填充了):padding-top上内边距,最后bigbox的大小等于原设置宽高+padding的px
3.如果是padding:100px 200px 300px 100px(上 右 下 左)
3.如果是padding:100px 200px(上下 左右)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style3.css" />
    </head>
    <body>
        <!--块标签和行级标签的属性转化
            1、块级标签加float(浮动)就有了行级标签不独占一行的特点
            特别注意:使用浮动时,一定外面再加个标签使其嵌套起来,加个容器(标签)包起来
        -->
        <div class="page">
            <div class="header">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="bottom"></div> 
        </div>
    </body>
</html>
*{
    margin: 0;
    padding: 0;
    border: 0;
}
.page{
    width: 600px;
    height: 600px;
    margin: 0 auto;
    border: 2px #dedede solid;
}
.header{
    width: 100%;
    height: 250px;
}
.left{
    width: 200px;
    height: 200px;
    background: red;
    float: left;
    margin: 10px;
}
.right{
    width: 220px;
    height: 220px;
    background: yellow;
    float: right;
    margin: 10px;
}
.bottom{
    width: 600px;
    height: 200px;
    background: cornflowerblue;
    margin: 0 auto;
}

学习心得
今天学习的内容对我们来说很重要,学习起来有一定的难度,但是经过一天的学习我能能更好的完善网页了,我相信随着我每天的积累最终能有一个很好的收获的。

标签

评论

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