用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 交通频道 作文范文 经典励志语录:珍惜每一个平凡而美好的今天。 动物学校一日游 下雨周记 中职教师入党申请书 致三十岁的自己之一封信作文1600字 电台员工个人述职述廉报告 这世界充满爱作文 爱情里有多少宿命 儿童诗歌:青春去哪了 过去了作文600字 《芈月传》剧评:为什么没有人说《芈月传》不好看? 樱花树作文400字 慢些走啊,慢慢看 我发现蜗牛的秘密 大学生入党手续流程 科技厅长助理述职报告 五年级作文我的发现 小学四年级作文550字:一句话的启示 法律援助个人工作总结 思考人生——生命的意义 柔弱的女子,刚毅的娘 小学三年级作文500字:我的绝招----吹口哨 红岩魂,爱国情团日活动总结 升旗仪式感想 心,若不为形役,即为自由! 学习十六届四中全会体会 大寒祝福短信 脸上依旧挂着微笑 一年级第二学期语文教研组工作总结 形容难忘的句子 珍惜痛苦_关于珍惜痛苦的话题作文600字 志士仁人造句 那些夜晚 个性签名看了好的,请转载,不好的话,评论一下,为什么不好? 学术论文写作材料搜集和分类的方法(会员上传) 关于雪的作文350字 幼儿园小班社会教案:小蚂蚁坐汽车 创业路上如何取舍投资项目 2016年六年级数学下册第一单元负数教学设计(人教版) 小说《巧遇》(五) 我最佩服的人(于岩松) 小学四年级作文400字:包子们!go!go!第五集 社区公安民警科学发展观心得体会:自觉践行科学发展观努力做好社区警务工作 飘零的缘分·舞尽时光的阡陌 新型墙纸作文600字 2015年小学三年级英语教学计划 迎财神,吃饺子 今生不变的爱恋 忆紫溪 珍惜友谊作文1200字

Copyright © 2016 phpStudy |