11.07笔记整理、作业及学习心得

来源：互联网发布：淘宝宝贝首图制作教程编辑：程序博客网时间：2024/06/16 07:17

1、居中和对齐

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

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

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

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

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

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            position: absolute;            right: 0;            width: 300px;            border: 3px solid pink;            padding: 10px;            z-index: 0;        }    </style> </head> <body>    <div class="right">        <p>我是右对齐的区块</p>    </div> </body></html>

2、float属性设置左右对齐

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            float:right;            width: 300px;            border: 3px solid pink;            padding: 10px;        }    </style> </head> <body>    <div class="right">        <p>我是浮动右对齐的区块</p>    </div> </body></html>

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

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            border: 3px solid pink;            padding: 60px 0;            text-align:center;        }  </style> </head> <body>    <div class="right">        <p>我是利用padding属性垂直居中的区块</p>    </div> </body></html>

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

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            height:300px;            border: 3px solid pink;            padding: 60px 0;            text-align:center;            line-height:300px;        }  </style> </head> <body>    <div class="right">        <p>我是利用行高水平居中的区块</p>    </div> </body></html>

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

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            height:300px;            border: 3px solid pink;            position:relative;        }        .right p{            position:absolute;            top:50%;            left:50%;            transform:translate(-50%,-50%);        }  </style> </head> <body>    <div class="right">        <p >我是利用行高水平居中的区块</p>    </div> </body></html>

2、CSS3边框

2.1 圆角边框

border-radius :用于指定圆角边框的圆角半径。

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

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            width:500px;            border: 3px solid pink;            padding:10px 30px;            border-radius:30px;        }  </style> </head> <body>    <div class="right">        <p>利用border-radius属性设置元素圆角边框</p>    </div> </body></html>

2.2 边框阴影

box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。

第一个参数：控制阴影在水平方向的偏移。
第二个参数：控制阴影在垂直方向的偏移。
第三个参数：控制阴影的模糊程度。
第四个参数：控制阴影的缩放程度。
第五个参数：改属性值控制阴影的颜色。

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            width:500px;            height:300px;            padding:10px 30px;            box-shadow:30px 10px 100px 100px #333;        }  </style> </head> <body>    <div class="right">        <p>利用box-shadow属性设置元素边框阴影</p>    </div> </body></html>

3、动画

3.1 渐变动画

transition动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。

第一个参数：指定对HTML元素哪个部分进行处理。
第二个参数：定义持续时间。
第三个参数：指定渐变的速度。
第四个参数：指定延迟时间。

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            width:100px;            height:150px;            padding:10px 30px;            border:2px solid red;            background-color:#333;            border-radius:0 100px 100px 0;            transition:width 2s;        }        .right:hover{            width:500px;        }  </style> </head> <body>    <div class="right">        <p>利用transition属性设置渐变动画</p>    </div> </body></html>

3.2 Animation动画

animation动画是更加灵活的制作动画的方法。animation是一个复合属性，总有5个参数：

第一个参数：指定动画的名称。
第二个参数：指定动画的持续时间。
第三个参数：指定动画的变化速度。
第四个参数：指定动画延迟多久开始执行。
第五个参数：指定动画循环执行的次数。

