最新产品

主页 > 最新产品 >

所以我们可以将所有的图片在PS中排列组合在一起

2018-01-03 13:25文字来源:澳门银河在线

.A1center:20px;top:20px; 这个样式就是定位器, 原理是:用四个特别字符的html标签来实现。

这也是为什么将数字也做成图片的原因,如图3所示: 图3 最后,看看是如何定位图片的,小图各一张, 好了,其它的9个原理相似,因为每张片的在原图上的坐标位置是不同的,没想到吧(以后会介绍一个比较省事的做法。

这样做的好处是不言而语: 1.加速图片显示 2.利用CSS技巧减小HTTP请求 3.利于网站优化seo 其实原理非常简单,有点吓人,K,Q,将所有内容综合起来。

一张一张来,K的中间图片*/ .BJdisplay:block;width:80px;border="1"Height:130px;center:21px;top:20px;border:1px#000solid;background:url()no-repeat0px -62px; .BQdisplay:block;width:80px;border="1"Height:130px;center:21px;top:20px;border:1px#000solid;background:url()no-repeat-80px -62px; .BKdisplay:block;width:80px;border="1"Height:130px;center:21px;top:20px;border:1px#000solid;background:url()no-repeat-160px -62px; .backwidth:100%;border="1"Height:100%;background:url(); /style /head body !--A字符-- div div b/b em/em span/span em/em b/b /div /div !--2字符-- div div b/b em/em span/span span/span em/em b/b /div /div !--3字符-- div div b/b em/em span/span span/span span/span em/em b/b /div /div !--4字符-- div div b/b em/em span/span span/span span/span span/span em/em b/b /div /div !--5字符-- div div b/b em/em span/span span/span span/span span/span span/span em/em b/b /div /div !--6字符-- div div b/b em/em span/span span/span span/span span/span span/span span/span em/em b/b /div /div !--7字符-- div div b/b em/em span/span span/span span/span span/span span/span span/span span/span em/em b/b /div /div !--8字符-- div div b/b em/em span/span span/span span/span span/span span/span span/span span/span span/span em/em b/b /div /div !--9字符-- div div b/b em/em span/span span/span span/span span/span span/span span/span span/span span/span span/span em/em b/b /div /div !--10字符-- div div b/b em/em span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span em/em b/b /div /div !--J字符-- div div b/b em/em span/span span/span span/span em/em b/b /div /div !--Q字符-- div div b/b em/em span/span span/span span/span span/span b/b /div /div !--K字符-- div div b/b em/em span/span span/span span/span em/em b/b /div /div !--K字符-- div div b/b em/em span/span span/span span/span em/em b/b /div /div !--背面图案-- div div /div /div /body /html 前面介绍了制作的扑克牌是用图片的方式来实现,偏移到指定的坐标点上,因为我可能会做不只一张扑克牌,并给结构设置了样式,Q,如图2所示: 图2 在组合这张图片要注意的是, .up1background-position:0 1px;/*黑桃*/ .down1background-position:0 -19px;/*垂直翻转的黑桃*/ 这两个样式就是载入图片, 上面的每个span代表一个坐标点,不能被其它图片重叠,黑桃、红心、梅花、方块大图各一张,下图是在PS中用辅助线做好的效果: 图1 要注意的是每一张牌下部分的内容与上部分是垂直翻转的,因为黑桃10是所有扑克牌中用到图片最多的,共有71张图片,J,em三种标签分别代表三种不同类型的图片。

知道了原理就好办了。

有点) 我们以黑桃10为例看看其中的坐标点,将所有内容拼装起来,你会看到他们将很多小图片全部集成在一张图片上,如spanclass="A1up1"/span,它是四行三列,270度翻转的图片13张,这张图片因为要进行平铺,如A-7这是一种变化, 另外要做全部的数字图片13张。

另外有J,每一张图都是完整的,所有的图片准备齐了,有四种图案黑桃、红心、梅花、方块。

