图片准备好了后，我们开始设计结构吧，因为黑桃10是所有扑克牌中用到图片最多的，我们就以它为例。
HTML结构：
CSS样式：
我先定义一张扑克牌的总容器的样式：
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
我给它设置固定的宽高值，并加上一个边框线，设置其绝对定位是为以后定位时打下伏笔。因为我可能会做不只一张扑克牌。以后在扩展时只需要给它加上left和top属性就可将它定位到不同的地方。并且将它设置绝对定位后，其子容器又可以针对它来定位。
我用span,b,em三种标签分别代表三种不同类型的图片，span用来表标中间的图片，b用来表示数定，em用来表示数字下面的小图标。
上面的每个span代表一个坐标点，将通用的部分写成一个样式，便于其它结构的调用，然后将它组合应用到一个坐标点上，如<span class="A1 up1"></span>。其样式如下定义：
span{display:block;width:20px;height:21px; osition:absolute;background:url(images/card.gif) no-repeat;}
上面这个样式是定义中间的10个黑桃图片容器的通用设置。将它们设置为块状，并固定大小，设置其绝对定位，让它能定义到你想指定的位置上。
.A1{left:20px;top:20px;}
这个样式就是定位器，偏移到指定的坐标点上，其它的9个原理相似。
.up1{background-position:0 1px;}/*黑桃*/
.down1{background-position:0 -19px;}/*垂直翻转的黑桃*/
这两个样式就是载入图片，因为每张片的在原图上的坐标位置是不同的，所以你要根据前面的图片的位置找出每一个小图片的精确位置。
现在，你已经构建了html结构，并给结构设置了样式，将所有内容拼装起来，我们的黑桃10就算完成了，简单吧！
运行代码框