K9 通用版 博客版 主题版 地方门户版 企业版 |   企业(ASP) 分类 使用 分享 疑问 模板 建议 帮助 错误 其他
+新建主题 [Ajax]
填写帐号密码即可完成注册
+新建话题 最新回复排序 最新主题排序 精华帖子

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

1Next >

99163 发表于：10-09-08 18:55 [添加收藏] 楼主 [回复] #Top#
99163 人气：865 积分：1904 金币：6076
KC元老 灌水狂人

<!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)
随机阅读 [错误] 转移服务器出错 在线等解决！ (12-12-15) [疑问] 为什么不把地方门户单独分一个版块出来呢？ (12-08-01) [疑问] PHP版本，安装完模块后，为什么是这样的？ (11-06-14) [使用] KINGCMS做图片站好吗 用什么版本的好 (11-05-01) [其他] 写好文章标题 想不提升网站流量都难 (11-04-29)
218.107.23.* 发表于：11-01-18 17:23 沙发 [回复] #Top#
KingCMS官方网站网友
很好的分享
nb 发表于：11-01-18 17:34 板凳 [回复] #Top#
nb 人气：19 积分：1000 金币：2345
已收藏。感谢分享。
lain2k 发表于：11-01-19 17:35 5楼 [回复] #Top#
lain2k 人气：46 积分：48 金币：337
还成

1Next >

发表回复

帐号 匿名发布 审核后可见 [加载完整在线编辑器]
内容
验证码
KingCMS 内容管理系统

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

Copyright © 2004-2015 Focuznet All rights reserved.

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

中奖了!