2017.11.07第五课

来源：互联网发布：阿里云和 aws 对比编辑：程序博客网时间：2024/06/01 23:00

专题：居中和对齐

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);

这里写图片描述

阅读全文

0 0