用css制作扑克牌(图)
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
enter">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相信你一定容易做出来。 <script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
个人分类: css
想对作者说点什么? 我来说一句

用CSS制作扑克牌

zgqtxwd zgqtxwd

2008-04-30 23:38:00

阅读数:187

54张纸牌扑克牌图片

2013年03月20日 200KB 下载

css Sprites精灵图制作

2017年09月07日 29KB 下载

没有更多推荐了,返回首页

不良信息举报

用css制作扑克牌(图)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