来一发css sprites把良多小图集成在一张图片上

只看该作者 · 发表于 2015-1-16 00:05:11

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
在google中搜刮一下CSSsprites这个称号，会查出良多信息，而且跟着SEO愈来愈被人们器重，接纳这类手艺来举行图片优化的网站愈来愈多，国际几家年夜型流派网站无不仿效。如新浪，网易，搜狐。你下载一下他们的网站上的图片，你会看到他们将良多小图片全体集成在一张图片上。
如许做的优点是不言而语：

减速图片显现
使用CSS技能减小HTTP哀求
利于网站优化搜索引擎优化

实在道理十分复杂，次要是使用css中的背景定位手艺来完成的。次要就是用一个属性background-position来把持显现一张年夜图片中的一个指定巨细的图片地位。
csssprites图片背景优化手艺
上面从一个对照风趣的例子来一步步下手制造一幅扑克牌，看看是怎样定位图片的。
起首我们剖析一下扑克牌，一幅扑克牌有两种色彩，有四种图案黑桃、红心、梅花、方块。别的有J，Q，K，这三种是花牌。A~10中只用到四种图案，而三莳花牌用到三张图片，而它们的地位是分歧的，但归结起来就只要几种变更，如A—7这是一种变更，它是三行三列的结构（A和2是它的惯例），8—10就一种，它是四行三列。J，Q，K是一种（实在它也是第一种的变种惯例）。
晓得了道理就好办了，我们先做出它们的图片来，一张一张来，黑桃、红心、梅花、方块年夜图各一张，小图各一张，J，Q，K图案各一张，背景图一张。
别的要做全体的数字图片13张，270度翻转的图片13张。
好了，一切的图片筹办齐了，共有71张图片，嘿嘿，有点吓人，这么多图片，没想到吧（今后会先容一个对照费事的做法，不必图片，先卖个关子，有点）
我们以黑桃10为例看看个中的坐标点，下图是在PS顶用帮助线做好的效果：

登录/注册后可看大图

图一

要注重的是每张牌下部分的内容与上部分是垂直翻转的，这也是为何将数字也做成图片的缘故原由。
以是我们能够将一切的图片在PS中分列组合在一同，如图二所示：

登录/注册后可看大图

图二

