首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
Web开发
> 详细
CSS仿真扑克牌
时间：
2015-04-26 15:20:36
阅读：
144
评论：
0
收藏：
0
[点我收藏+]
标签：
css仿真扑克牌
<!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>
<div><A href="http://www.999jiujiu.com/">
http://www.999jiujiu.com/
</A></div>
</body>
</html>
CSS仿真扑克牌
标签：
css仿真扑克牌
原文地址：http://blog.csdn.net/life66881/article/details/45287763
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论（
0
）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
36.VUE — 认识 Webpack 和 安装
2021-07-28
【PHP】上传图片翻转问题
2021-07-28
php对数字进行万。亿的转化
2021-07-28
五个 .NET 性能小贴士
2021-07-28
Three.js中显示坐标轴、平面、球体、四方体
2021-07-28
.net 5+ 知新：【1】 .Net 5 基本概念和开发环境搭建
2021-07-27
1.html,css
2021-07-27
基于Docker搭建 Php-fpm + Nginx 环境
2021-07-27
nginx + http + svn
2021-07-27
kubernets kube-proxy的代理 iptables和ipvs
2021-07-26
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码！
