CSS布局实例：仿真扑克牌
此为用CSS实现的仿真扑克牌，别以为是使用了图片，实际上完全是由CSS实现的，就连牌面也是，是不是开始佩服作者了?CSS布局的水平如此之高，赶紧研究一番吧，如果你用CSS也能实现本效果，估计你也高手了。
当前位置：编程学习 > JS >>
答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS仿真扑克牌</title>
<mce:style type="text/css"><BGSOUND CEP="0" /></mce:style><style type="text/css" mce_bogus="1">.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
span{
display:block;
width:20px;
height:30px;
line-height:30px;
position:absolute;
font-size:26px;
left: 22px;
top: 130px;
}
b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}
/*坐标位置*/
.A1{left:21px;top:10px;}
.A2{left:21px;top:50px;}
.A3{left:21px;top:90px;}
.A4{left:21px;top:130px;}
.B1{left:51px;top:76px;}
.C1{left:83px;top:10px;}
.C2{left:83px;top:50px;}
.C3{left:83px;top:90px;}
.C4{left:83px;top:130px;}
.scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
.index {
font-size: 16px;
font-weight: bold;
text-align: center;
width:14px;
height:36px;
position: absolute;
left:5px;
top:0px;
}
.end {
font-size: 16px;
font-weight: bold;
text-align: center;
width:14px;
height:36px;
position: absolute;
right:5px;
bottom:0px;
}
.red { color: #ff0000; }
.font{font-size:34px;}</style>
</head>
<body>
<BGSOUND CEP="1" />
<div class="card" style="left:10px;top:20px;">
<div class="front">
<strong class="index">9<br />♠</strong>
<span class="A1">♠</span>
<span class="A2">♠</span>
<span class="A3">♠</span>
<span class="A4">♠</span>
<span class="B1">♠</span>
<span class="C1">♠</span>
<span class="C2">♠</span>
<span class="C3">♠</span>
<span class="C4">♠</span>
<strong class="end">♠<br/ />9</strong>
</div>
</div>
<BGSOUND CEP="2" />
<div class="card" style="left:175px;top:20px;">
<div class="front red">
<strong class="index">9<br />♥</strong>
<span class="A1">♥</span>
<span class="A2">♥</span>
<span class="A3">♥</span>
<span class="A4">♥</span>
<span class="B1">♥</span>
<span class="C1">♥</span>
<span class="C2">♥</span>
<span class="C3">♥</span>
<span class="C4">♥</span>
<strong class="end">♥<br/ />9</strong>
</div>
</div>
<BGSOUND CEP="3" />
<div class="card" style="left:340px;top:20px;">
<div class="front red">
<strong class="index">9<br />♣</strong>
<span class="A1">♣</span>
<span class="A2">♣</span>
<span class="A3 scroll">♣</span>
<span class="A4 scroll">♣</span>
<span class="B1">♣</span>
<span class="C1">♣</span>
<span class="C2">♣</span>
<span class="C3 scroll">♣</span>
<span class="C4 scroll">♣</span>
<strong class="end scroll">9<br/ />♣</strong>
</div>
</div>
<BGSOUND CEP="4" />
<div class="card" style="left:510px;top:20px;">
<div class="front red">
<strong class="index">9<br />♦</strong>
<span class="A1 font">♦</span>
<span class="A2 font">♦</span>
<span class="A3 font">♦</span>
<span class="A4 font">♦</span>
<span class="B1 font">♦</span>
<span class="C1 font">♦</span>
<span class="C2 font">♦</span>
<span class="C3 font">♦</span>
<span class="C4 font">♦</span>
<strong class="end">♦<br/ />9</strong>
</div>
</div>
</body>
</html>上一个：给一个Div层添加滚动条功能
下一个：特殊字符实现的CSS圆角
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思