中国象棋纯CSS版--冰极峰

最新推荐文章于 2022-10-27 09:54:38 发布

weixin_34401479

最新推荐文章于 2022-10-27 09:54:38 发布

阅读量220

点赞数

文章标签： xhtml

中国象棋纯CSS版

本站原创：biny 转载请注明出处

先看截图：

图一

用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> <button class="b_out">整理棋盘</button> <button class="b_out">吃　　棋</button> <button class="b_out">将　　军</button> 作者：<a href="http://www.cnblogs.com/binyong/" target="_blank">冰极峰</a> <a href="mailto:szbiny@163.com">szbiny@163.com</a> </div> <div id="body"> <div id="wrapper"> <div id="corner"> <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"></div></td> <td><div class="r_l_line"></div></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td></td> <td> </td> <td><div class="r_l_line"></div></td> <td><div class="l_r_line"></div></td> <td> </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8"><div id="mid">楚　　　河汉　　　界</div></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td> </td> <td><div class="l_r_line"></div></td> <td><div class="r_l_line"></div></td> <td> </td> <td></td> <td></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td><div class="r_l_line"></div></td> <td><div class="l_r_line"></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> 车 马 相 仕 将 仕 相 马 车 炮 炮 兵 兵 兵 兵 兵 车 马 相 仕 将 仕 相 马 车 炮 炮 兵 兵 兵 兵 兵 <a class="blog" href="http://blog.csdn.net/by20081213" target="_blank"></a> </div> </div> </div> <BGSOUND CEP="1" /> </body> </html>

weixin_34401479

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
中国象棋纯CSS版--冰极峰

中国象棋纯CSS版本站原创：biny 转载请注明出处先看截图：图一用html+css实现的中国象棋，本Demo实现的难点是象棋的米字格棋盘，这里用了一种比较变态的作法，不是用图片来实现的，而是用的border边框来模拟实现的，原理请看我的另一篇文章：用div+css模拟表格对角线。另外本模型只用到两张图片，将所有棋子图片合成为一张png图片，采用...
复制链接

扫一扫