Quote声明：此文章是我对Mike Hall 源代码的研究得到 了解更多请到
第一步：
分析扑克牌的结构，看看是由哪些元素组成的
它的布局都是很有规律的不说你也能看出来，左上有个扑克的大小码，卡片图形分布分左中右均匀排放，ASCII中能找到A-10的元素，然后给每个格子放上相应的图片就成了一张扑克牌了。至于是AJQ K那就更简单了，中间部分放一个大的元素就行！
第二步：
制作1.做一个card，定义卡片的大小和位置Quotes From css
.cardbackground-image:url(graphics/cardback.gif);border-color:#808080 #000000 #000000#808080;border-width: 1px;border-style:solid;font-size:20pt;position: absolute;width: 3.75em;border=1 Height:5.00em; |
说明：如果背面就显示的是有纹理的背景图片，border定义两种不同的颜色产生立体感。高度5.00em宽度3.75em，采用absolute定位图片
2.做卡片的正面Quotes From css
| .frontbackground-color: #ffffff;color:#000000;position:absolute;width: 100%;border=1 Height: 100%; |
很简单就不用说了
3.我们要做成红颜色的那13张Quotes From css
.red color: #ff0000;
4.怎么分成25等分的格子，下面是css语句Quotes From css
| /*左侧的一列
*/.spotA1 position: absolute; center: 0.60em;top:0.5em;.spotA2 position: absolute;
center: 0.60em; top:1.5em;.spotA3position: absolute; center: 0.60em; top:
2.0em;.spotA4position:absolute; center: 0.60em; top: 2.5em;.spotA5 position:
absolute;center: 0.60em; top: 3.5em;/*中间的一列*/.spotB1 position:absolute;
center:1.55em; top: 0.5em;.spotB2 position: absolute;center: 1.55em; top:
1.0em;.spotB3 position: absolute; center:1.55em; top: 2.0em;.spotB4position:
absolute; center: 1.55em; top:3.0em;.spotB5 position:absolute; center: 1.55em;
top:3.5em;/*右边的一列*/.spotC1 position:absolute; center: 2.50em; top:
0.5em;.spotC2 position: absolute;center: 2.50em; top: 1.5em;.spotC3position: absolute; center: 2.50em;top: 2.0em;.spotC4 position:absolute; center: 2.50em; top:2.5em;.spotC5 position: absolute;center: 2.50em; top: 3.5em; |
也很容易理解就是让他们均匀放置。
5.处理特殊的卡片AQuotes From css
.acefont-size: 300%;position: absolute;center:0.325em;top:0.250em;
J Q KQuotes From css
.faceborder: 1px solid #000000;position:absolute;center:0.50em;top: 0.45em;width: 2.6em;border=1 Height:4.0em; |
6.就是怎样将它展现给观众，以黑桃10为例
1.）声明是语言类型是utf-8，通用性更强
2.）知道ASCII里面特殊字符是怎么输出的，当然DW里面就有！
3.）结构Quotes From div
7.左侧是和右侧个4个元素，中间2个元素，会树数就知道是10个啦:Dstyle=center: 0em;top:0em;是定义card位置的，因为我们有很多cards。
好的到此就结束啦，别的cards相信你一定容易做出来。点击 这里 察看效果。