2017.11.07第五课-CSDN博客

本文链接：https://blog.csdn.net/gbb930920/article/details/78469279

专题：居中和对齐

1.margin设置区块元素水平居中

margin:0 auto;设置左右外边距的大小，控制元素的水平居中。

<style>
            .center{
                margin: 20px auto;
                width: 600px;
                border: 3px solid green;
                text-align: center;
            }
        </style>
    <body>
        <div class="center">
        <p>使用margin进行元素的居中</p>
        </div>
    </body>

注：width不能设置为100%，是没有效果的。

2.position属性设置元素的左右对齐

<style>
        .right{
            position: absolute;
            right: 0;
            width: 300px;
            border: 3px solid pink;
            padding: 10px;
            z-index: 0;
        }
    <style>
    <body>
        <div class="right">
        <p>我是右对齐的区块</p>
        </div>
    </body>
</html>

3.float属性设置左右对齐

<sty>
        .right1{
            float: right;
            width: 300px;
            border: 3px solid purple;
            padding: 10px;
        }
    </head>
    <body>
        <div class="right1">
        <p>我是浮动右对齐的区块</p>
       </div>
    </body>
</html>

4.padding属性设置水平垂直居中

<style>
       .padCenter{
            padding: 70px 0;
            border: 3px dotted yellow;
            text-align: center;
        }
</style>
<body>
    <div class="padCenter">
    <p>我是用padding垂直居中的元素</p>
    </div>
</body>

5.line-height属性设置水平垂直居中

<style>
       .lineCenter{
            line-height:300px;
            border: 3px solid #33ff33 ; 
            height: 300px;
        }
    </style>
    <body>
        <div class="lineCenter">
        <p>我是利用行高进行水平居中的元素</p>
        </div>
    </body>
</html>

6.绝对定位和transform属性设置水平垂直居中

<style>
   .poCenter{
        border: 3px solid #ff88c2;
        height: 200px;
        position: relative;
    }
    .poCenter p{
        position: absolute;
        top: 50%;
        left: 50%;
        /*对水平垂直居中进行修正*/
        transform:translate(-50%,-50%);
    }
</style>
<body>
    <div class="poCenter">
    <p>我是利用绝对定位进行水平垂直居中的元素</p>
    </div>
</body>

CSS3边框

1.圆角边框

border-radius :用于指定圆角边框的圆角半径。
如指定1个参数，则4个圆角都使用该长度作为半径。
如指定2个参数，则第一个参数作为左上角和右下角的半径，第二个参数作为右上角和左下角的半径。
如指定3个参数，第一个参数作为左上角的半径，第二个参数作为右上角和左下角的半径，第三个参数作为右下角的半径。

<style>
    div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:300px;
    border-radius:25px;
}
</style>

<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>

</body>

2.边框阴影

box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。
第一个参数：控制阴影在水平方向的偏移。
第二个参数：控制阴影在垂直方向的偏移。
第三个参数：控制阴影的模糊程度。
第四个参数：控制阴影的缩放程度。
第五个参数：改属性值控制阴影的颜色。

<style> 
    div
    {
        width:300px;
        height:100px;
        background-color:yellow;
        box-shadow: 20px 10px 100px 100px #888888;
    }
    </style>
    </head>
    <body>

    <div></div>

</body>

动画

1.渐变动画

transition动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。
第一个参数：指定对哪个HTML元素进行处理。
第二个参数：定义持续时间。
第三个参数：指定渐变的速度。（有多个可用的属性值，请完成自学）
第四个参数：指定延迟时间。

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        transition:width 2s;
    }
    div:hover
    {
        width:300px;
    }
</style>

<body>
    <div></div>
</body>

2.Animation动画

annimation动画提供了更灵活的制作动画的方法。animation是一个符合属性，有5个参数：
第一个参数：指定动画的名称。
第二个参数：指定动画的持续时间。
第三个参数：指定动画的变化速度。
第四个参数：指定动画延迟多久开始执行。
第五个参数：指定动画循环执行的次数。

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;

    }

    @keyframes myfirst
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }

</style>

<body>

    <div></div>

</body>

课后作业

主页侧边栏制作
部分代码：

.sidebar{
  background-color:#CC9933;
  position:fixed;
  width:200px;
  top:0;
 right:-300px;
  bottom:0;
  padding:20px 0;
  transition:right 2s;
}
.sidebar ul{
  margin:0;
  padding:0;
  list-style:none;
}
.sidebar li a{
  color:pink;
  text-decoration:none;
  padding:10px 30px;
  display:inline-block;
  width:100%;
}
.sidebar li a:hover{
  background-color:gray;
}
.mask{
 display:none;
 position:fixed;
 top:0;
 bottom:0;
 right:0;
 left:0;
 background-color:rgba(0,0,0,0.3);
}
.picimg{
width:45px;
height:45px;
border-radius:50px;
border:2px solid #eee;
}
.pic{
 float:right;
 position:relative;
 right:15px;
 top:1px;

}

var sidebar= $('.sidebar');
var mask= $('.mask');
var sidebar_trigger= $('.picimg');

function showSidebar(){
 mask.fadeIn();
 sidebar.css('right',0);

}
function hideSidebar(){
 mask.fadeOut();
 sidebar.css('right',-sidebar.width());

}
sidebar_trigger.on('click',showSidebar);
mask.on('click', hideSidebar);

这里写图片描述