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

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

CSS样式表: CSS入门 XHTML文档结构树; IE6下 vertical-align:middle 和 height 引发的边框消失; 详解CSS（层叠样式表）渐进增强; css vertical-align属性详细图解分析; CSS 垂直居中的5种实现方法; css 条件注释使用指南; CSS 样式表书写风格分析; CSS教程:条件注释的格式以及作用; 探讨：网页外部引用CSS的两种方式; 简化的CSS Reset:15套CSS重设实例; CSS技巧：IE6用import导入CSS的问题; 编写适合所有项目的通用的reset.css; 英文css教程：Introduction CSS; CSS学习之CSS网页制作的10个技巧; 条件CSS的高级用法; 纯语义化XHTML CSS设计表单方法; CSS 浏览器兼容问题整理大全(比较全); import link的具体区别; 菜单 stepdown 呈递下沉的解决方法; CSS3 box-sizing属性

No. « ‹ 75 76 77 78 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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 扑克牌效果实现代码