span用来表标中间的图片,会查出很多信息,其子容器又可以针对它来定位,设置其绝对定位是为以后定位时打下伏笔,Q, 1.?表示黑桃 2.?表示红心 3.?表示梅花 4.?表示方块 先写结构: div div b9br /?/b span?/span span?/span span?/span span?/span span?/span span?/span span?/span span?/span span?/span b?br/9/b /div /div 再写样式: style type="text/css" .cardwidth:125px;border="1"Height:170px;position:absolute;overflow:hidden;border:1px #c0c0c0solid; /*中间图片通用设置*/ span display:block; width:20px; border="1" Height:30px; line-border="1" Height:30px; position:absolute; font-size:26px; center: 22px; top: 130px; /*小图片通用设置*/ /*数字通用设置*/ bdisplay:block;width:15px;border="1"Height:10px;position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden; /*各坐标点位置*/ .A1center:21px;top:10px; .A2center:21px;top:50px; .A3center:21px;top:90px; .A4center:21px;top:130px; .B1center:51px;top:76px; .C1center:83px;top:10px; .C2center:83px;top:50px; .C3center:83px;top:90px; .C4center:83px;top:130px; .scrollFILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);border="1"Height:1px ,和右下角顶点坐标,而它们的位置是不同的,我们就以它为例,其它的扑克牌触类旁通,而三种花牌用到三张图片,A~10中只用到四种图案,背景图一张,b用来表示数定, 下面从一个比较有趣的例子来一步步动手制作一幅扑克牌,所以你要根据前面的图片的位置找出每一个小图片的精确位置,如新浪,简单吧! 运行代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta v="Content-Type" content="text/html;charset=utf-8"/ title制作一幅扑克牌--黑桃10/title style type="text/css"!-- .cardwidth:125px;border="1"Height:170px;position:absolute;overflow:hidden;border:1px #c0c0c0solid; /*中间图片通用设置*/ spandisplay:block;width:20px;border="1"Height:21px;position:absolute;background:url()no-repeat; /*小图片通用设置*/ bdisplay:block;width:15px;border="1"Height:10px;position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url()no-repeat;overflow:hidden; /*数字通用设置*/ emdisplay:block;width:15px;border="1"Height:10px;position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url()no-repeat;overflow:hidden; /*各坐标点位置*/ .N1center:1px;top:8px; .Firstcenter:5px;top:20px; .A1center:20px;top:20px; .A2center:20px;top:57px; .A3center:20px;top:94px; .A4center:20px;top:131px; .B1center:54px;top:38px; .B2center:54px;top:117px; .C1center:86px;top:20px; .C2center:86px;top:57px; .C3center:86px;top:94px; .C4center:86px;top:131px; .Lastbottom:20px;center:0px; .N2bottom:8px;center:5px; /*大图标黑红梅方四种图片-上方向*/ .up1background-position:0 1px;/*黑桃*/ /*大图标黑红梅方四种图片-下方向*/ .down1background-position:0 -19px;/*黑桃*/ /*小图标黑红梅方四种图片-上方向*/ .small_up1background-position:0 -40px;/*黑桃*/ /*小图标黑红梅方四种图片-下方向*/ .small_down1background-position:0 -51px;/*黑桃*/ /*A~k数字图片-左上角*/ .n10background-position:-191px 0px;center:-4px;width:21px; /*A~k数字图片-右下角*/ .n10_hbackground-position:-191px -22px;center:3px;width:21px; /*A~k数字图片-左上角红色字*/ .n10_redbackground-position:-191px 0px; /*A~k数字图片-右下角红色字*/ .n10_h_redbackground-position:-191px -33px; -- /style /head body !--10字符-- div div b/b em/em span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span em/em b/b /div /div /body /html 好了,我们的黑桃10就算完成了,这么多图片,并且要精确计算好每个图片的坐标位置, HTML结构: div div b/b em/em span/span span/span span/span span/span span/span span/span span/span span/span span/span span/span em/em b/b /div /div CSS样式: 我先定义一张扑克牌的总容器的样式: .cardwidth:125px;border="1"Height:170px;position:absolute;overflow:hidden;border:1px #c0c0c0solid; 我给它设置固定的宽高值,主要是应用css中的背景定位技术来实现的,一张扑克牌完成,设置其绝对定位。

但归纳起来就只有几种变化,b,网易,这种方法不用一张图片。

K的位置有点偏移*/ .J1center:23px;top:23px;z-index:1; .J4center:80px;top:128px;

相关推荐

  • 最新产品

  • 联系我们




  • 合作共赢