在组合这张图片要注重的是，每张图都是完全的，不克不及被别的图片堆叠，而且要准确盘算好每一个图片的坐标地位，好比它的左上角极点坐标，和右下角极点坐标，晓得这两个坐标点后，每张小图片的地位就可以全体盘算出来了。
图片筹办好了后，我们入手下手计划布局吧，由于黑桃10是一切扑克牌顶用到图片最多的，我们就以它为例。
HTML布局：
CSS款式：
我先界说一张扑克牌的总容器的款式：
.card{width:125px;height:170px;position:absolute;overflow:hidden;border:1px#c0c0c0solid;}
我给它设置流动的宽高值，并加上一个边框线，设置其相对定位是为今后定位时打下伏笔。由于我大概会做不但一张扑克牌。今后在扩大时只必要给它加上left和top属性便可将它定位到分歧的中央。而且将它设置相对定位后，其子容器又能够针对它来定位。
我用span,b,em三种标签分离代表三种分歧范例的图片，span用来表标两头的图片，b用来暗示数定，em用来暗示数字上面的小图标。
下面的每一个span代表一个坐标点，将通用的部分写成一个款式，便于别的布局的挪用，然后将它组合使用到一个坐标点上，如<spanclass="A1up1"></span>。其款式以下界说：
span{display:block;width:20px;height:21px;osition:absolute;background:url(images/card.gif)no-repeat;}
下面这个款式是界说两头的10个黑桃图片容器的通用设置。将它们设置为块状，并流动巨细，设置其相对定位，让它能界说到你想指定的地位上。
.A1{left:20px;top:20px;}
这个款式就是定位器，偏移到指定的坐标点上，别的的9个道理类似。
.up1{background-position:01px;}/*黑桃*/
.down1{background-position:0-19px;}/*垂直翻转的黑桃*/
这两个款式就是载进图片，由于每张片的在原始图片上的坐标地位是分歧的，以是你要依据后面的图片的地位找出每个小图片的准确地位。
如今，你已构建了html布局，并给布局设置了款式，将一切内容拼装起来，我们的黑桃10就算完成了，复杂吧！
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>制造一幅扑克牌--黑桃10</title><styletype="text/css"></style></head><body><divclass="card"><divclass="front"><bclass="N1n10"></b><emclass="Firstsmall_up1"></em><spanclass="A1up1"></span><spanclass="A2up1"></span><spanclass="A3down1"></span><spanclass="A4down1"></span><spanclass="B1up1"></span><spanclass="B2down1"></span><spanclass="C1up1"></span><spanclass="C2up1"></span><spanclass="C3down1"></span><spanclass="C4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2n10_h"></b></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
好了，一张扑克牌完成，别的的扑克牌举一反三。
我们还要加一张图片来完成扑克牌翻过去的效果。这张图片由于要举行平展，以是不加在下面的图片汇合。如图三所示：

登录/注册后可看大图

图三

最初，将一切内容综合起来，一幅完全的扑克牌就算完成了！
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>制造一幅扑克牌</title><styletype="text/css">.card{width:125px;height:170px;position:absolute;overflow:hidden;border:1px#c0c0c0solid;}/*两头图片通用设置*/span{display:block;width:20px;height:21px;position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat;}/*小图片通用设置*/b{display:block;width:15px;height:10px;position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat;overflow:hidden;}/*数字通用设置*/em{display:block;width:15px;height:10px;position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat;overflow:hidden;}/*各坐标点地位*/.N1{left:1px;top:8px;}.First{left:5px;top:20px;}.A1{left:20px;top:20px;}.A2{left:20px;top:57px;}.A3{left:20px;top:94px;}.A4{left:20px;top:131px;}.AM{left:20px;top:75px;}.AM1{left:54px;top:20px;}.B1{left:54px;top:38px;}.B2{left:54px;top:117px;}.BM{left:54px;top:75px;}.C1{left:86px;top:20px;}.C2{left:86px;top:57px;}.C3{left:86px;top:94px;}.C4{left:86px;top:131px;}.CM{left:86px;top:75px;}.CM1{left:54px;top:131px;}.Last{bottom:21px;right:0px;}.N2{bottom:8px;right:4px;}/*年夜图标黑红梅方四种图片-上偏向*/.up1{background-position:01px;}/*黑桃*/.up2{background-position:-19px1px;}/*红桃*/.up3{background-position:-39px1px;}/*梅花*/.up4{background-position:-58px1px;width:19px;}/*方块*/*年夜图标黑红梅方四种图片-下偏向*/.down1{background-position:0-19px;}/*黑桃*/.down2{background-position:-19px-19px;}/*红桃*/.down3{background-position:-38px-19px;}/*梅花*/.down4{background-position:-58px-19px;width:19px;}/*方块*//*小图标黑红梅方四种图片-上偏向*/.small_up1{background-position:0-40px;}/*黑桃*/.small_up2{background-position:-19px-40px;}/*红桃*/.small_up3{background-position:-57px-40px;}/*梅花*/.small_up4{background-position:-38px-40px;}/*方块*//*小图标黑红梅方四种图片-下偏向*/.small_down1{background-position:0-51px;}/*黑桃*/.small_down2{background-position:-19px-51px;}/*红桃*/.small_down3{background-position:-57px-51px;}/*梅花*/.small_down4{background-position:-38px-51px;}/*方块*//*A~k数字图片-左上角*/.nA{background-position:-75px0px;left:4px;}.n2{background-position:-87px0px;}.n3{background-position:-100px0px;}.n4{background-position:-113px0px;}.n5{background-position:-126px0px;}.n6{background-position:-139px0px;}.n7{background-position:-152px0px;}.n8{background-position:-165px0px;}.n9{background-position:-178px0px;}.n10{background-position:-191px0px;left:-4px;width:21px;}.nJ{background-position:-214px0px;left:4px;}.nQ{background-position:-227px0px;left:2px;}.nK{background-position:-241px0px;left:0px;}/*A~k数字图片-右下角*/.nA_h{background-position:-75px-22px;right:2px;}.n2_h{background-position:-87px-22px;}.n3_h{background-position:-100px-22px;}.n4_h{background-position:-113px-22px;}.n5_h{background-position:-126px-22px;}.n6_h{background-position:-139px-22px;}.n7_h{background-position:-152px-22px;}.n8_h{background-position:-165px-22px;}.n9_h{background-position:-178px-22px;}.n10_h{background-position:-191px-22px;right:3px;width:21px;}.nJ_h{background-position:-214px-22px;right:2px;}.nQ_h{background-position:-227px-22px;right:4px;}.nK_h{background-position:-241px-22px;right:6px;}/*A~k数字图片-左上角白色字*/.nA_red{background-position:-75px-11px;}.n2_red{background-position:-87px-11px;}.n3_red{background-position:-100px-11px;}.n4_red{background-position:-113px-11px;}.n5_red{background-position:-126px-11px;}.n6_red{background-position:-139px0px;}.n7_red{background-position:-152px-11px;}.n8_red{background-position:-165px0px;}.n9_red{background-position:-178px-11px;}.n10_red{background-position:-191px0px;}.nJ_red{background-position:-214px-11px;}.nQ_red{background-position:-227px-11px;}.nK_red{background-position:-240px-11px;}/*A~k数字图片-右下角白色字*/.nA_h_red{background-position:-75px-33px;}.n2_h_red{background-position:-87px-33px;}.n3_h_red{background-position:-100px-33px;}.n4_h_red{background-position:-113px-33px;}.n5_h_red{background-position:-126px-33px;}.n6_h_red{background-position:-139px-33px;}.n7_h_red{background-position:-152px-33px;}.n8_h_red{background-position:-165px-33px;}.n9_h_red{background-position:-178px-33px;}.n10_h_red{background-position:-191px-33px;}.nJ_h_red{background-position:-214px-33px;}.nQ_h_red{background-position:-227px-33px;}.nK_h_red{background-position:-241px-33px;}/*J,Q,K的地位有点偏移*/.J1{left:23px;top:23px;z-index:1;}.J4{left:80px;top:128px;}/*J,Q,K的两头图片*/.BJ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px#000solid;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat0px-62px;}.BQ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px#000solid;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat-80px-62px;}.BK{display:block;width:80px;height:130px;left:21px;top:20px;border:1px#000solid;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif)no-repeat-160px-62px;}.back{width:100%;height:100%;background:url(http://www.blueidea.com/articleimg/2009/02/6382/cardback.gif);}</style></head><body><divclass="card"style="left:10px;top:15px;"><divclass="front"><bclass="N1nA"></b><emclass="Firstsmall_up1"></em><spanclass="BMup1"></span><emclass="Lastsmall_down1"></em><bclass="N2nA_h"></b></div></div><divclass="card"style="left:150px;top:15px;"><divclass="front"><bclass="N1n2_red"></b><emclass="Firstsmall_up2"></em><spanclass="AM1up2"></span><spanclass="CM1down2"></span><emclass="Lastsmall_down2"></em><bclass="N2n2_h_red"></b></div></div><divclass="card"style="left:290px;top:15px;"><divclass="front"><bclass="N1n3"></b><emclass="Firstsmall_up3"></em><spanclass="AM1up3"></span><spanclass="BMup3"></span><spanclass="CM1down3"></span><emclass="Lastsmall_down3"></em><bclass="N2n3_h"></b></div></div><divclass="card"style="left:430px;top:15px;"><divclass="front"><bclass="N1n4_red"></b><emclass="Firstsmall_up4"></em><spanclass="A1up4"></span><spanclass="A4down4"></span><spanclass="C1up4"></span><spanclass="C4down4"></span><emclass="Lastsmall_down4"></em><bclass="N2n4_h_red"></b></div></div><divclass="card"style="left:570px;top:15px;"><divclass="front"><bclass="N1n5"></b><emclass="Firstsmall_up1"></em><spanclass="A1up1"></span><spanclass="A4down1"></span><spanclass="BMup1"></span><spanclass="C1up1"></span><spanclass="C4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2n5_h"></b></div></div><divclass="card"style="left:10px;top:195px;"><divclass="front"><bclass="N1n6"></b><emclass="Firstsmall_up1"></em><spanclass="A1up1"></span><spanclass="AMup1"></span><spanclass="A4down1"></span><spanclass="C1up1"></span><spanclass="CMup1"></span><spanclass="C4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2n6_h"></b></div></div><divclass="card"style="left:150px;top:195px;"><divclass="front"><bclass="N1n7_red"></b><emclass="Firstsmall_up2"></em><spanclass="A1up2"></span><spanclass="AMup2"></span><spanclass="A4down2"></span><spanclass="BMup2"></span><spanclass="C1up2"></span><spanclass="CMup2"></span><spanclass="C4down2"></span><emclass="Lastsmall_down2"></em><bclass="N2n7_h_red"></b></div></div><divclass="card"style="left:290px;top:195px;"><divclass="front"><bclass="N1n8"></b><emclass="Firstsmall_up3"></em><spanclass="A1up3"></span><spanclass="A2up3"></span><spanclass="A3down3"></span><spanclass="A4down3"></span><spanclass="C1up3"></span><spanclass="C2up3"></span><spanclass="C3down3"></span><spanclass="C4down3"></span><emclass="Lastsmall_down1"></em><bclass="N2n8_h"></b></div></div><divclass="card"style="left:430px;top:195px;"><divclass="front"><bclass="N1n9_red"></b><emclass="Firstsmall_up4"></em><spanclass="A1up4"></span><spanclass="A2up4"></span><spanclass="A3down4"></span><spanclass="A4down4"></span><spanclass="BMup4"></span><spanclass="C1up4"></span><spanclass="C2up4"></span><spanclass="C3down4"></span><spanclass="C4down4"></span><emclass="Lastsmall_down4"></em><bclass="N2n9_h_red"></b></div></div><divclass="card"style="left:570px;top:195px;"><divclass="front"><bclass="N1n10"></b><emclass="Firstsmall_up1"></em><spanclass="A1up1"></span><spanclass="A2up1"></span><spanclass="A3down1"></span><spanclass="A4down1"></span><spanclass="B1up1"></span><spanclass="B2down1"></span><spanclass="C1up1"></span><spanclass="C2up1"></span><spanclass="C3down1"></span><spanclass="C4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2n10_h"></b></div></div><divclass="card"style="left:10px;top:375px;"><divclass="front"><bclass="N1nJ"></b><emclass="Firstsmall_up1"></em><spanclass="J1up1"></span><spanclass="BJ"></span><spanclass="J4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2nJ_h"></b></div></div><divclass="card"style="left:150px;top:375px;"><divclass="front"><bclass="N1nQ_red"></b><emclass="Firstsmall_up2"></em><spanclass="J1up2"></span><spanclass="BQ"></span><spanclass="J4down2"></span><spanclass="Lastsmall_down2"></span><bclass="N2nQ_h_red"></b></div></div><divclass="card"style="left:290px;top:375px;"><divclass="front"><bclass="N1nK"></b><emclass="Firstsmall_up3"></em><spanclass="J1up3"></span><spanclass="BK"></span><spanclass="J4down3"></span><emclass="Lastsmall_down3"></em><bclass="N2nK_h"></b></div></div><divclass="card"style="left:430px;top:375px;"><divclass="front"><bclass="N1nKnK_red"></b><emclass="Firstsmall_up4"></em><spanclass="J1up4"></span><spanclass="BK"></span><spanclass="J4down4"></span><emclass="Lastsmall_down4"></em><bclass="N2nK_hnK_h_red"></b></div></div><divclass="card"style="left:570px;top:375px;"><divclass="back"></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

不必图片的纯css完成办法
后面先容了制造的扑克牌是用图片的体例来完成，它传神地复原了扑克牌。上面先容一种对照复杂的完成办法，这类办法不必一张图片。
道理是：用四个出格字符的html标签来完成。

&spades;暗示黑桃
&hearts;暗示红心
&clubs;暗示梅花
&diams;暗示方块

先写布局：
<divclass="card"style="left:10px;top:20px;">
<divclass="front">
<bclass="index">9<br/>&spades;</b>
<spanclass="A1">&spades;</span>
<spanclass="A2">&spades;</span>
<spanclass="A3">&spades;</span>
<spanclass="A4">&spades;</span>
<spanclass="B1">&spades;</span>
<spanclass="C1">&spades;</span>
<spanclass="C2">&spades;</span>
<spanclass="C3">&spades;</span>
<spanclass="C4">&spades;</span>
<bclass="end">&spades;<br/>9</b>
</div>
</div>
再写款式：
注重：为了实在的复原一张扑克牌，我在第二张扑克牌中到场滤镜功效，让上面的图案垂直翻转，但这类办法会形成图片不明晰，而且这类办法只要IE系列的扫瞄器才干辨认，假如妙手们有别的更好的举措，请不惜见教！
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无题目文档</title><mce:styletype="text/css"></mce:style><styletype="text/css"mce_bogus="1">.card{width:125px;height:170px;position:absolute;overflow:hidden;border:1px#c0c0c0solid;}/*两头图片通用设置*/span{display:block;width:20px;height:30px;line-height:30px;position:absolute;font-size:26px;left:22px;top:130px;}/*小图片通用设置*//*数字通用设置*/b{display:block;width:15px;height:10px;position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}/*各坐标点地位*/.A1{left:21px;top:10px;}.A2{left:21px;top:50px;}.A3{left:21px;top:90px;}.A4{left:21px;top:130px;}.B1{left:51px;top:76px;}.C1{left:83px;top:10px;}.C2{left:83px;top:50px;}.C3{left:83px;top:90px;}.C4{left:83px;top:130px;}.scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}.index{font-size:16px;font-weight:bold;text-align:center;width:14px;height:36px;position:absolute;left:5px;top:0px;}.end{font-size:16px;font-weight:bold;text-align:center;width:14px;height:36px;position:absolute;right:5px;bottom:0px;}.red{color:#ff0000;}.font{font-size:34px;}</style></head><body><divclass="card"style="left:10px;top:20px;"><divclass="front"><bclass="index">9<br/>&spades;</b><spanclass="A1">&spades;</span><spanclass="A2">&spades;</span><spanclass="A3">&spades;</span><spanclass="A4">&spades;</span><spanclass="B1">&spades;</span><spanclass="C1">&spades;</span><spanclass="C2">&spades;</span><spanclass="C3">&spades;</span><spanclass="C4">&spades;</span><bclass="end">&spades;<br/>9</b></div></div><divclass="card"style="left:175px;top:20px;"><divclass="frontred"><bclass="index">9<br/>&hearts;</b><spanclass="A1">&hearts;</span><spanclass="A2">&hearts;</span><spanclass="A3">&hearts;</span><spanclass="A4">&hearts;</span><spanclass="B1">&hearts;</span><spanclass="C1">&hearts;</span><spanclass="C2">&hearts;</span><spanclass="C3">&hearts;</span><spanclass="C4">&hearts;</span><bclass="end">&hearts;<br/>9</b></div></div><divclass="card"style="left:340px;top:20px;"><divclass="frontred"><bclass="index">9<br/>&clubs;</b><spanclass="A1">&clubs;</span><spanclass="A2">&clubs;</span><spanclass="A3scroll">&clubs;</span><spanclass="A4scroll">&clubs;</span><spanclass="B1">&clubs;</span><spanclass="C1">&clubs;</span><spanclass="C2">&clubs;</span><spanclass="C3scroll">&clubs;</span><spanclass="C4scroll">&clubs;</span><bclass="endscroll">9<br/>&clubs;</b></div></div><divclass="card"style="left:510px;top:20px;"><divclass="frontred"><bclass="index">9<br/>&diams;</b><spanclass="A1font">&diams;</span><spanclass="A2font">&diams;</span><spanclass="A3font">&diams;</span><spanclass="A4font">&diams;</span><spanclass="B1font">&diams;</span><spanclass="C1font">&diams;</span><spanclass="C2font">&diams;</span><spanclass="C3font">&diams;</span><spanclass="C4font">&diams;</span><bclass="end">&diams;<br/>9</b></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

动起来
到场了扑克牌拖动js功效，更像空当接龙小游戏了。特地感激一下草履虫，这段代码是从他哪儿抄来的，哈哈！
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>制造一幅扑克牌</title><styletype="text/css">.card{width:125px;height:170px;position:absolute;overflow:hidden;border:1px#c0c0c0solid;}/*两头图片通用设置*/span{display:block;width:20px;height:21px;position:absolute;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif)no-repeat;}/*小图片通用设置*/b{display:block;width:15px;height:10px;position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif)no-repeat;overflow:hidden;}/*数字通用设置*/em{display:block;width:15px;height:10px;position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif)no-repeat;overflow:hidden;}/*各坐标点地位*/.N1{left:1px;top:8px;}.First{left:5px;top:20px;}.A1{left:20px;top:20px;}.A2{left:20px;top:57px;}.A3{left:20px;top:94px;}.A4{left:20px;top:131px;}.AM{left:20px;top:75px;}.AM1{left:54px;top:20px;}.B1{left:54px;top:38px;}.B2{left:54px;top:117px;}.BM{left:54px;top:75px;}.C1{left:86px;top:20px;}.C2{left:86px;top:57px;}.C3{left:86px;top:94px;}.C4{left:86px;top:131px;}.CM{left:86px;top:75px;}.CM1{left:54px;top:131px;}.Last{bottom:21px;right:0px;}.N2{bottom:8px;right:4px;}/*年夜图标黑红梅方四种图片-上偏向*/.up1{background-position:01px;}/*黑桃*/.up2{background-position:-19px1px;}/*红桃*/.up3{background-position:-39px1px;}/*梅花*/.up4{background-position:-58px1px;width:19px;}/*方块*/*年夜图标黑红梅方四种图片-下偏向*/.down1{background-position:0-19px;}/*黑桃*/.down2{background-position:-19px-19px;}/*红桃*/.down3{background-position:-38px-19px;}/*梅花*/.down4{background-position:-58px-19px;width:19px;}/*方块*//*小图标黑红梅方四种图片-上偏向*/.small_up1{background-position:0-40px;}/*黑桃*/.small_up2{background-position:-19px-40px;}/*红桃*/.small_up3{background-position:-57px-40px;}/*梅花*/.small_up4{background-position:-38px-40px;}/*方块*//*小图标黑红梅方四种图片-下偏向*/.small_down1{background-position:0-51px;}/*黑桃*/.small_down2{background-position:-19px-51px;}/*红桃*/.small_down3{background-position:-57px-51px;}/*梅花*/.small_down4{background-position:-38px-51px;}/*方块*//*A~k数字图片-左上角*/.nA{background-position:-75px0px;left:4px;}.n2{background-position:-87px0px;}.n3{background-position:-100px0px;}.n4{background-position:-113px0px;}.n5{background-position:-126px0px;}.n6{background-position:-139px0px;}.n7{background-position:-152px0px;}.n8{background-position:-165px0px;}.n9{background-position:-178px0px;}.n10{background-position:-191px0px;left:-4px;width:21px;}.nJ{background-position:-214px0px;left:4px;}.nQ{background-position:-227px0px;left:2px;}.nK{background-position:-241px0px;left:0px;}/*A~k数字图片-右下角*/.nA_h{background-position:-75px-22px;right:2px;}.n2_h{background-position:-87px-22px;}.n3_h{background-position:-100px-22px;}.n4_h{background-position:-113px-22px;}.n5_h{background-position:-126px-22px;}.n6_h{background-position:-139px-22px;}.n7_h{background-position:-152px-22px;}.n8_h{background-position:-165px-22px;}.n9_h{background-position:-178px-22px;}.n10_h{background-position:-191px-22px;right:3px;width:21px;}.nJ_h{background-position:-214px-22px;right:2px;}.nQ_h{background-position:-227px-22px;right:4px;}.nK_h{background-position:-241px-22px;right:6px;}/*A~k数字图片-左上角白色字*/.nA_red{background-position:-75px-11px;}.n2_red{background-position:-87px-11px;}.n3_red{background-position:-100px-11px;}.n4_red{background-position:-113px-11px;}.n5_red{background-position:-126px-11px;}.n6_red{background-position:-139px0px;}.n7_red{background-position:-152px-11px;}.n8_red{background-position:-165px0px;}.n9_red{background-position:-178px-11px;}.n10_red{background-position:-191px0px;}.nJ_red{background-position:-214px-11px;}.nQ_red{background-position:-227px-11px;}.nK_red{background-position:-240px-11px;}/*A~k数字图片-右下角白色字*/.nA_h_red{background-position:-75px-33px;}.n2_h_red{background-position:-87px-33px;}.n3_h_red{background-position:-100px-33px;}.n4_h_red{background-position:-113px-33px;}.n5_h_red{background-position:-126px-33px;}.n6_h_red{background-position:-139px-33px;}.n7_h_red{background-position:-152px-33px;}.n8_h_red{background-position:-165px-33px;}.n9_h_red{background-position:-178px-33px;}.n10_h_red{background-position:-191px-33px;}.nJ_h_red{background-position:-214px-33px;}.nQ_h_red{background-position:-227px-33px;}.nK_h_red{background-position:-241px-33px;}/*J,Q,K的地位有点偏移*/.J1{left:23px;top:23px;z-index:1;}.J4{left:80px;top:128px;}/*J,Q,K的两头图片*/.BJ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px#000solid;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif)no-repeat0px-62px;}.BQ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px#000solid;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif)no-repeat-80px-62px;}.BK{display:block;width:80px;height:130px;left:21px;top:20px;border:1px#000solid;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif)no-repeat-160px-62px;}.back{width:100%;height:100%;background:url(http://www.blueidea.com/articleimg/2009/02/6382/cardback.gif);}#idDrag1{left:10px;top:15px;}#idDrag2{left:150px;top:15px;}#idDrag3{left:290px;top:15px;}#idDrag4{left:430px;top:15px;}#idDrag5{left:570px;top:15px;}#idDrag6{left:10px;top:45px;}#idDrag7{left:150px;top:45px;}#idDrag8{left:290px;top:45px;}#idDrag9{left:430px;top:45px;}#idDrag10{left:570px;top:45px;}#idDrag11{left:10px;top:75px;}#idDrag12{left:150px;top:75px;}#idDrag13{left:290px;top:75px;}#idDrag14{left:430px;top:75px;}#idDrag15{left:570px;top:75px;}</style><scripttype="text/javascript">被修正了,本来100,如今10000this.me.node.sub_x=e.clientX-this.me.node.offsetLeft;this.me.node.sub_y=e.clientY-this.me.node.offsetTop;this.me.node.onmousemove=this.me.mouse_move;this.me.node.onmouseup=this.me.mouse_up;}move.prototype.mouse_move=function(e){e=window.event?window.event:e;this.me.node.style.cursor="pointer";this.me.node.style.left=e.clientX-this.me.node.sub_x+"px";this.me.node.style.top=e.clientY-this.me.node.sub_y+"px";this.me.node.onmouseup=this.me.mouse_up;}move.prototype.mouse_up=function(){this.me.node.onmousemove="";this.me.node.style.cursor="move";this.me.node.style.zIndex=this.me.zindex; //复原被增添的z-indexvarz_index=this.me.zindex; //猎取以后z-indexfor(vari=0;i<document.getElementsByTagName("div").length;i++){ //猎取最年夜z-indexif(z_index<document.getElementsByTagName("div").style.zIndex){z_index=parseInt(document.getElementsByTagName("div").style.zIndex);}}this.me.node.style.zIndex=z_index+1; //挪动后的z-index,而不是复原}window.onload=function(){newmove("idDrag1");newmove("idDrag2");newmove("idDrag3");newmove("idDrag4");newmove("idDrag5");newmove("idDrag6");newmove("idDrag7");newmove("idDrag8");newmove("idDrag9");newmove("idDrag10");newmove("idDrag11");newmove("idDrag12");newmove("idDrag13");newmove("idDrag14");newmove("idDrag15");}//--></script></head><body><divclass="card"id="idDrag1"><divclass="front"><bclass="N1nA"></b><emclass="Firstsmall_up1"></em><spanclass="BMup1"></span><emclass="Lastsmall_down1"></em><bclass="N2nA_h"></b></div></div><divclass="card"id="idDrag2"><divclass="front"><bclass="N1n2_red"></b><emclass="Firstsmall_up2"></em><spanclass="AM1up2"></span><spanclass="CM1down2"></span><emclass="Lastsmall_down2"></em><bclass="N2n2_h_red"></b></div></div><divclass="card"id="idDrag3"><divclass="front"><bclass="N1n3"></b><emclass="Firstsmall_up3"></em><spanclass="AM1up3"></span><spanclass="BMup3"></span><spanclass="CM1down3"></span><emclass="Lastsmall_down3"></em><bclass="N2n3_h"></b></div></div><divclass="card"id="idDrag4"><divclass="front"><bclass="N1n4_red"></b><emclass="Firstsmall_up4"></em><spanclass="A1up4"></span><spanclass="A4down4"></span><spanclass="C1up4"></span><spanclass="C4down4"></span><emclass="Lastsmall_down4"></em><bclass="N2n4_h_red"></b></div></div><divclass="card"id="idDrag5"><divclass="front"><bclass="N1n5"></b><emclass="Firstsmall_up1"></em><spanclass="A1up1"></span><spanclass="A4down1"></span><spanclass="BMup1"></span><spanclass="C1up1"></span><spanclass="C4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2n5_h"></b></div></div><divclass="card"id="idDrag6"><divclass="front"><bclass="N1n6"></b><emclass="Firstsmall_up1"></em><spanclass="A1up1"></span><spanclass="AMup1"></span><spanclass="A4down1"></span><spanclass="C1up1"></span><spanclass="CMup1"></span><spanclass="C4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2n6_h"></b></div></div><divclass="card"id="idDrag7"><divclass="front"><bclass="N1n7_red"></b><emclass="Firstsmall_up2"></em><spanclass="A1up2"></span><spanclass="AMup2"></span><spanclass="A4down2"></span><spanclass="BMup2"></span><spanclass="C1up2"></span><spanclass="CMup2"></span><spanclass="C4down2"></span><emclass="Lastsmall_down2"></em><bclass="N2n7_h_red"></b></div></div><divclass="card"id="idDrag8"><divclass="front"><bclass="N1n8"></b><emclass="Firstsmall_up3"></em><spanclass="A1up3"></span><spanclass="A2up3"></span><spanclass="A3down3"></span><spanclass="A4down3"></span><spanclass="C1up3"></span><spanclass="C2up3"></span><spanclass="C3down3"></span><spanclass="C4down3"></span><emclass="Lastsmall_down1"></em><bclass="N2n8_h"></b></div></div><divclass="card"id="idDrag9"><divclass="front"><bclass="N1n9_red"></b><emclass="Firstsmall_up4"></em><spanclass="A1up4"></span><spanclass="A2up4"></span><spanclass="A3down4"></span><spanclass="A4down4"></span><spanclass="BMup4"></span><spanclass="C1up4"></span><spanclass="C2up4"></span><spanclass="C3down4"></span><spanclass="C4down4"></span><emclass="Lastsmall_down4"></em><bclass="N2n9_h_red"></b></div></div><divclass="card"id="idDrag10"><divclass="front"><bclass="N1n10"></b><emclass="Firstsmall_up1"></em><spanclass="A1up1"></span><spanclass="A2up1"></span><spanclass="A3down1"></span><spanclass="A4down1"></span><spanclass="B1up1"></span><spanclass="B2down1"></span><spanclass="C1up1"></span><spanclass="C2up1"></span><spanclass="C3down1"></span><spanclass="C4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2n10_h"></b></div></div><divclass="card"id="idDrag11"><divclass="front"><bclass="N1nJ"></b><emclass="Firstsmall_up1"></em><spanclass="J1up1"></span><spanclass="BJ"></span><spanclass="J4down1"></span><emclass="Lastsmall_down1"></em><bclass="N2nJ_h"></b></div></div><divclass="card"id="idDrag12"><divclass="front"><bclass="N1nQ_red"></b><emclass="Firstsmall_up2"></em><spanclass="J1up2"></span><spanclass="BQ"></span><spanclass="J4down2"></span><spanclass="Lastsmall_down2"></span><bclass="N2nQ_h_red"></b></div></div><divclass="card"id="idDrag13"><divclass="front"><bclass="N1nK"></b><emclass="Firstsmall_up3"></em><spanclass="J1up3"></span><spanclass="BK"></span><spanclass="J4down3"></span><emclass="Lastsmall_down3"></em><bclass="N2nK_h"></b></div></div><divclass="card"id="idDrag14"><divclass="front"><bclass="N1nKnK_red"></b><emclass="Firstsmall_up4"></em><spanclass="J1up4"></span><spanclass="BK"></span><spanclass="J4down4"></span><emclass="Lastsmall_down4"></em><bclass="N2nK_hnK_h_red"></b></div></div><divclass="card"id="idDrag15"><divclass="back"></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

<styletype="text/css">
.card{width:125px;height:170px;position:absolute;overflow:hidden;border:1px#c0c0c0solid;}
/*两头图片通用设置*/
span{
display:block;
width:20px;
height:30px;
line-height:30px;
position:absolute;
font-size:26px;
left:22px;
top:130px;
}
/*小图片通用设置*/
/*数字通用设置*/
b{display:block;width:15px;height:10px;position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}
/*各坐标点地位*/
.A1{left:21px;top:10px;}
.A2{left:21px;top:50px;}
.A3{left:21px;top:90px;}
.A4{left:21px;top:130px;}
.B1{left:51px;top:76px;}
.C1{left:83px;top:10px;}
.C2{left:83px;top:50px;}
.C3{left:83px;top:90px;}
.C4{left:83px;top:130px;}
.scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
.index{
font-size:16px;
font-weight:bold;
text-align:center;
width:14px;
height:36px;
position:absolute;
left:5px;
top:0px;
}
.end{
font-size:16px;
font-weight:bold;
text-align:center;
width:14px;
height:36px;
position:absolute;
right:5px;
bottom:0px;
}
.red{color:#ff0000;}
.font{font-size:34px;}
</style>

<divclass="card">
<divclass="front">
<bclass="N1n10"></b>
<emclass="Firstsmall_up1"></em>
<spanclass="A1up1"></span>
<spanclass="A2up1"></span>
<spanclass="A3down1"></span>
<spanclass="A4down1"></span>
<spanclass="B1up1"></span>
<spanclass="B2down1"></span>
<spanclass="C1up1"></span>
<spanclass="C2up1"></span>
<spanclass="C3down1"></span>
<spanclass="C4down1"></span>
<emclass="Lastsmall_down1"></em>
<bclass="N2n10_h"></b>
</div>
</div>

你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。

只看该作者 · 发表于 2015-1-18 05:05:55

可以使用CSS检查工具进行设计。

仓酷云 · 发表于 2015-1-25 19:32:01

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-2-3 19:58:27

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-2-9 06:29:26

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-2-27 04:20:22

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-8 22:13:00

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-3-16 19:16:28

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-23 04:40:18

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发css sprites把良多小图集成在一张图片上

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子