##CSS和JS的基础常识

<!--引入CSS文件-->

<link rel="stylesheet" type="text/css" href="css/index.css"/>

*{
    padding:0;<!--填充:0；--> 

    margin:0;<!-- 边距:0；-->

}
#app{
    position:absolute;
    top:50%;
    left:50%;
    margin:-300px 0 0 -200px;
    width:400px;
    height: 600px;
    background:rgba(0,0,0,0.1);
    box-shadow:10px 10px 20px rgba(0,0,0,0.5);<

}

./*

位置:绝对；
最高:50%；
左:50%；
边距:-300像素0 0-200像素；
宽度:400像素；
高度:600像素；
背景:rgba(0，0，0，0.1)；
箱形阴影:10px 10px 20px rgba(0，0，0，0.5)；*/

.head{
    top:0;
    height:50px;
    line-height: 50px;
    background:#31C27C;
    color:#fff;
    text-align:center;
    font-size:1.2em;
    letter-spacing:5px

/*

头部
top:0；
高度:50px
行高:50px
背景:# 31C27C
颜色:#fff。
文本对齐:居中；
字体大小:1.2em
字母间距:5px
}

*/.

logo{
    position: absolute;
    top:12px;
    left:80px;
    display: inline-block;
    width:27px;
    height: 27px;
    background: url(../img/logo.png) no-repeat;
    background-size: 156px 27px;
    animation:cycle 3s infinite linear;

/*

位置:绝对；
顶部:12px
左侧:80px
显示:内嵌块；
宽度:27px
高度:27px
背景:url(../img/logo.png)不重复；
背景尺寸:156像素27像素；
动画:3s循环无限线性；

*/