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相信你一定容易做出來。點擊 這里 察看效果。