CSS Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需 顧忌這個問題。
CSS 滑動門 即背景圖像的可層疊性，並允許他們在彼此之上進行滑動，以創造一些特殊的效果。一般使用<a><span></span></a>來實現。
下面是一個demo。
demo2
<textarea cols="50" rows="15" name="code" class="xhtml"><html> <head> <!--link href="./reset.css" rel="stylesheet" type="text/css"--> <mce:style><!-- .tab{ width:448px; } .tab .header{ background-color:#DEECFD; border:1px solid; border-color:#8DB2E3; border-bottom-color:#8DB2E3; padding:0px 0px 3px 0px; } .tab .header .inner{ height:22px; background-color:#CEDFF5; border-bottom:1px solid; border-bottom-color:#8DB2E3; } .tab .header ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } .tab .header li{ float:left; list-style:none; } .tab .header a{ float:left; text-decoration: none; padding:1px 0 0px 4px; outline:none; star:expression(this.onFocus=this.blur()); } .tab .header span{ height:22px; font-size:14px; color:#15428B; line-height:22px; padding:2px 10px 0px 7px; font-family:tahoma,arial,helvetica; } .tab .tab1visible #a1{ background:url(img/tabs-sprite-left.gif) left 2px no-repeat; position: relative; top: 1px; } .tab .tab1visible #span1{ background:url(img/tabs-sprite-right.gif) right top no-repeat; font-weight:bold; position: relative; top: 1px; } .tab .tab1visible #a2{ background:url(img/tabs-sprite-left.gif) left -98px no-repeat; } .tab .tab1visible #span2{ background:url(img/tabs-sprite-right.gif) right -98px no-repeat; } .tab .tab2visible #a1{ background:url(img/tabs-sprite-left.gif) left -98px no-repeat; } .tab .tab2visible #span1{ background:url(img/tabs-sprite-right.gif) right -98px no-repeat; } .tab .tab2visible #a2{ background:url(img/tabs-sprite-left.gif) left 2px no-repeat; position: relative; top: 1px; } .tab .tab2visible #span2{ background:url(img/tabs-sprite-right.gif) right top no-repeat; font-weight:bold; position: relative; top: 1px; } .tab .body{ border:1px solid; border-top:0px solid; border-color:#8DB2E3; font-size:13px; font-family:helvetica,tahoma,verdana,sans-serif; } .tab .body div{ word-wrap:break-word; padding:1px 7px 8px 7px; } .tab .visible #content1 { display:block; } .tab .visible #content2{ display:none; } .tab .hidden1{ } .tab .hidden1 #content1 { display:block; } .tab .hidden1 #content2 { display:none; } .tab .hidden2{ } .tab .hidden2 #content1 { display:none; } .tab .hidden2 #content2 { display:block; } --></mce:style><style mce_bogus="1">.tab{ width:448px; } .tab .header{ background-color:#DEECFD; border:1px solid; border-color:#8DB2E3; border-bottom-color:#8DB2E3; padding:0px 0px 3px 0px; } .tab .header .inner{ height:22px; background-color:#CEDFF5; border-bottom:1px solid; border-bottom-color:#8DB2E3; } .tab .header ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } .tab .header li{ float:left; list-style:none; } .tab .header a{ float:left; text-decoration: none; padding:1px 0 0px 4px; outline:none; star:expression(this.onFocus=this.blur()); } .tab .header span{ height:22px; font-size:14px; color:#15428B; line-height:22px; padding:2px 10px 0px 7px; font-family:tahoma,arial,helvetica; } .tab .tab1visible #a1{ background:url(img/tabs-sprite-left.gif) left 2px no-repeat; position: relative; top: 1px; } .tab .tab1visible #span1{ background:url(img/tabs-sprite-right.gif) right top no-repeat; font-weight:bold; position: relative; top: 1px; } .tab .tab1visible #a2{ background:url(img/tabs-sprite-left.gif) left -98px no-repeat; } .tab .tab1visible #span2{ background:url(img/tabs-sprite-right.gif) right -98px no-repeat; } .tab .tab2visible #a1{ background:url(img/tabs-sprite-left.gif) left -98px no-repeat; } .tab .tab2visible #span1{ background:url(img/tabs-sprite-right.gif) right -98px no-repeat; } .tab .tab2visible #a2{ background:url(img/tabs-sprite-left.gif) left 2px no-repeat; position: relative; top: 1px; } .tab .tab2visible #span2{ background:url(img/tabs-sprite-right.gif) right top no-repeat; font-weight:bold; position: relative; top: 1px; } .tab .body{ border:1px solid; border-top:0px solid; border-color:#8DB2E3; font-size:13px; font-family:helvetica,tahoma,verdana,sans-serif; } .tab .body div{ word-wrap:break-word; padding:1px 7px 8px 7px; } .tab .visible #content1 { display:block; } .tab .visible #content2{ display:none; } .tab .hidden1{ } .tab .hidden1 #content1 { display:block; } .tab .hidden1 #content2 { display:none; } .tab .hidden2{ } .tab .hidden2 #content1 { display:none; } .tab .hidden2 #content2 { display:block; }</style> <mce:script type="text/javascript" src="./yui/yahoo/yahoo-min.js" mce_src="yui/yahoo/yahoo-min.js"></mce:script> <mce:script type="text/javascript" src="./yui/dom/dom-min.js" mce_src="yui/dom/dom-min.js"></mce:script> <mce:script type="text/javascript"><!-- function showContent1(){ YAHOO.util.Dom.removeClass('body','visible'); YAHOO.util.Dom.removeClass('body','hidden2'); YAHOO.util.Dom.removeClass('header','tab2visible'); YAHOO.util.Dom.addClass('header','tab1visible'); YAHOO.util.Dom.addClass('body','hidden1'); } function showContent2(){ YAHOO.util.Dom.removeClass('body','visible'); YAHOO.util.Dom.removeClass('body','hidden1'); YAHOO.util.Dom.removeClass('header','tab1visible'); YAHOO.util.Dom.addClass('header','tab2visible'); YAHOO.util.Dom.addClass('body','hidden2'); } // --></mce:script> </head> <body> <div class="tab"> <div id="header" class="header tab1visible"> <div class="inner"> <ul> <li><a id="a1" href="#" mce_href="#" onclick="showContent1()"><span id="span1" >shortText</span></a></li> <li><a id="a2" href="#" mce_href="#" onclick="showContent2()"><span id="span2" >longText</span></a></li> </ul> </div> </div> <div id="body" class="body visible" > <div id="content1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. <br/><br/>Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p> </div> <div id="content2"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p> </div> </div> </div> </body> </html> </textarea>