收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4738|回复: 10

[讨论] 纯CSS绘制中国象棋棋盘

[复制链接]
发表于 2011-5-14 16:59:59 | 显示全部楼层 |阅读模式
在研究浏览器对a元素渲染的差异时,突然冒出一个想法:能不能用css绘制中国象棋棋盘?
下班后尝试了一下,实现效果如下:
QQ截图20110514165822.jpg

代码如下:

 提示:您可以先修改部分代码再运行


做了个有棋子的,不过自我感觉实现的方法不高明,谁若有好的方法,请不吝赐教。
权当玩的,所以只测试了chrome 11、Firefox 4、IE 9,其他浏览器,可能就悲剧了。
有棋子的代码如下:

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 ipaper 于 2011-5-17 23:11 编辑 ]
发表于 2011-5-14 17:34:52 | 显示全部楼层
哇,很有创意!
再弄点棋子呗
回复 支持 反对

使用道具 举报

发表于 2011-5-14 18:32:46 | 显示全部楼层
汉界转不过来。。。IE only
试试HTML5+CSS3弄个兼容的
滤镜就留给IE好了
回复 支持 反对

使用道具 举报

发表于 2011-5-15 16:06:52 | 显示全部楼层
不错,顶一下

IE6,帅们的位置有点错乱了
回复 支持 反对

使用道具 举报

发表于 2011-5-15 20:42:56 | 显示全部楼层
棋子呢?
回复 支持 反对

使用道具 举报

发表于 2011-5-16 08:51:09 | 显示全部楼层
按理说,结构可以更简单点。
目前看来只是利用了每个方格(li)间的空隙(margin)来显示底部(ul)的背景色,大小都是固定的话,结构完全可以少去很多标签。

想法不错哦,顶一个。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-5-17 22:22:40 | 显示全部楼层

回复 6# phantom 的帖子

小志,久仰久仰
想了一下,觉得只有楚河汉界那行,能省去几个li标签,其他就不知道了,望能指点!
回复 支持 反对

使用道具 举报

发表于 2011-5-18 10:35:41 | 显示全部楼层
创意不错啊,可惜使用价值不高,权当学习之作吧
回复 支持 反对

使用道具 举报

发表于 2011-5-18 10:41:26 | 显示全部楼层
使用36个DIV,测试 IE9/Firefox3/Firefox4/Chromium/Opera 通过
用到的东西不多,和楼主不一样的是外框的实现、格子的实现(大量节省标签)、楚汉的处理
米字格参考了楼主的实现
-------------
刚想到,米字格还可以省掉几个标签,正在做。。。

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2011-5-18 11:03:58 | 显示全部楼层
既然是练习的和熟悉的,可以考虑一下使用:before和:after来减少标签。
回复 支持 反对

使用道具 举报

发表于 2011-5-18 11:55:34 | 显示全部楼层
原帖由 [i]zhanyuzai 于 2011-5-18 10:41 发表
使用36个DIV,测试 IE9/Firefox3/Firefox4/Chromium/Opera 通过
用到的东西不多,和楼主不一样的是外框的实现、格子的实现(大量节省标签)、楚汉的处理
米字格参考了楼主的实现
-------------
刚想 ...

米字格只能再少八个(原来以为能少十二个的),格子用上outline的话还能少几个(outline和背景色作线,边框作格子,一个DIV就有三条线了)

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 京ICP备05002321号  

GMT+8, 2017-6-23 06:06 , Processed in 0.090834 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表