<!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>
<!--<h1 style="text-align: center">九九乘法表</h1>
<script language=javascript>
var i,j;
for(i=1;i<10;i++){
for(j=1;j<10;j++){
document.write (" "+i+"*"+j+"="+i*j+" ");
if(i==j) {document.write ("<BR>"); break;}}
}
</script>-->
</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>