`

漂亮css选项卡效果大全

阅读更多
ruby on rails框架集成了大量的web2.0效果,结合现在网站大量使用选项卡效果,我们也得让我们的ror项目结合潮流,下面有多个实例供大家参考使用:
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/
分享到:
评论
1 楼 sunliao_first 2008-11-17  
不错

相关推荐

    css+div漂亮的圆角tab选项卡

    在本主题“css+div漂亮的圆角tab选项卡”中,我们将深入探讨如何利用CSS和HTML创建具有美观圆角效果的tab选项卡。 首先,HTML结构是实现tab选项卡的基础。一个基本的tab选项卡结构通常包含一个容器(如`&lt;div&gt;`),...

    漂亮的选项卡

    "漂亮的选项卡"这个主题聚焦于利用CSS3技术来实现美观且交互性强的选项卡组件。CSS3是层叠样式表(Cascading Style Sheets)的最新版本,它提供了许多新的功能和改进,让开发者能够创建出更加动态、富有吸引力的网页...

    好看的选项卡样式

    "好看的选项卡样式"这个话题聚焦于如何通过CSS(层叠样式表)来创建吸引人的、功能强大的选项卡组件。下面将详细探讨这一主题。 首先,选项卡样式的设计目标是提升用户体验,通过将大量信息分组到不同的标签页下,...

    漂亮的JSP TAB选项卡

    2. CSS样式:使用CSS来定义选项卡的外观,包括颜色、字体、边框、过渡效果等,以达到美观的效果。 3. JavaScript/jQuery:编写JavaScript代码以实现选项卡的交互功能,如点击切换、内容加载等。 4. JSP语法:了解...

    漂亮TAB网页选项卡仿淘宝效果

    在网页设计中,选项卡(Tab)是一种常见的交互元素,用于组织和展示大量内容,而“漂亮TAB网页选项卡仿淘宝效果”就是一种模仿淘宝网风格的美观且实用的选项卡设计。这种设计通常结合了CSS(层叠样式表)和...

    纯CSS实现漂亮tab选项卡切换.zip

    这个“纯CSS实现漂亮tab选项卡切换”的项目,旨在通过CSS来创建美观且功能完备的选项卡组件,不依赖于JavaScript库如jQuery,仅使用HTML5和CSS技术。以下将详细介绍如何使用这些技术实现这一功能。 1. **HTML5基础...

    ASP.NET漂亮的选项卡

    3. **CSS**:为了使选项卡看起来美观,我们需要使用CSS来定义样式。通过CSS,我们可以控制选项卡的布局、颜色、边框、字体等属性,以符合网站的整体设计风格。例如,可以设置背景色、边框样式、悬停效果以及选中状态...

    漂亮的全面的网页特效选项卡代码

    这些技术共同作用,实现了动态的、响应式的选项卡效果。下面我们将深入探讨这些关键知识点: 1. HTML结构:选项卡的基础是HTML标签,如`&lt;div&gt;`、`&lt;ul&gt;`、`&lt;li&gt;`和`&lt;a&gt;`。`&lt;ul&gt;`和`&lt;li&gt;`用于创建选项卡导航,`&lt;div&gt;`...

    一个非常漂亮的网页选项卡

    在"一个非常漂亮的网页选项卡"这个主题中,我们将深入探讨选项卡的实现原理、设计原则以及如何创建美观且功能完善的选项卡。 首先,选项卡的核心是HTML结构。通常,我们会使用`&lt;div&gt;`元素来创建选项卡容器,并为每...

    22HTML5 SVG炫酷垂直Tabs选项卡布局特效效果

    例如,我们可以用CSS的`stroke-dasharray`和`stroke-dashoffset`属性来制作描边动画,模拟出选项卡被选中时的高亮效果。还可以通过改变SVG元素的`fill`属性,来实现颜色变化的过渡动画。 JavaScript通常用于处理...

    css3 tab选项卡特效.rar

    一款调用了google jsapi实现的css3 tab选项卡特效,测试时请注意要引入Google的JSAPI才可以正常使用,该TAB选项卡动画效果十分流畅,支持众多鼠标效果,若正常引入JSAPI,会看到动画效果很平滑顺畅,选项卡的样式也...

    JS选项卡导航菜单,超漂亮的

    CSS样式是让选项卡看起来“漂亮”的关键。我们可以设置背景色、边框、字体等属性,以实现预期的视觉效果。例如: ```css .tab { display: flex; } .tab-label { padding: 10px; cursor: pointer; } .content {...

    仿网易漂亮的TAB选项卡(标签

    总结,仿网易漂亮的TAB选项卡主要涉及到HTML结构设计、CSS美化以及JavaScript交互实现。通过以上步骤,你可以创建出一款既美观又实用的选项卡组件,适用于各种网页应用。在实际项目中,还可以根据需求进行进一步定制...

    漂亮的横向标签标签选项卡

    "漂亮的横向标签标签选项卡"这个主题聚焦于设计美观且功能实用的标签组件,特别是采用了淡蓝色调,以提升用户的浏览体验。 在创建这种横向标签选项卡时,有几个关键知识点是必不可少的: 1. HTML 结构:首先,我们...

    漂亮实用可左右切换的TAB网页选项卡.rar

    标题 "漂亮实用可左右切换的TAB网页选项卡.rar" 提供了一个关于网页设计的特定功能——TAB选项卡的实现,这种选项卡具有美观且实用的特点,支持用户通过左右操作在不同页面之间切换。这种交互设计常见于网页头部,...

    4款非常漂亮的jQuery彩色动画选项卡Tabs特效

    - `js`:存放JavaScript文件,通常包括jQuery库和其他实现选项卡效果的脚本。 总的来说,这个资源为网页开发者提供了一套全面的彩色动画选项卡解决方案,不仅可以快速集成到现有项目中,还能根据需求进行深度定制...

    漂亮的jquery选项卡

    jQuery 选项卡可以结合 CSS3 来实现更多视觉效果,如过渡动画、圆角、阴影等。你可以根据项目需求调整样式,使选项卡更加美观。例如,可以使用 CSS3 添加平滑的过渡效果: ```css .tab-content { transition: ...

    jquery选项卡

    在网页设计中,jQuery是一个...总的来说,jQuery选项卡是网页交互设计中一个实用且常见的功能,通过HTML、CSS和jQuery的结合,我们可以轻松创建出美观且响应式的选项卡效果,满足用户在各种设备和浏览器上的使用需求。

    4款非常漂亮的jQuery彩色动画选项卡Tabs特效.zip

    本资源"4款非常漂亮的jQuery彩色动画选项卡Tabs特效.zip"提供了一组精心设计的jQuery选项卡效果,这些效果不仅功能实用,而且视觉上引人注目,为网页增添了一抹亮丽的色彩。 选项卡(Tabs)是一种常见的网页元素,...

Global site tag (gtag.js) - Google Analytics