- 浏览: 340000 次
- 性别:
- 来自: 蕲春->上海
文章分类
最新评论
-
duanyu010:
"Devel"选项 选项下包含了多个 gc ...
在cygwin中安装gcc编译器 -
brown802:
Event.observe('test', 'click',f ...
Prototype中的Event.observe用法 -
zhangyanan_it:
讲一下好吧!
Rails MD5 SHA1 加密用戶密碼 -
zhangyanan_it:
多谢!
Rails MD5 SHA1 加密用戶密碼 -
virusswb:
paperclip文件上传
在Rails中快速方便地使用Tiny mce编辑器
ruby on rails框架集成了大量的web2.0效果,结合现在网站大量使用选项卡效果,我们也得让我们的ror项目结合潮流,下面有多个实例供大家参考使用:
1:仿126邮箱选项卡 鼠标点击
2:鼠标经过的
3:三种简单的Tab选项卡效果
原文地址:http://www.roredu.com/rubyrails/2008/07/24/css-nav/
1:仿126邮箱选项卡 鼠标点击
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css"> <!-- body,div,ul,li{ padding:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none;} /*选项卡1*/ #Tab1{ width:460px; margin:0px; padding:0px; margin:0 auto;} /*选项卡2*/ #Tab2{ width:576px; margin:0px; padding:0px; margin:0 auto;} /*菜单class*/ .Menubox { width:100%; background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif); height:28px; line-height:28px; } .Menubox ul{ margin:0px; padding:0px; } .Menubox li{ float:left; display:block; cursor:pointer; width:114px; text-align:center; color:#949694; font-weight:bold; } .Menubox li.hover{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif); color:#739242; font-weight:bold; height:27px; line-height:27px; } .Contentbox{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:center; padding-top:8px; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <br><br> <div id="Tab1"> <div class="Menubox"> <ul> <li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li> <li id="one2" onclick="setTab('one',2,4)" >新闻2</li> <li id="one3" onclick="setTab('one',3,4)">新闻3</li> <li id="one4" onclick="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" class="hover">新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div> </div> <br> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li> <li id="two2" onclick="setTab('two',2,4)" >新闻2</li> <li id="two3" onclick="setTab('two',3,4)">新闻3</li> <li id="two4" onclick="setTab('two',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> </body> </html>
2:鼠标经过的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css"> <!-- body,div,ul,li{ padding:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none;} /*选项卡1*/ #Tab1{ width:460px; margin:0px; padding:0px; margin:0 auto;} /*选项卡2*/ #Tab2{ width:576px; margin:0px; padding:0px; margin:0 auto;} /*菜单class*/ .Menubox { width:100%; background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif); height:28px; line-height:28px; } .Menubox ul{ margin:0px; padding:0px; } .Menubox li{ float:left; display:block; cursor:pointer; width:114px; text-align:center; color:#949694; font-weight:bold; } .Menubox li.hover{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif); color:#739242; font-weight:bold; height:27px; line-height:27px; } .Contentbox{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:center; padding-top:8px; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <br><br> <div id="Tab1"> <div class="Menubox"> <ul> <li id="one1" onmouseover="setTab('one',1,4)" class="hover">新闻1</li> <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li> <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li> <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" class="hover">新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div> </div> <br> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onmouseover="setTab('two',1,4)" class="hover">新闻1</li> <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li> <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li> <li id="two4" onmouseover="setTab('two',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> </body> </html>
3:三种简单的Tab选项卡效果
<!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=gb2312" /> <title>简洁Tab</title> <style type="text/css"> <!-- body,div,ul,li{ margin:0 auto; padding:0; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none; } .main{ clear:both; padding:8px; text-align:center; } /*第一种形式*/ #tabs0 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; } .menu0{ width: 400px; } .menu0 li{ display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; background: #FFFFff; } .menu0 li.hover{ background: #f2f6fb; } #main0 ul{ display: none; } #main0 ul.block{ display: block; } /*第二种形式*/ #tabs1{ text-align:left; width:400px; } .menu1box{ position:relative; overflow:hidden; height:22px; width:400px; text-align:left; } #menu1{ position:absolute; top:0; left:0; z-index:1; } #menu1 li{ float:left; display:block; cursor:pointer; width:72px; text-align:center; line-height:21px; height:21px; } #menu1 li.hover{ background:#fff; border-left:1px solid #333; border-top:1px solid #333; border-right:1px solid #333; } .main1box{ clear:both; margin-top:-1px; border:1px solid #333; height:181px; width:400px; } #main1 ul{ display: none; } #main1 ul.block{ display: block; } /*第三种形式*/ .menu2box{ position:relative; overflow:hidden; height:22px; width:400px; text-align:left; background: #FFFFff; } #tabs2 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; } #tip2{ position:absolute; top:0; left:0; height:22px; line-height:22px; z-index:0; width:100px; background: #f2f6fb; } #menu2{ position:absolute; top:0; left:0; z-index:1; } #menu2 li{ display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(m,n){ var tli=document.getElementById("menu"+m).getElementsByTagName("li"); var mli=document.getElementById("main"+m).getElementsByTagName("ul"); for(i=0;i<tli.length;i++){ tli[i].className=i==n?"hover":""; mli[i].style.display=i==n?"block":"none"; } } /*第三种形式 利用一个背景层定位*/ var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"} function nowtab(m,n){ if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML; document.getElementById("tip"+m).style.left=n*100+'px'; document.getElementById("main2").innerHTML=m3[n]; } //--> </script> </head> <body> <br /> <br /> <!--第一种形式--> <div id="tabs0"> <ul class="menu0" id="menu0"> <li onclick="setTab(0,0)" class="hover">新闻</li> <li onclick="setTab(0,1)">评论</li> <li onclick="setTab(0,2)">技术</li> <li onclick="setTab(0,3)">点评</li> </ul> <div class="main" id="main0"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul> </div> </div> <br /> <br /> <!--第二种形式--> <div id="tabs1"> <div class="menu1box"> <ul id="menu1"> <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li> <li onmouseover="setTab(1,1)"><a href="#">评论</a></li> <li onmouseover="setTab(1,2)"><a href="#">技术</a></li> <li onmouseover="setTab(1,3)"><a href="#">点评</a></li> </ul> </div> <div class="main1box"> <div class="main" id="main1"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul> </div> </div> </div> <br /> <br /> <!--第三种形式--> <div id="tabs2"> <div class="menu2box"> <div id="tip2"></div> <ul id="menu2"> <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li> <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li> <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li> <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li> </ul> </div> <div class="main" id="main2"> 新闻内容 </div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>
原文地址:http://www.roredu.com/rubyrails/2008/07/24/css-nav/
发表评论
-
10个实用的用于图形化数据的Flash组件
2009-05-07 17:16 0Flash is an excellent technolog ... -
另一款效果炫的Flash广告图片切换效果代码
2009-04-20 09:50 0使用方法: <div cla ... -
搜狐博客的Flash广告切换效果
2009-04-20 09:44 2040//方法声明 //pics 图片地址串 //links ... -
2009年2月最流行的CSS设计
2009-03-04 15:27 1036以下排名不分先后。 Squaredeye.com Ter ... -
图片局部放大--放大镜效果
2009-03-04 09:53 3084我是在http://www.space007.com/2008 ... -
各种css新闻页样例
2008-08-28 18:07 2136下面这些模板可以随意添加在你的ruby on rails项目中 ... -
will_pagenate的样式1
2008-08-19 15:41 0/*will pagenate style*/ div. ... -
web2.0生成器
2008-07-24 12:07 1162web2.0生成器(超过100个)http://www.iwm ... -
15种WEB2.0网站配色
2008-07-22 17:54 2214<html> <head> ... -
一个轻量的在线编辑器WMD
2008-07-02 18:05 2350官方网址:http://wmd-editor.com/ WM ... -
Railsforum上我认为比较好的贴子
2008-06-23 17:15 1230Finding out how many people are ... -
创建一个可移动的层
2008-02-17 20:18 1217大家好,我好想自己亲手写一个可以用鼠标拖动的层,可是我一点头绪 ... -
相关JS代码备忘,不断更新中
2008-02-17 19:43 1258Javascript 取得网页高度,宽度全集合 <S ... -
我用EXT2.0的布局做的后台管理界面
2007-11-24 17:27 6510看了Ext的examles的布局,感觉很适合用它来做后台管理页 ...
相关推荐
在本主题“css+div漂亮的圆角tab选项卡”中,我们将深入探讨如何利用CSS和HTML创建具有美观圆角效果的tab选项卡。 首先,HTML结构是实现tab选项卡的基础。一个基本的tab选项卡结构通常包含一个容器(如`<div>`),...
"漂亮的选项卡"这个主题聚焦于利用CSS3技术来实现美观且交互性强的选项卡组件。CSS3是层叠样式表(Cascading Style Sheets)的最新版本,它提供了许多新的功能和改进,让开发者能够创建出更加动态、富有吸引力的网页...
"好看的选项卡样式"这个话题聚焦于如何通过CSS(层叠样式表)来创建吸引人的、功能强大的选项卡组件。下面将详细探讨这一主题。 首先,选项卡样式的设计目标是提升用户体验,通过将大量信息分组到不同的标签页下,...
2. CSS样式:使用CSS来定义选项卡的外观,包括颜色、字体、边框、过渡效果等,以达到美观的效果。 3. JavaScript/jQuery:编写JavaScript代码以实现选项卡的交互功能,如点击切换、内容加载等。 4. JSP语法:了解...
在网页设计中,选项卡(Tab)是一种常见的交互元素,用于组织和展示大量内容,而“漂亮TAB网页选项卡仿淘宝效果”就是一种模仿淘宝网风格的美观且实用的选项卡设计。这种设计通常结合了CSS(层叠样式表)和...
这个“纯CSS实现漂亮tab选项卡切换”的项目,旨在通过CSS来创建美观且功能完备的选项卡组件,不依赖于JavaScript库如jQuery,仅使用HTML5和CSS技术。以下将详细介绍如何使用这些技术实现这一功能。 1. **HTML5基础...
3. **CSS**:为了使选项卡看起来美观,我们需要使用CSS来定义样式。通过CSS,我们可以控制选项卡的布局、颜色、边框、字体等属性,以符合网站的整体设计风格。例如,可以设置背景色、边框样式、悬停效果以及选中状态...
这些技术共同作用,实现了动态的、响应式的选项卡效果。下面我们将深入探讨这些关键知识点: 1. HTML结构:选项卡的基础是HTML标签,如`<div>`、`<ul>`、`<li>`和`<a>`。`<ul>`和`<li>`用于创建选项卡导航,`<div>`...
在"一个非常漂亮的网页选项卡"这个主题中,我们将深入探讨选项卡的实现原理、设计原则以及如何创建美观且功能完善的选项卡。 首先,选项卡的核心是HTML结构。通常,我们会使用`<div>`元素来创建选项卡容器,并为每...
例如,我们可以用CSS的`stroke-dasharray`和`stroke-dashoffset`属性来制作描边动画,模拟出选项卡被选中时的高亮效果。还可以通过改变SVG元素的`fill`属性,来实现颜色变化的过渡动画。 JavaScript通常用于处理...
一款调用了google jsapi实现的css3 tab选项卡特效,测试时请注意要引入Google的JSAPI才可以正常使用,该TAB选项卡动画效果十分流畅,支持众多鼠标效果,若正常引入JSAPI,会看到动画效果很平滑顺畅,选项卡的样式也...
CSS样式是让选项卡看起来“漂亮”的关键。我们可以设置背景色、边框、字体等属性,以实现预期的视觉效果。例如: ```css .tab { display: flex; } .tab-label { padding: 10px; cursor: pointer; } .content {...
总结,仿网易漂亮的TAB选项卡主要涉及到HTML结构设计、CSS美化以及JavaScript交互实现。通过以上步骤,你可以创建出一款既美观又实用的选项卡组件,适用于各种网页应用。在实际项目中,还可以根据需求进行进一步定制...
"漂亮的横向标签标签选项卡"这个主题聚焦于设计美观且功能实用的标签组件,特别是采用了淡蓝色调,以提升用户的浏览体验。 在创建这种横向标签选项卡时,有几个关键知识点是必不可少的: 1. HTML 结构:首先,我们...
标题 "漂亮实用可左右切换的TAB网页选项卡.rar" 提供了一个关于网页设计的特定功能——TAB选项卡的实现,这种选项卡具有美观且实用的特点,支持用户通过左右操作在不同页面之间切换。这种交互设计常见于网页头部,...
- `js`:存放JavaScript文件,通常包括jQuery库和其他实现选项卡效果的脚本。 总的来说,这个资源为网页开发者提供了一套全面的彩色动画选项卡解决方案,不仅可以快速集成到现有项目中,还能根据需求进行深度定制...
jQuery 选项卡可以结合 CSS3 来实现更多视觉效果,如过渡动画、圆角、阴影等。你可以根据项目需求调整样式,使选项卡更加美观。例如,可以使用 CSS3 添加平滑的过渡效果: ```css .tab-content { transition: ...
在网页设计中,jQuery是一个...总的来说,jQuery选项卡是网页交互设计中一个实用且常见的功能,通过HTML、CSS和jQuery的结合,我们可以轻松创建出美观且响应式的选项卡效果,满足用户在各种设备和浏览器上的使用需求。
本资源"4款非常漂亮的jQuery彩色动画选项卡Tabs特效.zip"提供了一组精心设计的jQuery选项卡效果,这些效果不仅功能实用,而且视觉上引人注目,为网页增添了一抹亮丽的色彩。 选项卡(Tabs)是一种常见的网页元素,...