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

中国象棋纯CSS版


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


 先看截图:

中国象棋纯CSS版--冰极峰_第1张图片

图一 

用html+css实现的中国象棋,本Demo实现的难点是象棋的米字格棋盘,这里用了一种比较变态的作法,不是用图片来实现的,而是用的border边框来模拟实现的,原理请看我的另一篇文章:用div+css模拟表格对角线。另外本模型只用到两张图片,将所有棋子图片合成为一张png图片,采用css sprites技术(相关链接:制作一幅扑克牌系列一---css sprites图片背景优化技术)来减少图片链接数量,不然这么多图,每次都从网络下载,影响速度。本样例大多是采用绝对和相对定位来实现界面的输出。 

说是纯css版,可能有点夸张,为了显示的效果,加入了少量的JS,用来控制ie6下png透明背景和便于拖动棋子。本版本只是界面模型,关于控制台的功能,将在下一版本中实现。 

兼容性测试:本例在IE6和FF3中测试通过,其它浏览器未作测试。

中国象棋纯CSS版--冰极峰制作(blog地http://www.cnblogs.com/binyong/)

控制器

作者:冰极峰 [email protected]
中国象棋纯CSS版0.1版,由冰极峰独家制作,转载请注明出处。 博客地址:http://www.cnblogs.com/binyong/
     
     
 
 
楚   河汉   界
 
 
     
     

中国象棋纯CSS制造---冰极峰

 

转载于:https://www.cnblogs.com/binyong/archive/2009/02/20/1395194.html

你可能感兴趣的:(xhtml)