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

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

CSS样式表: DIV和CSS排版中制作细线条的方法小结; 在解决ul居中问题时想到的几点; 网页编辑中CSS样式表技巧总结; 一个老外弄的Clearing floats(清除浮动的方法); 常用的DIV+CSS的基本框架结构但不推荐都放一个div里; 无js5款纯div+css制作的弹出菜单标准; 超强推荐CSS打造经典鼠标触发显示选项; CSS网页布局入门教程5：二列宽度自适应; CSS网页布局入门教程6：左列固定，右列宽度自适应; CSS网页布局入门教程7：二列固定宽度居中; CSS网页布局入门教程9：用CSS设计网站导航——横向导航; CSS网页布局入门教程10：带当前标识的标签式横向导航; CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版; CSS网页布局入门教程12：纵向导航菜单; CSS网页布局入门教程13：下拉及多级弹出式菜单; CSS网页布局入门教程14：纵向下拉及多级弹出式菜单; 解读css发展历史; 让用户自己控制网页字体的大小的css书写方法; CSS注释、命名、继承性、样式排序等CSS技巧的小结; CSS标签切换代码实例教程比较漂亮

No. « ‹ 40 41 42 43 › »

技术文章搜索

关键字

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

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

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