CSS3 Grid技术与第三方CSS3 Animate 技术综合演练

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid  And Animate Show</title>
<link rel="stylesheet" type="text/css" href="animate.min.css">
<style type="text/css">
*{
    margin:0;
}
html,body{
    height:100%;
}
.container {
      height:100%;
      display: grid;         
      grid-template-columns:repeat(8,1fr);
      grid-template-rows: repeat(8,1fr);
}
.a{
    background-color:red;
    border:10px solid blue;   
    grid-row-start: 1;
    grid-column-start: 1;    
    grid-row-end: 2;
    grid-column-end: 2;    
    margin:5px;        
}
.d{
    background-color:red;
    border:10px solid blue;      
    grid-row-start: 1;
    grid-column-start: 7;    
    grid-row-end: 2;
    grid-column-end: 9;    
    margin:5px;        
}

.b{
    background-color:red;
    border:10px solid blue;     
    grid-row-start: 7;
    grid-column-start: 1;    
    grid-row-end: 9;
    grid-column-end: 3;    
    margin:5px;        
}

.c{
    background-color:red;
    border:10px solid blue;     
    grid-row-start:6;
    grid-column-start:7;    
    grid-row-end:9;
    grid-column-end: 9;    
    margin:5px;        
}
.center{    
    border:2px solid #CCC;
    padding:5px;
    grid-row-start:4;
    grid-column-start:4;    
    grid-row-end:6;
    grid-column-end: 6;    
    background-image:url(http://doc.exesoft.cn/bg-view.jpg);
    background-size:100% 100%;    
    box-shadow: 10px 10px 5px #888888;    
}
</style>
</head>
<body>
<div class="container">
    <div class="a animated bounceInLeft">A</div>
    <div class="b animated rotateInDownLeft">B</div>
    <div class="c animated bounceInLeft ">C</div>
    <div class="d animated rotateInDownLeft">D</div>
    <div class="center animated bounceInLeft">Center</div>
</div>
</body>
</html>

 

课后作业:

1.复制上述代码,预览查看效果。

2.读懂上述代码。

A
B
C
D
Center

CSS3 Grid技术与第三方CSS3 Animate 技术综合演练

上一篇:快速找出网站中可能存在的XSS漏洞实践(一)


下一篇:HTML禁止选中文本