css sprites把很多小图集成在一张图片上

2020-05-11 07:49:30易采站长站整理

.BK{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;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>

<!–A字符–>

<div class="card" style="left:10px;top:15px;">

<div class="front">

<b class="N1 nA"></b>

<em class="First small_up1"></em>

<span class="BM up1"></span>

<em class="Last small_down1"></em>

<b class="N2 nA_h"></b>

</div>

</div>

<!–2字符–>

<div class="card" style="left:150px;top:15px;">

<div class="front">

<b class="N1 n2_red"></b>

<em class="First small_up2"></em>

<span class="AM1 up2"></span>

<span class="CM1 down2"></span>

<em class="Last small_down2"></em>

<b class="N2 n2_h_red"></b>

</div>

</div>

<!–3字符–>

<div class="card" style="left:290px;top:15px;">

<div class="front">

<b class="N1 n3"></b>

<em class="First small_up3"></em>

<span class="AM1 up3"></span>

<span class="BM up3"></span>

<span class="CM1 down3"></span>

<em class="Last small_down3"></em>

<b class="N2 n3_h"></b>

</div>

</div>

<!–4字符–>

<div class="card" style="left:430px;top:15px;">

<div class="front">

<b class="N1 n4_red"></b>

<em class="First small_up4"></em>

<span class="A1 up4"></span>

<span class="A4 down4"></span>

<span class="C1 up4"></span>

<span class="C4 down4"></span>

<em class="Last small_down4"></em>

<b class="N2 n4_h_red"></b>

</div>

</div>

<!–5字符–>

<div class="card" style="left:570px;top:15px;">

<div class="front">

<b class="N1 n5"></b>

<em class="First small_up1"></em>

<span class="A1 up1"></span>

<span class="A4 down1"></span>

<span class="BM up1"></span>