CSS to make poker quote with CSS
Statement: This article is my study of Mike Hall source code to get to know more please come to http://www.brainjar.com, can be reproduced freelyFirst step:
Analyze the structure of poker to see which elements are made up of
Its layout is very regular, do not say you can see, on the left there is a poker size code, card graphics distribution in the left and right evenly discharge, ASCII can find the elements of A-10, and then put the corresponding picture of each lattice into a card. As for a J Q K
That's easier, the middle part of a large element on the line!
Step Two:
Making
1. Make a card that defines the size and position of the cards 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;
Description: If the back of the display is a textured background picture, border definition of two different colors to produce three-dimensional. Height 5.00em width 3.75em,
Using absolute positioning
Image
2. Make the positive quotes of the card from
CSS. Front {
Background-color: #ffffff;
Color: #000000;
Position:absolute;
width:100%;
height:100%;
It's easy to say.
3. We want to make the red color of the 13 quotes from
CSS. Red {color: #ff0000;} 4.
How to divide into 25 squares
The following is a CSS statement quotes from
CSS/* A column on the left/*
. 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;}
/* The middle of a column * *
. 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;}
/* A column to the right/*
. 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;} It is also easy to understand that they are placed evenly.
4. Handling of special cards
Aquotes from
CSS. Ace {
font-size:300%;
Position:absolute;
Left:0.325em;
Top:0.250em;
}j Q kquotes from
CSS. face {
border:1px solid #000000;
Position:absolute;
Left:0.50em;
Top:0.45em;
Width:2.6em;
Height:4.0em;
}5. is how to show it to the audience, take spades 10 as an example
1.) declares that the language type is utf-8, and versatility is stronger.
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
2. Know how the special characters in ASCII output, of course, there is a DW!
3.) Structure 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> left side and 4 elements on the right, the middle 2 elements, the number of trees will know is 10: D
Style= "LEFT:0EM; Top:0em; " is to define the card location because we have a lot of cards
Well, it's over, and the other cards believe you'll make it easy. Click hereView Effect
