代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九九乘法表</title>
<style>
.container{
width: 1200px;
margin: 50 px auto;
}
.item{
display: inline-block;
margin: 5px;
padding: 10px 0;
width: 100px;
border: 1px solid #100;
text-align:center;
}
</style>
</head>
<body>
<script>
let Str=`<div class="container">`
for(let i=0;i<9;i++){
for(let j=0;j<=i;j++){
Str+=`<div class="item">${j+1} x ${i+1} =${(j+1)*(i+1)}</div>`
}
Str+=`<br>`
}
Str+=`</div>`
document.write(docStr)
</script>
</body>
</html>
运行结果
注释
1.container
.定义一个具有固定宽度和居中对齐的容器样式。这样设置容器的宽度为1200像素,且水平居中对齐。
2.item
规定元素的显示方式、外边距、内边距、宽度和边框等
3.循环
循环部分生成九九乘法表,通过<br>
来换行。
4.输出
通过document.write()
输出