没有JS,游戏一样玩
第一天上班，着实有点不情愿，还是先来个游戏玩玩吧。
汉诺塔！（什么东东？没听说过看这里）哈哈，是不是有点弱...
其实不然，如果告诉你这个是用Html和CSS写的，没有一点JS，你还觉得它弱吗？看看代码吧
如果看完上面的代码，您还没有晕，说明您很牛.^_^..........
代码
<div style="position: absolute; margin-left: 410px; width: 60px; height: 250px; background-color: #fff">
</div>
<div style="position: absolute; margin-top: 210px; width: 460px; height: 60px; background-color: #fff">
</div>
<div id="hanoi">
<div id="h321000000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk1">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h320100000">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
</div>
<div id="h320100000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h321000000">◀</a><a href="#h320000100">▶</a></div>
</div>
<div id="h310200000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h300210000">▶</a></div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h310000200">▶</a></div>
</div>
<div id="h210300000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h200310000">▶</a></div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h210000300">▶</a></div>
</div>
<div id="h300210000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h310200000">◀</a><a href="#h300200100">▶</a></div>
</div>
<div id="h200310000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h210300000">◀</a><a href="#h200300100">▶</a></div>
</div>
<div id="h100320000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000321000">▶</a></div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100300200">▶</a></div>
</div>
<div id="h000321000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk1">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100320000">◀</a><a href="#h000320100">▶</a></div>
</div>
<div id="h320000100">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h300200100">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h320100000">◀</a></div>
</div>
<div id="h300200100">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h320000100">◀</a></div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h300210000">◀</a></div>
</div>
<div id="h200300100">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000320100">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h200310000">◀</a></div>
</div>
<div id="h000320100">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h200300100">◀</a></div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h000321000">◀</a></div>
</div>
<div id="h310000200">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h300100200">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h310200000">◀</a></div>
</div>
<div id="h300100200">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h310000200">◀</a><a href="#h300000210">▶</a></div>
</div>
<div id="h100300200">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000310200">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h100320000">◀</a></div>
</div>
<div id="h000310200">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100300200">◀</a><a href="#h000300210">▶</a></div>
</div>
<div id="h210000300">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h200100300">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h210300000">◀</a></div>
</div>
<div id="h200100300">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h210000300">◀</a><a href="#h200000310">▶</a></div>
</div>
<div id="h100200300">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000210300">▶</a></div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100000320">▶</a></div>
</div>
<div id="h000210300">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100200300">◀</a><a href="#h000200310">▶</a></div>
</div>
<div id="h300000210">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000300210">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h300100200">◀</a></div>
</div>
<div id="h000300210">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h300000210">◀</a></div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h000310200">◀</a></div>
</div>
<div id="h200000310">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000200310">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h200100300">◀</a></div>
</div>
<div id="h000200310">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h200000310">◀</a></div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h000210300">◀</a></div>
</div>
<div id="h100000320">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000100320">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h100200300">◀</a></div>
</div>
<div id="h000100320">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100000320">◀</a><a href="#h000000321">▶</a></div>
</div>
<div id="h000000321">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk1">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h000100320">◀</a></div>
</div>
</div>
</div>
<div style="position: absolute; margin-top: 210px; width: 460px; height: 60px; background-color: #fff">
</div>
<div id="hanoi">
<div id="h321000000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk1">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h320100000">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
</div>
<div id="h320100000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h321000000">◀</a><a href="#h320000100">▶</a></div>
</div>
<div id="h310200000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h300210000">▶</a></div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h310000200">▶</a></div>
</div>
<div id="h210300000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h200310000">▶</a></div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h210000300">▶</a></div>
</div>
<div id="h300210000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h310200000">◀</a><a href="#h300200100">▶</a></div>
</div>
<div id="h200310000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h210300000">◀</a><a href="#h200300100">▶</a></div>
</div>
<div id="h100320000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000321000">▶</a></div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100300200">▶</a></div>
</div>
<div id="h000321000">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk1">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100320000">◀</a><a href="#h000320100">▶</a></div>
</div>
<div id="h320000100">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h300200100">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h320100000">◀</a></div>
</div>
<div id="h300200100">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h320000100">◀</a></div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h300210000">◀</a></div>
</div>
<div id="h200300100">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000320100">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h200310000">◀</a></div>
</div>
<div id="h000320100">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h200300100">◀</a></div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h000321000">◀</a></div>
</div>
<div id="h310000200">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h300100200">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h310200000">◀</a></div>
</div>
<div id="h300100200">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h310000200">◀</a><a href="#h300000210">▶</a></div>
</div>
<div id="h100300200">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000310200">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h100320000">◀</a></div>
</div>
<div id="h000310200">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100300200">◀</a><a href="#h000300210">▶</a></div>
</div>
<div id="h210000300">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h200100300">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h210300000">◀</a></div>
</div>
<div id="h200100300">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h210000300">◀</a><a href="#h200000310">▶</a></div>
</div>
<div id="h100200300">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000210300">▶</a></div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100000320">▶</a></div>
</div>
<div id="h000210300">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100200300">◀</a><a href="#h000200310">▶</a></div>
</div>
<div id="h300000210">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000300210">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h300100200">◀</a></div>
</div>
<div id="h000300210">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk3">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk2">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h300000210">◀</a></div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h000310200">◀</a></div>
</div>
<div id="h200000310">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000200310">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h200100300">◀</a></div>
</div>
<div id="h000200310">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h200000310">◀</a></div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h000210300">◀</a></div>
</div>
<div id="h100000320">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px;">
<a href="#h000100320">▶</a></div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h100200300">◀</a></div>
</div>
<div id="h000100320">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk1">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons x2" style="margin-top: -250px">
<a href="#h100000320">◀</a><a href="#h000000321">▶</a></div>
</div>
<div id="h000000321">
<div class="base">
</div>
<div class="stick1">
</div>
<div class="stick2">
</div>
<div class="stick3">
</div>
<div style="margin-left: 60px; margin-top: -72px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 171px; margin-top: -250px;">
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
<div class="disk0" style="visibility: hidden">
</div>
</div>
<div style="margin-left: 282px; margin-top: -250px;">
<div class="disk1">
</div>
<div class="disk2">
</div>
<div class="disk3">
</div>
</div>
<div class="buttons x1" style="margin-top: -180px; visibility: hidden;">
</div>
<div class="buttons" style="margin-top: -250px; visibility: hidden;">
</div>
<div class="buttons x3" style="margin-top: -250px">
<a href="#h000100320">◀</a></div>
</div>
</div>
我也感叹一下Html/CSS的魅力！
别看内容多其实原理很简单，就是把所有情况都用html写出来，然后根据锚点跳动或隐藏。如果感兴趣请仔细研究源码。
上面的这个只是三个塔，如果是真正的汉诺塔，代码该是怎样？我不敢往下想了...您呢？
参考：http://www.romancortes.com
作者：gudao119
出处：https://www.cnblogs.com/gudao119/archive/2010/02/21/1670629.html
版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述