html css 扑克牌桌面,CSS 扑克牌效果实现代码

BrainJar.com: Playing Cards with 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;

}

10

♠

♠

♠

♠

♠

♠

♠

♠

♠

♠

♠

9

♥

♥

♥

♥

♥

♥

♥

♥

♥

♥

8

♣

♣

♣

♣

♣

♣

♣

♣

♣

7

♦

♦

♦

♦

♦

♦

♦

♦

6

♠

♠

♠

♠

♠

♠

♠

5

♥

♥

♥

♥

♥

♥

4

♣

♣

♣

♣

♣

3

♦

♦

♦

♦

2

♠

♠

♠

A

♥

♥

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