CSS浏览器前缀、JavaScript简介、机试

浏览器样式前缀：

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms-  兼容IE浏览器

-moz-  兼容firefox

-o-    兼容opera

-webkit-  兼容chrome 和 safari

JavaScript：

一个完整的javascript实现应该由以下三个部位构成：

ECMAScript、DOM和BOM

控制浏览器弹出一个警告框：、

alert（"这是一个警告"）；

让计算机在页面输出一个内容：

document.write（"这是一段内容"）；

向控制台输出一个内容

console.log（"这是一段控制台内容"）；

机试：

yaobai.html：

loading...

yaobai.css：

.box{

width: 600px;

height: 200px;

border: 1px solid #000;

margin: 50px auto 0;

margin-top:300px;

}

.box1{

width: 60px;

height: 70px;

background-color: red;

float: left;

margin-top: 50px;

margin-left: 30px;

border-radius:15px ;

animation: moving 2s  infinite  0ms;

}

.box2{

width: 60px;

height: 70px;

background-color: green;

float: left;

margin-top: 50px;

margin-left: 60px;

border-radius:15px ;

animation: moving 2s  infinite  100ms;

}

.box3{

width: 60px;

height: 70px;

background-color: pink;

float: left;

margin-top: 50px;

margin-left: 60px;

border-radius:15px ;

animation: moving 2s  infinite  200ms;

}

.box4{

width: 60px;

height: 70px;

background-color: yellowgreen;

float: left;

margin-top: 50px;

margin-left: 60px;

border-radius:15pxx;

animation: moving 2s  infinite  300ms;

}

.box5{

width: 60px;

height: 70px;

background-color: skyblue;

float: left;

margin-top: 50px;

margin-left: 60px;

border-radius:15px;

animation: moving 2s  infinite  400ms;

}

.ld{

padding-top: 170px;

text-align: center;

}

@keyframes moving {

0%{

transform:scaleY(1);

}

50%{

transform: scaleY(2);

}

100%{

transform: scaleY(1);

}