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;

也很容易理解就是让他们均匀放置。

         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相信你一定容易做出来。点击 这里 察看效果。