合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

CSS仿真扑克牌效果

2012-04-10 15:43:11网站设计

我们先看下效果吧,(*^__^*) 嘻嘻。R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
整个效果代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<html xmlns="http://www.w3.org/1999/xhtml">R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<head>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<title>CSS仿真扑克牌-www.chonggou.net</title>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<mce:style type="text/css"><BGSOUND CEP="0" /></mce:style>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<style type="text/css" mce_bogus="1">
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
span{R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:block;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:20px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:30px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
line-height:30px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
position:absolute;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font-size:26px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
left: 22px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
top: 130px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/*坐标位置*/R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.A1{left:21px;top:10px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.A2{left:21px;top:50px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.A3{left:21px;top:90px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.A4{left:21px;top:130px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.B1{left:51px;top:76px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.C1{left:83px;top:10px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.C2{left:83px;top:50px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.C3{left:83px;top:90px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.C4{left:83px;top:130px;}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.index {R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font-size: 16px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font-weight: bold;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-align: center;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:14px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:36px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
position: absolute;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
left:5px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
top:0px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.end {R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font-size: 16px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font-weight: bold;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-align: center;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:14px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:36px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
position: absolute;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
right:5px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
bottom:0px;R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.red { color: #ff0000; }R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.font{font-size:34px;}</style>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</head>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<body>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<BGSOUND CEP="1" />R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="card" style="left:10px;top:20px;">R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="front">R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<strong class="index">9<br />&#9824;</strong>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A1">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A2">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A3">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A4">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="B1">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C1">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C2">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C3">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C4">&#9824;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<strong class="end">&#9824;<br/ />9</strong>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<BGSOUND CEP="2" />R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="card" style="left:175px;top:20px;">R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="front red">R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<strong class="index">9<br />&#9829;</strong>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A1">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A2">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A3">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A4">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="B1">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C1">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C2">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C3">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C4">&#9829;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<strong class="end">&#9829;<br/ />9</strong>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<BGSOUND CEP="3" />R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="card" style="left:340px;top:20px;">R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="front red">R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<strong class="index">9<br />&#9827;</strong>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A1">&#9827;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A2">&#9827;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A3">&#9827;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="A4">&#9827;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="B1">&#9827;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C1">&#9827;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C2">&#9827;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C3">&#9827;</span>R6r合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<span class="C4">&#9827;</span>
本文关键词
CSS,扑克牌,HTML5