教程集 > 脚本编程 > javascript > 正文仿网易自适应宽度Tab选项卡菜单效果

仿网易自适应宽度Tab选项卡菜单效果

发布时间：2016-10-25 编辑：jiaochengji.com

教程集为您提供仿网易自适应宽度Tab选项卡菜单效果等资源，欢迎您收藏本站，我们将为您提供最新的仿网易自适应宽度Tab选项卡菜单效果资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >仿网易自适应宽度Tab选项卡菜单效果 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿网易自适应宽度Tab选项卡菜单效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body { font-size: 14px; } ol li { margin: 8px; } #con { font-size: 12px; margin: 0px auto; width: 600px; } #tags { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 0px 10px; width: 400px; padding-top: 0px; height: 23px; } #tags li { background: url(http://www.jiaochengji.com/effect/images/200909051045/tagleft.gif) no-repeat left bottom; float: left; margin-right: 1px; list-style-type: none; height: 23px; } #tags li a { padding-right: 10px; padding-left: 10px; background: url(http://www.jiaochengji.com/effect/images/200909051045/tagright.gif) no-repeat right bottom; float: left; padding-bottom: 0px; color: #999;line-height: 23px; padding-top: 0px; height: 23px; text-decoration: none; } #tags li.emptyTag { background: none transparent scroll repeat 0% 0%; width: 4px; } #tags li.selectTag { background-position: left top; margin-bottom: -2px; position: relative; height: 25px; } #tags li.selectTag a { background-position: right top; color: #000; line-height: 25px; height: 25px; } #tagContent { border-right: #aecbd4 1px solid; padding-right: 1px; border-top: #aecbd4 1px solid; padding-left: 1px; padding-bottom: 1px; border-left: #aecbd4 1px solid;padding-top:1px; border-bottom: #aecbd4 1px solid; background-color: #fff; } .tagContent { padding-right: 10px; display: none; padding-left: 10px; background: url(http://www.jiaochengji.com/effect/images/200909051045/bg.gif) repeat-x; padding-bottom: 10px; width: 576px; color: #474747; padding-top: 10px; height: 250px; } #tagContent div.selectTag { display: block; } </style> </head> <body>

<ul id="tags"> <li>中国站长天空</li> <li class="selectTag">建站服务</li> <li>建站代码</li> </ul>

网址：http://www.jiaochengji.com

网址：http://www.jiaochengji.com/service/

网址：http://www.jiaochengji.com/code/

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
仿网易自适应宽度Tab选项卡菜单效果
 基于JQuery的6个Tab选项卡插件
 用jQuery打造TabPanel效果代码
 电脑宽带上网经常掉线解决方案
 基于Babylonjs自制WebGL3D模型编辑器
 纯 CSS 选项卡的实现例子
 js自适应滑动门代码
 jquery tools之tabs 选项卡/页签
 css 自适应宽度圆角滑动门
 Javascript中常用选项卡3种写法

上一篇：漂亮Tab滑动选项卡菜单效果下一篇：仿Discuz论坛下拉菜单

[关闭]

仿网易自适应宽度Tab选项卡菜单效果

最近更新

浏览排行