用css制作扑克牌(图)

用css制作扑克牌

　　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;

　　也很容易理解就是让他们均匀放置。4.处理特殊的卡片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;

　　5.就是怎样将它展现给观众，以黑桃10为例1.）声明是语言类型是utf-8，通用性更强

　　

　　2.）知道ASCII里面特殊字符是怎么输出的，当然DW里面就有！3.）结构Quotes From div

　　

10　　左侧是和右侧个4个元素，中间2个元素，会树数就知道是10个啦:Dstyle=center: 0em;top:0em;是定义card位置的，因为我们有很多cards。

　　好的到此就结束啦，别的cards相信你一定容易做出来。点击 这里 察看效果。