不用JS纯CSS实现滑动门选项卡效果这个你得收藏

1Next >

99163	发表于：10-09-08 18:55 [取消收藏] [添加收藏] 楼主 [回复] #Top#
人气：865 积分：1904 金币：6076	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>WEB前端技术</title> <style> #newBox { position:absolute; width:240px; height:170px; border:1px solid #CCC; } #newContent { margin:0px; width:240px; height:170px; overflow:hidden; } #newCaption { position:absolute; left:1px; } ul{ margin:0px; padding-left:3px; padding-top:40px; background:url("http://www.boxstory.cn/Upload/test.gif") no-repeat 1px 1px; } #a{background-position:1px 1x;} #b{background-position:79px 1px;} #c{background-position:159px 1px;} li { padding-left:5px; height:27px; font-size:12px; white-space:nowrap; overflow:hidden; } #newCaption a { display:block; float:left; border-right:1px solid #CCCCCC; border-bottom:2px solid #CCCCCC; margin-top:3px; width:78px; height:31px; line-height:31px; text-align:center; font-size:12px; color:#000; text-decoration:none; font-weight:bold; } </style> </head> <body> <div id="newBox"> <div id="newCaption"> <a href="#a" title="">WEB前端技术</a><a href="#b" title="">WEB前端开发</a><a href="#c" style="border-right:none" title="">WEB前端开发</a></dt> </div> <div id="newContent"> <ul id="a"> <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li> <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li> <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li> <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li> <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li> <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li> </ul> <ul id="b"> <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li> <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li> <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li> <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li> <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li> <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li> </ul> <ul id="c"> <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li> <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li> <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li> <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li> <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li> <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li> </ul> </div> </div> </body> </html> Ta最近还发表过 [其他] 请问还有多少老用户在 (18-02-24) [模板] 这次真的搞不定，三级dropdown弹出菜单。 (18-02-10) [使用] 修改碎片的文本框为编辑器　源文件下载　无错 (18-01-18) [使用] 如何尽快解决购物车white.gif图标问题 (17-12-10) [使用] 还有人在用KINGCMS PHP吗感觉好淡了。。 (17-10-15) 随机阅读 [疑问] 请问如何升级KindEditor? (13-08-15) [疑问] kingcms php留言本过滤不严，管理页会出错 (13-05-20) [帮助] Web 3.0思维发散 (12-01-05) [其他] 落水，露“泡”了，这个，你懂的~~ (11-05-08) [其他] 特等奖有几个啊。还有没有了？ (10-10-13)

99163

发表于：10-09-08 18:55 [取消收藏] [添加收藏] 楼主 [回复] #Top#

人气：865 积分：1904 金币：6076

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>WEB前端技术</title>
<style>
#newBox {
       position:absolute;
       width:240px;
       height:170px;
       border:1px solid #CCC;
       }
#newContent {
       margin:0px;
       width:240px;
       height:170px;
       overflow:hidden;
       }
#newCaption {
       position:absolute;
       left:1px;
       }
ul{
margin:0px;
padding-left:3px;
padding-top:40px;
background:url("http://www.boxstory.cn/Upload/test.gif") no-repeat 1px 1px;
}
#a{background-position:1px 1x;}
#b{background-position:79px 1px;}
#c{background-position:159px 1px;}

li {
       padding-left:5px;
       height:27px;
       font-size:12px;
       white-space:nowrap;
       overflow:hidden;
       }
#newCaption a {
       display:block;
       float:left;
       border-right:1px solid #CCCCCC;
       border-bottom:2px solid #CCCCCC;
       margin-top:3px;
       width:78px;
       height:31px;
       line-height:31px;
       text-align:center;
       font-size:12px;
       color:#000;
       text-decoration:none;
       font-weight:bold;
       }
</style>
</head>
<body>
<div id="newBox">

<div id="newCaption">
<a href="#a" title="">WEB前端技术</a><a href="#b" title="">WEB前端开发</a><a href="#c" style="border-right:none" title="">WEB前端开发</a></dt>
</div>
<div id="newContent">

<ul id="a">
       <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li>
       <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li>
       <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li>
       <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li>
       <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li>
       <li><a href="chinesefeng.com" title="WEB前端技术">[WEB前端技术]WEB前端技术B/S软件 </a></li>
</ul>

<ul id="b">
       <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li>
       <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li>
       <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li>
       <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li>
       <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li>
       <li><a href="chinesefeng.com" title="WEB前端开发">[WEB前端开发]WEB前端开发网页标准</a></li>
</ul>

<ul id="c">
       <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li>
       <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li>
       <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li>
       <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li>
       <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li>
       <li><a href="chinesefeng.com" title="前端开发">[前端开发]WEB前端开发技术</a></li>
</ul>

</div>

</div>
</body>
</html>

Ta最近还发表过 [其他] 请问还有多少老用户在 (18-02-24) [模板] 这次真的搞不定，三级dropdown弹出菜单。 (18-02-10) [使用] 修改碎片的文本框为编辑器　源文件下载　无错 (18-01-18) [使用] 如何尽快解决购物车white.gif图标问题 (17-12-10) [使用] 还有人在用KINGCMS PHP吗感觉好淡了。。 (17-10-15)

随机阅读 [疑问] 请问如何升级KindEditor? (13-08-15) [疑问] kingcms php留言本过滤不严，管理页会出错 (13-05-20) [帮助] Web 3.0思维发散 (12-01-05) [其他] 落水，露“泡”了，这个，你懂的~~ (11-05-08) [其他] 特等奖有几个啊。还有没有了？ (10-10-13)

218.107.23.*	发表于：11-01-18 17:23 沙发 [回复] #Top#
	很好的分享

nb	发表于：11-01-18 17:34 板凳 [回复] #Top#
人气：19 积分：1000 金币：2345	已收藏。感谢分享。

lain2k	发表于：11-01-19 17:35 5楼 [回复] #Top#
人气：46 积分：48 金币：337	还成

1Next >

发表回复

帐号	匿名发布审核后可见 [加载完整在线编辑器]
内容
验证码	计算题太难?换个简单点的.

我已认真阅读服务条款，并遵守具体协议内容

KingCMS 内容管理系统

关于我们联系我们广告报价付款方式站点导航

广州唯众网络科技有限公司粤ICP备08008106号

不用JS纯CSS实现滑动门选项卡效果 这个你得收藏

发表回复

不用JS纯CSS实现滑动门选项卡效果这个你得收藏