qichunren
- 浏览: 340704 次
- 性别:
- 来自: 蕲春－>上海
-
文章分类
最新评论
-
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 2045//方法声明 //pics 图片地址串 //links ... -
2009年2月最流行的CSS设计
2009-03-04 15:27 1044以下排名不分先后。 Squaredeye.com Ter ... -
图片局部放大--放大镜效果
2009-03-04 09:53 3093我是在http://www.space007.com/2008 ... -
各种css新闻页样例
2008-08-28 18:07 2151下面这些模板可以随意添加在你的ruby on rails项目中 ... -
will_pagenate的样式1
2008-08-19 15:41 0/*will pagenate style*/ div. ... -
web2.0生成器
2008-07-24 12:07 1168web2.0生成器(超过100个)http://www.iwm ... -
15种WEB2.0网站配色
2008-07-22 17:54 2226<html> <head> ... -
一个轻量的在线编辑器WMD
2008-07-02 18:05 2353官方网址:http://wmd-editor.com/ WM ... -
Railsforum上我认为比较好的贴子
2008-06-23 17:15 1233Finding out how many people are ... -
创建一个可移动的层
2008-02-17 20:18 1225大家好,我好想自己亲手写一个可以用鼠标拖动的层,可是我一点头绪 ... -
相关JS代码备忘,不断更新中
2008-02-17 19:43 1263Javascript 取得网页高度，宽度全集合 <S ... -
我用EXT2.0的布局做的后台管理界面
2007-11-24 17:27 6515看了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）是一种常见的网页元素，...