html5 css 写九九乘法表加动画

来源：互联网发布：简述什么是波士顿矩阵编辑：程序博客网时间：2024/06/08 14:44

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day-7</title>
<style type="text/css">
table{
width: 600px;
cellspacing:5px;

}
table td{
border: #000 #B9181A 2px solid;
text-align: center;

border-radius: 25px;
border-spacing: 5px;
cellspacing:5px;

}
table tr td {
color: #2D0DF9;

background-color: gold;

-webkit-border-radius: 15px;
transition:transform 3s;
}
#div1{
background-color: darkgoldenrod;
width: 600px;
height: 200px;
border-radius: 25px;

}

table tr td:hover {
transform: rotate(360deg);
background-color: gold;
}
table {
border-spacing: 15px;

}
#h3{
text-align: center;
font-family: Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif;
color: blue;
font-size: 20px;
}
#br{
text-align: right;
font-family: Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif;
color: #000000;

}

</style>

</head>

<body background="images/img1.jpg">
<table cellpadding="12">
<caption><h1>九九乘法表</h1></caption>
<script type="text/javascript">
for(var x = 1;x<=9;x++)
{
document.write("<tr>");
for(var y = 1; y <= x;y++){
document.write("<td>"+y+"x"+x+"="+y*x+"</td>");
}
document.write("</tr>");
}
</script>
</table>
<div class="div">
<h1>学习心得</h1>
<div id="div1">
<h3 id="h3">一分耕耘，一分收获</h3>
<br>今天学习了表格，还自己打了一个九九乘法表，还加了动画，感觉还是很有收获。。。。
<div id="br"><br>2017-7-19
<br>Sunny
</div>
</div>

</div>
</body>
</html>

阅读全文

0 0