* { margin:0; padding:0; } img { border:0; } ol,ul,li { list-style:none; } #wasp { width:500px; height:500px; margin:100px auto; border:5px solid #333; background:#fdda9c; position:relative; overflow:hidden; } #Board { width:550px; height:550px; position:absolute; top:-25px; left:-25px; } .cBefore { width:100%; height:100%; position:absolute; background:rgba(0,0,0,0.2); z-index:10; } .cButt { width:100px; height:200px; position:absolute; left:50%; top:50%; margin:-120px 0 0 -90px; background:#fff; padding:20px 40px; } .cButt input { width:100px; height:50px; margin:5px 0; border-radius:5px; } #Board li { width:50px; height:50px; position:relative; float:left; } #Board li::before { content:""; width:100%; position:absolute; border-bottom:1px solid #333; top:50%; left:0; } #Board li::after { content:""; height:100%; position:absolute; border-right:1px solid #333; top:0; left:50%; } #Board li span { display:block; width:46px; height:46px; position:absolute; background:#000000; top:2px; left:2px; border-radius:50%; z-index:9; } #aaaa { width:500px; height:50px; }
一个用JS写的简单五子棋小游戏