中国象棋纯CSS版
本站原创:biny 转载请注明出处
先看截图:
![界面截图](https://i-blog.csdnimg.cn/blog_migrate/9aef1babee04051592cf8218cfdd028e.gif)
图一
用html+css实现的中国象棋,本Demo实现的难点是象棋的米字格棋盘,这里用了一种比较变态的作法,不是用图片来实现的,而是用的border边框来模拟实现的,原理请看我的另一篇文章:用div+css模拟表格对角线。另外本模型只用到两张图片,将所有棋子图片合成为一张png图片,采用css sprites技术(相关链接:制作一幅扑克牌系列一---css sprites图片背景优化技术)来减少图片链接数量,不然这么多图,每次都从网络下载,影响速度。本样例大多是采用绝对和相对定位来实现界面的输出。
说是纯css版,可能有点夸张,为了显示的效果,加入了少量的JS,用来控制ie6下png透明背景和便于拖动棋子。本版本只是界面模型,关于控制台的功能,将在下一版本中实现。
兼容性测试:本例在IE6和FF3中测试通过,其它浏览器未作测试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>中国象棋纯CSS版--冰极峰制作(blog地http://www.cnblogs.com/binyong/)</title> <BGSOUND CEP="0" /> <style type="text/css"> /***************************************** 中国象棋纯CSS版0.1版--冰极峰制作 说明:本版本由冰极峰独家制作,首次发表在本博客, 次发布在蓝色论坛,你可以自由使用,如需转载, 请注明出处,以示对作者的尊重。 作者:冰极峰--Biny 博客地址:http://www.cnblogs.com/binyong/ 制作时间:2009.2.7 电子邮箱:szbiny@163.com /*****************************************/ *{margin:0;padding:0;font-size:12px;color:#666;} a:link,a:visited{ text-decoration:none;color:#666;} a:hover{color:#fff;} body{background:#555;} #wrapper{width:800px;height:800px;margin:0 auto;border-left:4px #888 solid;border-right:4px #888 solid; background:#FCC45C url(http://images.cnblogs.com/cnblogs_com/binyong/bg1.jpg);/*棋盘背景色*/ padding-bottom:50px; position:relative;} #corner{position:relative;} #corner em,#corner b,#corner strong,#corner i,#corner span{ display:block; border-top:67px green solid; border-right:67px transparent dotted; width:0; height:0; overflow:hidden; } #corner b{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;} #corner em{border-width:63px;border-top-color:#000;position:absolute;top:0;left:0;} #corner i{border-width:37px;border-top-color:#000;position:absolute;top:0;left:0;} #corner strong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;} #corner span{border-width:33px;border-top-color:#E7BA84;position:absolute;top:0;left:0;} #corner a{ position:absolute; display:block; width:10px; height:10px; font-size:12px;color:#fff;font-weight:bold; text-decoration:none;} #corner a#b1{left:34px;top:3px;} #corner a#b2{left:18px;top:18px;} #corner a#b3{left:3px;top:33px;} html,body{width:100%; height:100%; overflow:visible!important; /*区分ie8和Opera*/ overflow-x:hidden!important;overflow-y:hidden!important; overflow:hidden; margin:0; padding:0} div#body{ position:relative; width:100%; height:100%; overflow-x:auto; overflow-y:scroll; background:#555; cursor:default } div#control{ position:fixed!important; position:absolute; z-index:10; right:20px; top:10px; width:120px; height:210px; background:orange; color:#000; text-align:center; border:8px #FA7B0A outset; } #control h4{font-size:14px;height:30px;line-height:30px;} #control span{display:block;border-top:1px #999 solid;border-bottom:1px #333 solid;padding-top:10px;padding-bottom:10px;margin:0 auto;} #control b{display:block;font-size:0;height:1px;border-bottom:1px #666 solid;overflow:hidden;width:120px;margin:0px auto;} #control strong,#control em{display:block;line-height:26px;height:26px;font-style:normal;} .b_out { border:#401C30 1px solid; padding:4px; font-size:12px; background:#9C4D9C; /*filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#BD5FBA, EndColorStr=#934993); */ cursor:pointer; color:#fff; font-weight:bold; margin-bottom:5px; } .b_over{ border:#401C30 1px solid; padding:4px; font-size:12px; background:#9C4D73; /*filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#934993, EndColorStr=#BD5FBA);*/ cursor:pointer; color:#fff; font-weight:bold; margin-bottom:5px; } /*下面是棋盘样式--------------------------------------------------*/ table{width:560px;border:5px #000 solid;margin:70px auto 0 auto; border-collapse:collapse;} caption{text-indent:-9000px;} td{border:3px #000 solid;height:70px;width:70px;padding:0;margin:0;} /*斜线的应用,用来做米字格*/ /*左到右的斜线*/ .l_r_line,.r_l_line{width:70px;height:70px;background:#000; position:relative;} .l_r_line b{display:block;position:absolute;right:0;top:0; border-left:68px transparent dotted; border-top:68px #E7BA84 solid;width:0;height:0;overflow:hidden;} .l_r_line em{display:block;position:absolute;left:0;top:2px; border-top:68px transparent dotted; border-left:68px #E7BA84 solid;width:0;height:0;overflow:hidden;} /*右到左的斜线*/ .r_l_line{width:70px;height:70px;background:#000; position:relative;} .r_l_line em{display:block;position:absolute;left:0;top:0; border-right:68px transparent dotted; border-top:68px #E7BA84 solid;width:0;height:0;overflow:hidden;} .r_l_line b{display:block;position:absolute;right:0;top:2px; border-top:68px transparent dotted; border-right:68px #E7BA84 solid;width:0;height:0;overflow:hidden;} /*四种角线*/ table span{display:block;position:relative;width:70px;height:70px;} .sharp1,.sharp2,.sharp3,.sharp4{display:block;width:10px;height:10px;border:1px #000 solid; overflow:hidden; position:absolute;} .sharp1{border-left:none;border-top:none;} .sharp2{border-top:none;border-right:none;} .sharp3{border-left:none;border-bottom:none;} .sharp4{border-bottom:none;border-right:none;} .p1{left:56px;top:56px;} .p2{left:3px;top:56px;} .p3{left:56px;top:3px;} .p4{left:3px;top:3px;} /*楚河汉界*/ #mid{height:70px; position:relative;} #mid b,#mid strong{display:block;width:200px;height:70px;line-height:70px;font-size:24px;color:#FF0000;position:absolute;text-align:center;} #mid b{left:40px;} #mid strong{left:340px;} #posbox{width:800px;height:1px;margin:0 auto;position:relative;} /*坐标基础---用来定位幕布*/ .box{ position:absolute; left:110px; top:-758px;/*上距空白*/ width:580px; height:654px; } .box h3{ position:absolute;width:100%;top:-80px;text-align:center;font-size:16px;} .box h3 a:link,.box h3 a:visited,.box h3 a:hover{font-size:16px;} .blog{display:block;width:350px;height:76px; position:absolute;left:250px;bottom:-100px;background:url(http://images.cnblogs.com/cnblogs_com/binyong/blog1.png) no-repeat;} .item{display:block;width:73px;height:73px;line-height:73px;font-size:24px;text-align:center;position:absolute;color:#000;text-indent:-9000px; cursor:pointer;background:url(http://images.cnblogs.com/cnblogs_com/binyong/item.png) no-repeat;} /*棋盘坐标--x轴*/ .x1{left:-34px;} .x2{left:39px;} .x3{left:112px;} .x4{left:185px;} .x5{left:258px;} .x6{left:331px;} .x7{left:404px;} .x8{left:477px;} .x9{left:550px;} /*棋盘坐标--Y轴*/ .y1{top:-35px;}/*首线位置*/ .y2{top:38px;}/*位置*/ .y3{top:112px;}/*位置*/ .y4{top:186px;}/*位置*/ .y5{top:260px;}/*河岸位置*/ .y6{top:330px;}/*河岸位置*/ .y7{top:400px;}/*位置*/ .y8{top:476px;}/*位置*/ .y9{top:548px;}/*倒数第二位置*/ .y10{top:620px;}/*底线位置*/ /*红方*/ .red1{background-position:-364px 0px;} .red2{background-position:-218px 0px;} .red3{background-position:-290px 0px;} .red4{background-position:-71px 0px;} .red5{background-position:0px 0px;} .red6{background-position:-144px 0px;} .red7{background-position:-438px 0px;} /*黑方*/ .black1{background-position:-364px -73px;} .black2{background-position:-218px -73px;} .black3{background-position:-290px -73px;} .black4{background-position:-71px -73px;} .black5{background-position:0px -73px;} .black6{background-position:-144px -73px;} .black7{background-position:-438px -73px;} </style> </head> <body> <div id="control"> <h4>控制器</h4> <strong></strong> <span> <button class="b_out">整理棋盘</button> <button class="b_out">吃 棋</button> <button class="b_out">将 军</button> </span> <strong></strong> <strong>作者:<a href="http://www.cnblogs.com/binyong/" target="_blank">冰极峰</a></strong> <em><a href="mailto:szbiny@163.com">szbiny@163.com</a></em> </div> <div id="body"> <div id="wrapper"> <div id="corner"><strong></strong><em></em><em></em><strong></strong> <a href="http://www.cnblogs.com/binyong/" id="b1">冰</a> <a href="http://www.cnblogs.com/binyong/" id="b2">极</a> <a href="http://www.cnblogs.com/binyong/" id="b3">峰</a> </div> <table> <caption> 中国象棋纯CSS版0.1版,由冰极峰独家制作,转载请注明出处。 博客地址:http://www.cnblogs.com/binyong/ </caption> <tr> <td> </td> <td> </td> <td> </td> <td><div class="l_r_line"><em></em><strong></strong></div></td> <td><div class="r_l_line"><em></em><strong></strong></div></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><span><strong class="sharp1 p1"></strong></span></td> <td><span><strong class="sharp2 p2"></strong></span></td> <td> </td> <td><div class="r_l_line"><em></em><strong></strong></div></td> <td><div class="l_r_line"><em></em><strong></strong></div></td> <td> </td> <td><span><strong class="sharp1 p1"></strong></span></td> <td><span><strong class="sharp2 p2"></strong></span></td> </tr> <tr> <td><span><strong class="sharp2 p2"></strong><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp1 p1"></strong><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp2 p2"></strong></span></td> <td><span><strong class="sharp1 p1"></strong></span></td> <td><span><strong class="sharp2 p2"></strong></span></td> <td><span><strong class="sharp1 p1"></strong></span></td> <td><span><strong class="sharp2 p2"></strong><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp1 p1"></strong><strong class="sharp4 p4"></strong></span></td> </tr> <tr> <td><span><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp3 p3"></strong></span></td> </tr> <tr> <td colspan="8"><div id="mid"><strong>楚 河</strong><strong>汉 界</strong></div></td> </tr> <tr> <td><span><strong class="sharp2 p2"></strong></span></td> <td><span><strong class="sharp1 p1"></strong></span></td> <td><span><strong class="sharp2 p2"></strong></span></td> <td><span><strong class="sharp1 p1"></strong></span></td> <td><span><strong class="sharp2 p2"></strong></span></td> <td><span><strong class="sharp1 p1"></strong></span></td> <td><span><strong class="sharp2 p2"></strong></span></td> <td><span><strong class="sharp1 p1"></strong></span></td> </tr> <tr> <td><span><strong class="sharp1 p1"></strong><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp2 p2"></strong><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp1 p1"></strong><strong class="sharp4 p4"></strong></span></td> <td><span><strong class="sharp2 p2"></strong><strong class="sharp3 p3"></strong></span></td> </tr> <tr> <td><span><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp4 p4"></strong></span></td> <td> </td> <td><div class="l_r_line"><em></em><strong></strong></div></td> <td><div class="r_l_line"><em></em><strong></strong></div></td> <td> </td> <td><span><strong class="sharp3 p3"></strong></span></td> <td><span><strong class="sharp4 p4"></strong></span></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td><div class="r_l_line"><em></em><strong></strong></div></td> <td><div class="l_r_line"><em></em><strong></strong></div></td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> <div id="posbox"> <div class="box"> <h3><a href="http://www.cnblogs.com/binyong/" target="_blank">中国象棋纯CSS制造---冰极峰</a></h3> <span class="item x1 y1 red1 png_bg" id="chess1" style="z-index:1;">车</span> <span class="item x2 y1 red2 png_bg" id="chess2" style="z-index:2;">马</span> <span class="item x3 y1 red3 png_bg" id="chess3" style="z-index:3;">相</span> <span class="item x4 y1 red4 png_bg" id="chess4" style="z-index:4;">仕</span> <span class="item x5 y1 red5 png_bg" id="chess5" style="z-index:5;">将</span> <span class="item x6 y1 red4 png_bg" id="chess6" style="z-index:6;">仕</span> <span class="item x5 y3 red3 png_bg" id="chess7" style="z-index:7;">相</span> <span class="item x7 y3 red2 png_bg" id="chess8" style="z-index:8;">马</span> <span class="item x9 y1 red1 png_bg" id="chess9" style="z-index:9;">车</span> <span class="item x2 y3 red6 png_bg" id="chess10" style="z-index:10;">炮</span> <span class="item x8 y3 red6 png_bg" id="chess11" style="z-index:11;">炮</span> <span class="item x1 y4 red7 png_bg" id="chess12" style="z-index:12;">兵</span> <span class="item x3 y4 red7 png_bg" id="chess13" style="z-index:13;">兵</span> <span class="item x5 y4 red7 png_bg" id="chess14" style="z-index:14;">兵</span> <span class="item x7 y5 red7 png_bg" id="chess15" style="z-index:15;">兵</span> <span class="item x9 y4 red7 png_bg" id="chess16" style="z-index:16;">兵</span> <span class="item x2 y10 black1 png_bg" id="chess17" style="z-index:17;">车</span> <span class="item x3 y8 black2 png_bg" id="chess18" style="z-index:18;">马</span> <span class="item x3 y10 black3 png_bg" id="chess19" style="z-index:19;">相</span> <span class="item x4 y10 black4 png_bg" id="chess20" style="z-index:20;">仕</span> <span class="item x5 y10 black5 png_bg" id="chess21" style="z-index:21;">将</span> <span class="item x6 y10 black4 png_bg" id="chess22" style="z-index:22;">仕</span> <span class="item x7 y10 black3 png_bg" id="chess23" style="z-index:23;">相</span> <span class="item x8 y10 black2 png_bg" id="chess24" style="z-index:24;">马</span> <span class="item x9 y10 black1 png_bg" id="chess25" style="z-index:25;">车</span> <span class="item x5 y8 black6 png_bg" id="chess26" style="z-index:26;">炮</span> <span class="item x8 y8 black6 png_bg" id="chess27" style="z-index:27;">炮</span> <span class="item x1 y7 black7 png_bg" id="chess28" style="z-index:28;">兵</span> <span class="item x3 y7 black7 png_bg" id="chess29" style="z-index:29;">兵</span> <span class="item x5 y7 black7 png_bg" id="chess30" style="z-index:30;">兵</span> <span class="item x7 y7 black7 png_bg" id="chess31" style="z-index:31;">兵</span> <span class="item x9 y7 black7 png_bg" id="chess32" style="z-index:32;">兵</span> <a class="blog" href="http://blog.csdn.net/by20081213" target="_blank"></a> </div> </div> </div> <BGSOUND CEP="1" /> </body> </html>