css sprites + 滑动门

来源：互联网发布：少年泰坦知乎编辑：程序博客网时间：2024/04/19 18:56

CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
CSS 滑动门即背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。一般使用<a><span></span></a>来实现。

下面是一个demo。

<html><head><mce:style></mce:style><style mce_bogus="1">.ta{ width:100%; height:100%;}.ta .title{ height:20px;}.ta .title td{ width:100%; border-bottom:0.1cm solid #F4963C;}.ta .title #a1{ float:left; background:url(tab_banner.gif) left -25px no-repeat; padding:0 0 0 4px; text-decoration: none;}.ta .title #a1 #s1{ background:url(tab_banner.gif) right -25px no-repeat; }.ta .title #a2{ float:left; background:url(tab_banner.gif) left top no-repeat; padding:0 0 0 4px; text-decoration: none;}.ta .title #a2 #s2{ background:url(tab_banner.gif) right top no-repeat; }</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" ></mce:script></head><body><table class="ta"> <tr id="title" class="title" > <td><a id="a1" href="#" mce_href="#" onclick="showContent1()"><span id="s1">baidu</span></a> <a id="a2" href="#" mce_href="#" onclick="showContent2()"><span id="s2">http://www.google.cn</span></a></td> </tr> <tr> <td> <div id="tab1c"> <iframe src="http://www.baidu.com" mce_src="http://www.baidu.com" frameborder="0" scrolling="auto" height="550px" style="width:100%"></iframe> </div> <div id="tab2c" style="display:none" mce_style="display:none"> <iframe src="http://www.google.cn" mce_src="http://www.google.cn" frameborder="0" scrolling="auto" height="550px" style="width:100%"></iframe> </div> </td> </tr></table></body></html>

demo2

<textarea cols="50" rows="15" name="code" class="xhtml"><html><head><mce:style></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"></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>