返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
易采站长站-移动端
搜索
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
CSS网页实例：斜角滑动门导航条
2019-03-14 22:56:20
王旭
.tab .one a:hover span,.tab .one a:active span,.tab .one .on:link span,.tab .one .on:visited span{ background-position:left -212px; padding-left:30px; color:#000}
</style>
用到的图片：
效果：
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>http://www.zishu.cn</title> <style> .tab{float:left; font-size:12px; line-height:1.8} .tab li{display:inline;} .tab li a{background:url(//files.jb51.net/file_images/css/2008101719195879677802.gif) no-repeat;float:left;text-decoration:none;} .tab li a span{ display:block; background:url(//files.jb51.net/file_images/css/2008101719195879677802.gif) no-repeat; padding:5px 10px 5px 20px;} .tab a:link,.tab a:visited{ background-position:right -51px; text-decoration:none} .tab a:hover,.tab a:active,.tab a.on,.tab a.on:link,.tab a.on:visited{ background-position:right -162px;} .tab a:link span,.tab a:visited span{ background-position:0 0; color:#FFF; text-decoration:none} .tab a:hover span,.tab a:active span,.tab a.on span,.tab a.on:link span,.tab a.on:visited span{ background-position:0 -107px; color:#000;} .tab .one a:link span,.tab .one a:visited span{ background-position:left -262px; padding-left:30px;} .tab .one a:hover span,.tab .one a:active span,.tab .one .on:link span,.tab .one .on:visited span{ background-position:left -212px; padding-left:30px; color:#000} </style> </head> <body> <ul class="tab"> <li class="one"><a href="https://www.jb51.net" target="_blank" class="on"><span>城市首页</span></a></li> <li><a href="kAAE.php"><span>房屋租售</span></a></li> <li><a href="https://www.jb51.net" target="_blank"><span>招聘求职</span></a></li> <li><a href="https://www.jb51.net" target="_blank"><span>同城活动</span></a></li> <li><a href="https://www.jb51.net" target="_blank"><span>家政服务</span></a></li> <li><a href="https://www.jb51.net" target="_blank"><span>同城寻缘</span></a></li> <li><a href="https://www.jb51.net" target="_blank"><span>二手市场</span></a></li> <li><a href="https://www.jb51.net/" target="_blank"><span>车辆买卖</span></a></li> <li><a href="https://www.jb51.net/" target="_blank"><span>学习培训</span></a></li> </ul> <div style="font-size:12px; margin:50px; clear:both"> 转载请注明出处：<a href="http://www.zishu.cn/blogview.asp?logID=762">子鼠斜角滑动门导航条</a></div> </body> </html> <div class="pagination"><a title="Page"> <b>2</b>/<b>3</b> </a> <a href="/cos/2019/0314/272814.shtml">首页</a> <a href="/cos/2019/0314/272814.shtml">上一页</a> <a href="/cos/2019/0314/272814.shtml">1</a> <b>2</b> <a href="/cos/2019/0314/272814_3.shtml">3</a> <a href="/cos/2019/0314/272814_3.shtml">下一页</a> <a href="/cos/2019/0314/272814_3.shtml">尾页</a></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0307/1096003.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg" src="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg"></div> <div class="txtInfo"><h3>H5页面使用audio标签播放音频</h3><div class="extr clearfix"><p><span class="time fl">2023-03-07</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094447.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg"></div> <div class="txtInfo"><h3>2345手机助手怎么下载音乐/铃声 2345手机助手下载音</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090698.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg"></div> <div class="txtInfo"><h3>靠谱助手怎么ROOT 靠谱助手一键root图文教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090498.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg"></div> <div class="txtInfo"><h3>js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090469.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg"></div> <div class="txtInfo"><h3>安卓模拟器bluestacks安装不了解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0130/1088144.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp" src="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp"></div> <div class="txtInfo"><h3>CSS填充和宽高详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-30</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0118/1087028.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg"></div> <div class="txtInfo"><h3>photoshop打造真人手绘图</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0108/1084966.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg"></div> <div class="txtInfo"><h3>XSplit登陆慢、无法登陆的解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084604.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg"></div> <div class="txtInfo"><h3>电子书制作排版教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">18万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084448.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg"></div> <div class="txtInfo"><h3>PP加速器新窗口独立视频功能</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0307/1096003.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg" src="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg"></div> <div class="txtInfo"><h3>H5页面使用audio标签播放音频</h3><div class="extr clearfix"><p><span class="time fl">2023-03-07</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094447.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg"></div> <div class="txtInfo"><h3>2345手机助手怎么下载音乐/铃声 2345手机助手下载音</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090698.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg"></div> <div class="txtInfo"><h3>靠谱助手怎么ROOT 靠谱助手一键root图文教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090498.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg"></div> <div class="txtInfo"><h3>js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090469.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg"></div> <div class="txtInfo"><h3>安卓模拟器bluestacks安装不了解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0130/1088144.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp" src="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp"></div> <div class="txtInfo"><h3>CSS填充和宽高详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-30</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0118/1087028.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg"></div> <div class="txtInfo"><h3>photoshop打造真人手绘图</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0108/1084966.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg"></div> <div class="txtInfo"><h3>XSplit登陆慢、无法登陆的解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084604.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg"></div> <div class="txtInfo"><h3>电子书制作排版教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">18万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084448.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg"></div> <div class="txtInfo"><h3>PP加速器新窗口独立视频功能</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2019/0314/272814.shtml", "title": "CSS网页实例：斜角滑动门导航条-易采站长站", "description": "斜角导航条看上去立体感比较强，但实现起来比较麻烦；这是前几天写的一个测试代码，实现时，本来想用简单的图片加负数来实现；但GIF图片对半透明的效果无法有很好的支持；所以", "pubDate": "2019-03-14 T 22:56:20+08:00", "upDate": "2019-03-14 T 22:56:20+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2019/0314/272814.shtml", "wapUrl":"https://www.easck.com/cos/2019/0314/272814.shtml", "fromSrc":"易采站长站" } } } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>
