• 练习


    用html分别l实现效果:

    一:

    <!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <head>
    <title>Insert title here</title>
    <style type="text/css">
    .aa{
     	50px; height:50px;
     	background-color:pink;
     	float:left;
     	margin-left: 10px; margin-top:10px;
     }
    .bb{clear:left;}
    </style>
    
    </head>
    <body>
    
    <script type="text/javascript">
    
    var count=1;
    for(var i=1;i<=6;i++){
    	for(var j=1;j<=6;j++){
    		document.write("<div class='aa'>"+count+"</div>")
    		count++;
    	}
    	document.write("<div class='bb'></div>")
    }
    </script>
    </body>
    </html>
    

     二:

    <!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <head>
    <title>Insert title here</title>
    <style type="text/css">
    .aa{
     	50px; height:50px;
     	background-color:pink;
     	float:left;
     	margin-left: 10px; margin-top:10px;
     }
    .bb{clear:left;}
    </style>
    
    </head>
    <body>
    
    <script type="text/javascript">
    
    for(var i=1;i<=9;i++){
    	for(var j=1;j<=i;j++){
    		document.write("<div class='aa'>"+i+"*"+j+"="+(i*j)+"</div>")
    	}
    	document.write("<div class='bb'></div>")
    }
    </script>
    </body>
    </html>
    
  • 相关阅读:
    HTML tabIndex 和 accesskey属性
    JS加载顺序
    CSS3 Box Shadow
    CSS中背景的Linear Gradients(线性渐变)
    CSS优先级
    CSS3 圆角(borderradius)
    JavaScript window.location对象
    JsDoc Toolkit
    Javascript标准DOM Range操作
    CSS3 Text Shadow
  • 原文地址:https://www.cnblogs.com/zyn0216/p/7602870.html
Copyright © 2020-2023  润新知