大螃嗨

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>下图是一个9*9的乘法口诀表，完全用算法生成的，请用javascript完成生成一个下图的乘法口诀表，要求和图片一模一样，注意边框，注意字体，注意一切细节，不允许使用table。</p>
    <p>背景颜色：#00ffe6</p>
    <p>边框颜色：#E2E2E2</p>
</div>
<script>
    document.write("<div class='box'>");		//最外层div
    for (var i=1; i<=9; i++) {			//行
        document.write("<div>");
        for (var j=1; j<=i; j++) {		        //列
            document.write("<span class='column'>"+ i + "×" + j + "=" + i*j + "</span>");
        }
        document.write("</div>");
    }
    document.write("</div>");
</script>
</body>
</html>

style.css

.box {
    text-align: center;
}
.column {
    display: inline-block;
    width: 51px;
    height: 17px;
    font-size: 12px;
    border: 1px solid #E2E2E2;
    background-color: #00ffe6;
    margin-right: -1px;
    margin-bottom: -1px;
    padding: 5px 10px;
}