CSS做的扑克牌_中国网站频道，官方网站，中国品牌网站，网页特效，JS广告，网站截图，酷站推荐，图标，APP，按钮，中国网站第一品牌频道网站频道，div css，flash广告代码，网页特效，png图片，后台模板，flash特效，软件下载，中文字体下载，英文字体下载，

> Css > 技术文章

CSS做的扑克牌

作者：vip_260 来源：未知日期：2010/2/2 11:49:29 人气：标签：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Cssbbs.com: Css扑克牌</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style id="cardStyles" type="text/css">
/******************************************************************************
* Styles for playing cards.                                                   *
******************************************************************************/
.card {
  background-image: url("http://www.cssbbs.com/img/lizi/pukepai/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>
</head>
<body>

<div id="demoBox" style="background-color:#ffffff;">
<h3>CSS 扑克牌</h3>
<p>下面的扑克牌是用CSS和HTML，好几张必要的图片做的。.</p>
<p>你可以右键，查看源文件来查看代码.</p>
</div>
<div style="position:relative;margin-top:1em;">
<div class="card" style="left:0em;top:0em;">
  <div class="front">
    <div class="index">10<br />♠</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<br />♥</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<br />♣</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<br />♦</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<br />♠</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<br />♥</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<br />♣</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<br />♦</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<br />♠</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<br />♥</div>
    <div class="ace">♥</div>
  </div>
</div>
<div class="card" style="left:16em;top:6em;">
  <div class="front">
    <div class="index">K<br />♣</div>
    <img class="face" src="http://www.cssbbs.com/img/lizi/pukepai/king.gif" width="80" height="130"  />
    <div class="spotA1">♣</div>
    <div class="spotC5">♣</div>
  </div>
</div>
<div class="card" style="left:20em;top:6em;">
  <div class="front red">
    <div class="index">Q<br />♦</div>
    <img class="face" src="http://www.cssbbs.com/img/lizi/pukepai/queen.gif" width="80" height="130"  />
    <div class="spotA1">♦</div>
    <div class="spotC5">♦</div>
  </div>
</div>
<div class="card" style="left:0em;top:12em;">
  <div class="front">
    <div class="index">J<br />♠</div>
    <img class="face" src="http://www.cssbbs.com/img/lizi/pukepai/jack.gif" width="80" height="130"  />
    <div class="spotA1">♠</div>
    <div class="spotC5">♠</div>
  </div>
</div>
<div class="card" style="left:4em;top:12em;"></div>
</div>
</body>
</html>

公告

更新

> Css > 技术文章

CSS做的扑克牌