您的位置：首页 > Web前端 > HTML5

html5 css 写九九乘法表加动画

2017-07-20 11:21 190 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航