CSS 扑克牌效果实现代码- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 扑克牌效果实现代码

技术文章搜索

关键字

CSS样式表中的 CSS 扑克牌效果实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 87 ::

收藏到网摘: n/a

CSS 代码质量提高的10条实用技巧 margin 负值引起的层级（z-index）问题

非常不错的效果代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>BrainJar.com: Playing Cards with CSS</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style id="cardStyles" type="text/css">
/******************************************************************************
* Styles for playing cards. *
******************************************************************************/
.card {
background-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;
height: 5.00em;
}
.front {
background-color: #ffffff;
color: #000000;
position: absolute;
width: 100%;
height: 100%;
}
.red { color: #ff0000; }
.index {
font-size: 50%;
font-weight: bold;
text-align: center;
position: absolute;
left: 0.25em;
top: 0.25em;
}
.ace {
font-size: 300%;
position: absolute;
left: 0.325em;
top: 0.250em;
}
.face {
border: 1px solid #000000;
position: absolute;
left: 0.50em;
top: 0.45em;
width: 2.6em;
height: 4.0em;
}
.spotA1 { position: absolute; left: 0.60em; top: 0.5em; }
.spotA2 { position: absolute; left: 0.60em; top: 1.5em; }
.spotA3 { position: absolute; left: 0.60em; top: 2.0em; }
.spotA4 { position: absolute; left: 0.60em; top: 2.5em; }
.spotA5 { position: absolute; left: 0.60em; top: 3.5em; }
.spotB1 { position: absolute; left: 1.55em; top: 0.5em; }
.spotB2 { position: absolute; left: 1.55em; top: 1.0em; }
.spotB3 { position: absolute; left: 1.55em; top: 2.0em; }
.spotB4 { position: absolute; left: 1.55em; top: 3.0em; }
.spotB5 { position: absolute; left: 1.55em; top: 3.5em; }
.spotC1 { position: absolute; left: 2.50em; top: 0.5em; }
.spotC2 { position: absolute; left: 2.50em; top: 1.5em; }
.spotC3 { position: absolute; left: 2.50em; top: 2.0em; }
.spotC4 { position: absolute; left: 2.50em; top: 2.5em; }
.spotC5 { position: absolute; left: 2.50em; top: 3.5em; }
/******************************************************************************
* Miscellaneous styles. *
******************************************************************************/
body {
background-color: #40a040;
}
</style>
<script type="text/javascript">//<![CDATA[
var minSize = 8;
function resizeCards(d) {
var n;
// Change the font size on the "card" style class.
// DOM-compliant browsers.
if (document.styleSheets[1].cssRules) {
n = parseInt(document.styleSheets[1].cssRules[0].style.fontSize, 10);
document.styleSheets[1].cssRules[0].style.fontSize = Math.max(n + d, minSize) + "pt";
// For NS 6.1, insert a dummy rule to force styles to be reapplied.
if (navigator.userAgent.indexOf("Netscape6/6.1") >= 0)
document.styleSheets[1].insertRule(null, document.styleSheets[1].cssRules.length);
}
// IE browsers.
else if (document.styleSheets[1].rules[0]) {
n = parseInt(document.styleSheets[1].rules[0].style.fontSize, 10);
document.styleSheets[1].rules[0].style.fontSize = Math.max(n + d, minSize) + "pt";
}
return false;
}
//]]></script>
</head>
<body>

<div style="position:relative;margin-top:1em;">
<div class="card" style="left:0em;top:0em;">
<div class="front">
<div class="index">10
♠</div>
<div class="spotA1">♠</div>
<div class="spotA2">♠</div>
<div class="spotA4">♠</div>
<div class="spotA5">♠</div>
<div class="spotB2">♠</div>
<div class="spotB4">♠</div>
<div class="spotC1">♠</div>
<div class="spotC2">♠</div>
<div class="spotC4">♠</div>
<div class="spotC5">♠</div>
</div>
</div>
<div class="card" style="left:4em;top:0em;">
<div class="front red">
<div class="index">9
♥</div>
<div class="spotA1">♥</div>
<div class="spotA2">♥</div>
<div class="spotA4">♥</div>
<div class="spotA5">♥</div>
<div class="spotB3">♥</div>
<div class="spotC1">♥</div>
<div class="spotC2">♥</div>
<div class="spotC4">♥</div>
<div class="spotC5">♥</div>
</div>
</div>
<div class="card" style="left:8em;top:0em;">
<div class="front">
<div class="index">8
♣</div>
<div class="spotA1">♣</div>
<div class="spotA3">♣</div>
<div class="spotA5">♣</div>
<div class="spotB2">♣</div>
<div class="spotB4">♣</div>
<div class="spotC1">♣</div>
<div class="spotC3">♣</div>
<div class="spotC5">♣</div>
</div>
</div>
<div class="card" style="left:12em;top:0em;">
<div class="front red">
<div class="index">7
♦</div>
<div class="spotA1">♦</div>
<div class="spotA3">♦</div>
<div class="spotA5">♦</div>
<div class="spotB2">♦</div>
<div class="spotC1">♦</div>
<div class="spotC3">♦</div>
<div class="spotC5">♦</div>
</div>
</div>
<div class="card" style="left:16em;top:0em;">
<div class="front">
<div class="index">6
♠</div>
<div class="spotA1">♠</div>
<div class="spotA3">♠</div>
<div class="spotA5">♠</div>
<div class="spotC1">♠</div>
<div class="spotC3">♠</div>
<div class="spotC5">♠</div>
</div>
</div>
<div class="card" style="left:20em;top:0em;">
<div class="front red">
<div class="index">5
♥</div>
<div class="spotA1">♥</div>
<div class="spotA5">♥</div>
<div class="spotB3">♥</div>
<div class="spotC1">♥</div>
<div class="spotC5">♥</div>
</div>
</div>
<div class="card" style="left:0em;top:6em;">
<div class="front">
<div class="index">4
♣</div>
<div class="spotA1">♣</div>
<div class="spotA5">♣</div>
<div class="spotC1">♣</div>
<div class="spotC5">♣</div>
</div>
</div>
<div class="card" style="left:4em;top:6em;">
<div class="front red">
<div class="index">3
♦</div>
<div class="spotB1">♦</div>
<div class="spotB3">♦</div>
<div class="spotB5">♦</div>
</div>
</div>
<div class="card" style="left:8em;top:6em;">
<div class="front">
<div class="index">2
♠</div>
<div class="spotB1">♠</div>
<div class="spotB5">♠</div>
</div>
</div>
<div class="card" style="left:12em;top:6em;">
<div class="front red">
<div class="index">A
♥</div>
<div class="ace">♥</div>
</div>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

CSS 代码质量提高的10条实用技巧 margin 负值引起的层级（z-index）问题

CSS样式表 中的 CSS 扑克牌效果实现代码

评论 (0) All

CSS样式表中的 CSS 扑克牌效果实现代码