css sprites + 滑动门

最新推荐文章于 2024-09-06 09:38:49 发布

nishuishenhan

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量598

点赞数

分类专栏： html js css 文章标签： css url header float db2 div

本文链接：https://blog.csdn.net/nishuishenhan/article/details/4542382

版权

html js css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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="#" οnclick="showContent1()"><span id="s1">baidu</span></a> <a id="a2" href="#" mce_href="#" οnclick="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

<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="#" οnclick="showContent1()"><span id="span1" >shortText</span></a></li> <li><a id="a2" href="#" mce_href="#" οnclick="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>

nishuishenhan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css sprites + 滑动门

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

扫一扫

专栏目录