<html> <head> <meta charset="UTF-8">  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style tyle="text/css">        .right{            width:100px;            height:150px;            padding:10px 30px;            border:2px solid red;            background-color:#333;            border-radius:0 100px 100px 0;            animation:myfirst 0.5s;        }        @keyframes myfirst{            0% {width:100px;}            25% {width:200px;}            50% {width:300px;}            75% {width:400px;}            100% {width:500px;}        }  </style> </head> <body>    <div class="right">        <p>利用animation属性设置渐变动画</p>    </div> </body></html>

11.07作业

完成首页侧边栏的制作。
（1）、html部分

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Coding Coffee</title>  <link type="text/css" rel="stylesheet" href="./css/shop.css"> </link> </head> <body>    <div class="navigator">        <ul>            <li><a href="./html/list.html">产品列表</a></li>            <li><a href="./html/shoplist.html">分店列表</a></li>            <li><a href="./html/Join Us.html">欢迎加入我们</a></li>            <li><a href="./html/order.html">网上预订</a></li>            <li class="pic"><img class="userPic" src="./img/c12.jpg"></li>            <div class="clear"></div>        </ul>    </div>    <div class="ad">        <img src="./img/c10.jpg">    </div>    <div class="index">        <h1 style="color:blue">欢迎光临Coding Coffee</h1>        <img src="./img/c1.jpg">        <p>敬请<span>关注</span>我们定期的<a href="./html/list.html">产品列表</a>，<br>          <b>Coding Coffee</b>是一家只对<strong>程序员</strong>开放的<em>互联网咖啡馆</em>。        </p>        <p>        请关注我们的<a href="./html/shoplist.html">分店列表</a>!        </p>        <p>网络招聘：<a href="./html/Join Us.html">欢迎加入我们！</a></p>         <p><a href="./html/order.html">网上预定</a></p>    </div>    <div class="mask"></div>    <div class="sidebar">        <ul>            <li><a href="">我的咖啡吧</a></li>            <li><a href="">购物车</a></li>            <li><a href="">Coding Coffee金融</a></li>            <li><a href="">收藏</a></li>            <li><a href="">消息</a></li>        </ul>    </div>    <script type="text/javascript" src="js/jquery.js"></script>    <script type="text/javascript" src="js/main.js"></script> </body></html>

（2）、css部分

        body{            margin:0;        }        h1{            color:yellow;font-size:60px;            /*            border:3px;            border-style:solid;            border-color:red;            */            margin:30px;            padding:50px;        }        .navigator ul{                  list-style-type:none;            background-color:#333;            margin:0px;            padding:0px;        }        .navigator ul a{            display:block;            float:left;            padding:18px 18px;            text-decoration:none;            color:white;        }        .navigator ul a:hover{            background-color:#ccc;        }        .navigator .userPic{            width:45px;            height:45px;            border-radius:45px;            border:2px solid #eee;        }        .navigator .pic{            float:right;            position:relative;            top:5px;            right:5px;        }        .clear{            clear:both;        }        .ad{            position:fixed;            left:50px;            top:100px;        }        .index{            text-align:center;        }        body{            background-image:url('../img/c3.jpg');            background-repeat:no-repeat;            background-attachment:fixed;            background-position:center center;            background-size:100% 100%;            /*background-color:#cccccc;*/        }        .index a:link{color:green;text-decoration:none;}        .index a:visited{color:red;text-decoration:none}        .index a:hover{color:yellow;text-decoration:underline;}        .index a:active{color:blue;text-decoration:underline;}        .sidebar{            position:fixed;            width:250px;            top:0;            right:-250px;            bottom:0;            padding:30px 0;            background-color:#333;            transition:right 2s;        }        .sidebar ul{            list-style-type:none;            margin:0;            padding:0;        }        .sidebar ul a{            text-decoration:none;            color:#ffffff;            padding:15px 30px;            display:inline-block;            width:100%;        }        .sidebar li a:hover{            background-color:#ccc;        }        .mask{            display:none;            position:fixed;            top:0;            bottom:0;            left:0;            right:0;            background-color:rgba(0,0,0,0.3);        }

（3）、js部分

var sidebar=$('.sidebar');var mask=$('.mask');var sidebar_trigger=$('.pic');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);

11.07学习心得

今天学习了几种设置元素垂直居中、水平居中以及垂直水平居中的方法！还有如何设置利用border-radius属性设置圆角边框、利用box-shadow属性设置边框阴影。初步认识了css中制作动画的transition和animation两种属性，现在对每种属性的参数值记忆不牢固，需要多加练习。

阅读全文

0 0