用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相信你一定容易做出来。点击 这里 察看效果。

本文作者:



相关阅读:
asp.net下用js实现鼠标移至小图,自动显示相应大图
js获取元素在浏览器中的绝对位置
CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
N年前的两个脚本%5c暴库
CSS语法缩写规则
Windows Vista系统休眠功能
“incorrect super block” FreeBSD挂载CDROM时报错误的解决方法
网页教案,针对初学者的教案
让OpenSoralis进入纯文本模式
通过按空格键开启Vista启动选项
PHP中用header图片地址 简单隐藏图片源地址
Linux操作系统启动流程与Grub的配置方法
图片的入库与读取的方法
不要在cookie中使用特殊字符的原因分析
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 腹有诗书气自华,最是书香能致远 今天,我撒了谎作文600字 陆游的咏梅诗 一路走来汗水多作文600字 小学四年级作文350字:今天没心情 你是我心底永远的秘密 健身时的那些搞笑糗事,越后面越好笑。 弦外之音 村官(副书记)工作总结范文 生活随笔:感知一二 相信自己,你就是一道风景300字 生命最美的地方 和李適答宋十一入崖口五渡见赠 春风十里不如你作文600字 秋,无限灿烂却充满忧伤的季节 屠呦呦获诺贝尔奖,为什么却当不了院士? 刘巧英吃烧饼 醉在南山大草原的绿色里 第一次在歌厅唱歌 2015大学生毕业登记表自我鉴定(3)篇 人生若只如初见作文1200字 命运交响曲作文 鸟不忧郁 纵然只是秋天 回忆似箭 2016自我介绍范文500字 小学生诗歌选集——心愿 解读妈妈的心700字 国耻不能忘作文500字 小学五年级作文450字:我为“两城同创”做贡献 10大学毕业生鉴定书 这一刻,请让我安静的遗忘一切 秋季学期期中考试总结暨表彰大会讲话稿 一次难忘的运动会作文500字 最美时刻忆起 会计专业实习周志 对待生活,我剩下的只有苦笑 小学五年级作文550字:五·一见闻 爱就是煤球,只燃烧一次 年作文750字 读《改革开放三十年》有感作文500字 《木偶奇遇记》读后感200字4篇 刚出生的小猫 悟出个真理 2011年上半年度妇女工作总结 兴隆寺导游词 小学六年级作文550字:勇气使我成功 “县官”同“现管”,求责任与权力间的平衡 美丽的一刻 我的小制作——剪小人

Copyright © 2016 phpStudy |