站长资源网页制作 CSS 扑克牌效果实现代码 整理:jimmy2024/10/8浏览2次 站长资源 网页制作 网盘链接 云盘下载 简介非常不错的效果代码。 非常不错的效果代码。<!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> <!-- Normal page content. --> <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+DIV 拼图(26个英文字母) 下一篇:IE与Firefox中兼容的html设计中使用CSS改变鼠标为手形 最新资源 群星.2024-繁花电视剧原声带3CD【环球】【 江希文.1994-伝说少女(饿狼伝说动画原声大 洪荣宏.2010-上爱的人【华特】【WAV+CUE】 《大牌国语情歌 经典再现 深情对唱 2CD》 《陈百强粉红色的一生精选 3CD》[FLAC/分 《丁当 20首重量级歌曲 Fu Good 下一站天 歌莉雅.2012-My.Voice.Story【环星】【FL 群星.1993-一曲成名·青春无悔【飞碟】【W 刘德华.2000-爱无知(金装版)【NEWMELODY】 许巍《时光漫步》1CD[FLAC/分轨][804.3MB 一句话新闻一文看懂荣耀MagicBook Pro 16荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?