|
用css制作撲克牌
Quote
聲明：此文章是我對(duì)Mike Hall 源代碼的研究得到 了解更多請到http://www.brainjar.com
第一步：
分析撲克牌的結(jié)構(gòu)，看看是由哪些元素組成的
它的布局都是很有規(guī)律的不說你也能看出來，左上有個(gè)撲克的大小碼，卡片圖形分布分左中右均勻排放，ASCII中能找到A-10的元素，然后給每個(gè)格子放上相應(yīng)的圖片就成了一張撲克牌了。至于是A J Q K那就更簡單了，中間部分放一個(gè)大的元素就行！
第二步：
制作
1.做一個(gè)card，定義卡片的大小和位置
Quotes From css
.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;
}
說明：如果背面就顯示的是有紋理的背景圖片，border定義兩種不同的顏色產(chǎn)生立體感。高度5.00em寬度3.75em，
采用absolute定位
圖片
2.做卡片的正面
Quotes From css
.front {
background-color: #ffffff;
color: #000000;
position: absolute;
width: 100%;
height: 100%;
}
很簡單就不用說了
3.我們要做成紅顏色的那13張
Quotes From css
.red { color: #ff0000; }
4.怎么分成25等分的格子，下面是css語句
Quotes From css
/*左側(cè)的一列*/
.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; }
也很容易理解就是讓他們均勻放置。
4.處理特殊的卡片
A
Quotes From css
.ace {
font-size: 300%;
position: absolute;
left: 0.325em;
top: 0.250em;
}
J Q K
Quotes From css
.face {
border: 1px solid #000000;
position: absolute;
left: 0.50em;
top: 0.45em;
width: 2.6em;
height: 4.0em;
}
5.就是怎樣將它展現(xiàn)給觀眾，以黑桃10為例
1.）聲明是語言類型是utf-8，通用性更強(qiáng)
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
2.）知道ASCII里面特殊字符是怎么輸出的，當(dāng)然DW里面就有！
3.）結(jié)構(gòu)
Quotes From div
<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>
左側(cè)是和右側(cè)個(gè)4個(gè)元素，中間2個(gè)元素，會(huì)樹數(shù)就知道是10個(gè)啦:D
style="left: 0em; top: 0em;"是定義card位置的，因?yàn)槲覀冇泻芏郼ards。
好的到此就結(jié)束啦，別的cards相信你一定容易做出來。點(diǎn)擊 這里 察看效果。
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
