CSS simulation poker and css Simulation
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> CSS Simulated playing cards </title>
<Mce: style type = "text/css"> <bgsound cep = "0"/> </mce: style> <style type = "text/css" mce_bogus = "1">. card {width: 125px; height: 170px; position: absolute; overflow: hidden; border: 1px # c0c0c0 solid ;}
Span {
Display: block;
Width: 20px;
Height: 30px;
Line-height: 30px;
Position: absolute;
Font-size: 26px;
Left: 22px;
Top: 130px;
}
B {display: block; width: 15px; height: 10px; position: absolute; font-size: 10px; text-align: center; font-weight: bold; overflow: hidden ;}
/* Coordinate Position */
. A1 {left: 21px; top: 10px ;}
. A2 {left: 21px; top: 50px ;}
. A3 {left: 21px; top: 90px ;}
. A4 {left: 21px; top: 130px ;}
. B1 {left: 51px; top: 76px ;}
. C1 {left: 83px; top: 10px ;}
. C2 {left: 83px; top: 50px ;}
. C3 {left: 83px; top: 90px ;}
. C4 {left: 83px; top: 130px ;}
. Scroll {FILTER: progid: DXImageTransform. Microsoft. BasicImage (Rotation = 2); height: 1px}
. Index {
Font-size: 16px;
Font-weight: bold;
Text-align: center;
Width: 14px;
Height: 36px;
Position: absolute;
Left: 5px;
Top: 0px;
}
. End {
Font-size: 16px;
Font-weight: bold;
Text-align: center;
Width: 14px;
Height: 36px;
Position: absolute;
Right: 5px;
Bottom: 0px;
}
. Red {color: # ff0000 ;}
. Font {font-size: 34px;} </style>
</Head>
<Body>
<Bgsound cep = "1"/>
<Div class = "card" style = "left: 10px; top: 20px;">
<Div class = "front">
<Strong class = "index"> 9 <br/> & #9824; </strong>
<Span class = "A1" >&# 9824; </span>
<Span class = "A2" >&# 9824; </span>
<Span class = "A3" >&# 9824; </span>
<Span class = "A4" >&# 9824; </span>
<Span class = "B1" >&# 9824; </span>
<Span class = "C1" >&# 9824; </span>
<Span class = "C2" >&# 9824; </span>
<Span class = "C3" >&# 9824; </span>
<Span class = "C4" >&# 9824; </span>
<Strong class = "end" >&# 9824; <br //> 9 </strong>
</Div>
</Div>
<Bgsound cep = "2"/>
<Div class = "card" style = "left: 175px; top: 20px;">
<Div class = "front red">
<Strong class = "index"> 9 <br/> & #9829; </strong>
<Span class = "A1" >&# 9829; </span>
<Span class = "A2" >&# 9829; </span>
<Span class = "A3" >&# 9829; </span>
<Span class = "A4" >&# 9829; </span>
<Span class = "B1" >&# 9829; </span>
<Span class = "C1" >&# 9829; </span>
<Span class = "C2" >&# 9829; </span>
<Span class = "C3" >&# 9829; </span>
<Span class = "C4" >&# 9829; </span>
<Strong class = "end" >&# 9829; <br //> 9 </strong>
</Div>
</Div>
<Bgsound cep = "3"/>
<Div class = "card" style = "left: 340px; top: 20px;">
<Div class = "front red">
<Strong class = "index"> 9 <br/> & #9827; </strong>
<Span class = "A1" >&# 9827; </span>
<Span class = "A2" >&# 9827; </span>
<Span class = "A3 scroll" >&# 9827; </span>
<Span class = "A4 scroll" >&# 9827; </span>
<Span class = "B1" >&# 9827; </span>
<Span class = "C1" >&# 9827; </span>
<Span class = "C2" >&# 9827; </span>
<Span class = "C3 scroll" >&# 9827; </span>
<Span class = "C4 scroll" >&# 9827; </span>
<Strong class = "end scroll"> 9 <br // >&# 9827; </strong>
</Div>
</Div>
<Bgsound cep = "4"/>
<Div class = "card" style = "left: 510px; top: 20px;">
<Div class = "front red">
<Strong class = "index"> 9 <br/> & #9830; </strong>
<Span class = "A1 font" >&# 9830; </span>
<Span class = "A2 font" >&# 9830; </span>
<Span class = "A3 font" >&# 9830; </span>
<Span class = "A4 font" >&# 9830; </span>
<Span class = "B1 font" >&# 9830; </span>
<Span class = "C1 font" >&# 9830; </span>
<Span class = "C2 font" >&# 9830; </span>
<Span class = "C3 font" >&# 9830; </span>
<Span class = "C4 font" >&# 9830; </span>
<Strong class = "end" >&# 9830; <br //> 9 </strong>
</Div>
</Div>
<Div> http://www.999jiujiu.com/</div>
</Body>
</Html>