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

中国象棋纯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>

posted @ 2009-02-20 22:51 Biny 阅读(4088) 评论(5) 编辑收藏举报

刷新页面返回顶部

冰极峰

简单生活，简单生活！

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

公告