用CSS製作撲克牌

來源:互聯網
上載者:User
css

用css製作撲克牌
Quote
聲明:此文章是我對Mike Hall 原始碼的研究得到 瞭解更多請到http://www.brainjar.com
第一步:
分析撲克牌的結構,看看是由哪些元素組成的

它的布局都是很有規律的不說你也能看出來,左上有個撲克的大小碼,卡片圖形分布分左中右均勻排放,ASCII中能找到A-10的元素,然後給每個格子放上相應的圖片就成了一張撲克牌了。至於是A J Q K那就更簡單了,中間部分放一個大的元素就行!
第二步:
製作
1.做一個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定義兩種不同的顏色產生立體感。高度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

/*左側的一列*/
.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.就是怎樣將它展現給觀眾,以黑桃10為例
1.)聲明是語言類型是utf-8,通用性更強

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

2.)知道ASCII裡面特殊字元是怎麼輸出的,當然DW裡面就有!
3.)結構
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>

左側是和右側個4個元素,中間2個元素,會樹數就知道是10個啦:D
style="left: 0em; top: 0em;"是定義card位置的,因為我們有很多cards。

好的到此就結束啦,別的cards相信你一定容易做出來。點擊 這裡 察看效果。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。