2021年9月16日
 |  没有评论
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合canvas动画背景的基础布局</title>
    <style>    
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:530px}    
.div-a{ position:absolute; left:30px; top:30px; background:#F00; width:400px; height:100px;z-index:10;}    
/* css注释说明： 背景为红色 */    
.div-b{ position:absolute; left:30px; top:130px; background:#FF0; width:400px; height:200px;z-index:20;}    
/* 背景为黄色 */    
.div-c{ position:absolute; left:30px; top:330px; background:#00F; width:400px; height:100px;z-index:30;}    
/* DIV背景颜色为蓝色 */   

.flexContainer {
  display: flex;
  background-color: gray;
  width: 300px;
  height: 100px;
}
.flexItem {
  width: 80px;
  height: 80px;
}
</style> 
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>

<div class="div-relative">   
<canvas id="myCanvas" width="500" height="530" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<div class="div-a">我背景为红色</div>    
<div class="div-b" id="div1">
    <iframe src="https://amyflash.com" width="400"></iframe>
  <p>您的浏览器不支持 iframes 。</p>
</iframe>
    </div>    
<div class="div-c">
    <div class="flexContainer">
    <div class="flexItem" style="background-color: red" id="b1">a</div>
    <div class="flexItem" style="background-color: blue" id="b2">b</div>
    <div class="flexItem" style="background-color: green" id="b3">c</div>
   </div>
</div>    
</div> 
<script>

$(document).ready(function(){
  $("#b1").click(function(){
   alert("段落被点击了。");
$("iframe").attr("src","https://amyflash.com/?p=2555");
  });
});

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#00fff0";
ctx.fillRect(0,0,500,530);


</script>
</body>
</html>