漂亮的CSS（1）

最新推荐文章于 2023-12-12 11:59:44 发布
最新推荐文章于 2023-12-12 11:59:44 发布
阅读量81 收藏
点赞数
分类专栏： Ajax 文章标签： CSS BBS XHTML HTML Rails
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lectery/article/details/83319942
版权

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" οnclick="setTab('one',1,4)"  class="hover">新闻1</li>
   <li id="one2" οnclick="setTab('one',2,4)" >新闻2</li>
   <li id="one3" οnclick="setTab('one',3,4)">新闻3</li>
   <li id="one4" οnclick="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" οnclick="setTab('two',1,4)"  class="hover">新闻1</li>
   <li id="two2" οnclick="setTab('two',2,4)" >新闻2</li>
   <li id="two3" οnclick="setTab('two',3,4)">新闻3</li>
   <li id="two4" οnclick="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" οnmοuseοver="setTab('one',1,4)"  class="hover">新闻1</li>
   <li id="one2" οnmοuseοver="setTab('one',2,4)" >新闻2</li>
   <li id="one3" οnmοuseοver="setTab('one',3,4)">新闻3</li>
   <li id="one4" οnmοuseοver="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" οnmοuseοver="setTab('two',1,4)"  class="hover">新闻1</li>
   <li id="two2" οnmοuseοver="setTab('two',2,4)" >新闻2</li>
   <li id="two3" οnmοuseοver="setTab('two',3,4)">新闻3</li>
   <li id="two4" οnmοuseοver="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>
  
<!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" οnmοuseοver="setTab('one',1,4)"  class="hover">新闻1</li>
   <li id="one2" οnmοuseοver="setTab('one',2,4)" >新闻2</li>
   <li id="one3" οnmοuseοver="setTab('one',3,4)">新闻3</li>
   <li id="one4" οnmοuseοver="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" οnmοuseοver="setTab('two',1,4)"  class="hover">新闻1</li>
   <li id="two2" οnmοuseοver="setTab('two',2,4)" >新闻2</li>
   <li id="two3" οnmοuseοver="setTab('two',3,4)">新闻3</li>
   <li id="two4" οnmοuseοver="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" >
<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" οnmοuseοver="setTab('one',1,4)"  class="hover">新闻1</li>
   <li id="one2" οnmοuseοver="setTab('one',2,4)" >新闻2</li>
   <li id="one3" οnmοuseοver="setTab('one',3,4)">新闻3</li>
   <li id="one4" οnmοuseοver="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" οnmοuseοver="setTab('two',1,4)"  class="hover">新闻1</li>
   <li id="two2" οnmοuseοver="setTab('two',2,4)" >新闻2</li>
   <li id="two3" οnmοuseοver="setTab('two',3,4)">新闻3</li>
   <li id="two4" οnmοuseοver="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>
 



原文地址：http://www.roredu.com/rubyrails/2008/07/24/css-nav/

lectery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 实现漂亮的文本框,一款纯CSS实现的原质化文本输入框
weixin_33514221的博客
08-03 1599
CSS语言：CSSSCSS确定body {font-family: 'Open Sans', sans-serif;color: #9e9e9e;font-weight: lighter;}* {box-sizing: border-box;}.container {margin: 25px 15%;}p {margin-top: 15px;font-size: 10px;text-align: ...
漂亮css按钮1
04-22
漂亮css按钮1
Tab
weixin_30314813的博客
10-14 47
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.d...
CSS+DIV+JS鼠标移动不同的导航 显示不同内容
xiaoxiao_good的专栏
03-15 1035
  CSS+DIV+JS导航显示 平常大部分时间都在写后台代码。很少做前台界面的设计。这次，由于公司需要。做了一些界面设计方面的东西。   主要是用CSS+DIV+JS实现的一个导航。就是鼠标移动到不同的导航菜单上，显示不同的内容。   代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &g...
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 58万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
css漂亮阴影,css3 shadow为了实现各种漂亮的阴影效果
weixin_32540247的博客
08-03 862
纯CSS3实现的各种阴影效果body{padding: 20px 0 0;font: 14px/1.5 Arial, sans-serif;text-align: center;color: #333;background: #FAF0D9;}a{font-weight: bold;color: #346AA8;}a: hover, a: focus, a: active{text-decorat...
css学习笔记1
qq_42236791的博客
12-12 896
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
推荐80多个漂亮CSS box-shadow阴影
树尚 的博客
07-13 819
CSS Scan的CSS box-shadow示例是精选的82个漂亮CSS box-shadow的精选集合，可用于您的下一个项目，单击以将其复制。
html漂亮的表格css,CSS实现的清爽、漂亮的表格样式分享
weixin_35817602的博客
06-26 1633
效果：实现代码：复制代码代码如下:CSS实现的清爽、漂亮的表格样式 - jb5t1.net/* CSS Document */ body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;background: #E6EAE9;} a {color: #c75f3...
CSS漂亮样式
qq_40714105的博客
04-24 876
纯CSS设置Checkbox复选框控件的样式iframe高度自适应，超简单设置
Css 实现漂亮弧形
青衫折扇的博客
11-21 3265
在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css的after伪类来实现弧形。 先是一写元素，再给这个元素设置样式和伪类样式 <view class="pure_top"></view> 比如说这个pure_top元素(因为这里是小程序所以用的是view，h5也是一样实现的啦)，我设置的样式如下: .pure_top { width: ..
纯CSS绘制漂亮的圆形图案效果
12-13
使用border-radius,你可以画出各种漂亮的圆形图案。 CSS代码 只需要将你的网页元素的每个边的border-radius甚至成50%，你就能得到任意大小的圆： 复制代码代码如下:.circle { border-radius: 50%; width: 200px; ...
CSS3制作漂亮的照片墙的实现代码
09-24
下面小编就为大家带来一篇CSS3制作漂亮的照片墙的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
漂亮的表格css+html
04-20
一个很好的表格html代码，里面包含了大量的css表格类型，界面清晰、清爽、相当的漂亮！
漂亮的CSS阴影动效设计
05-11
提供了一种漂亮美观的按钮、输入框CSS片段，具有扁平化的动画效果。
国内移动端APP月活跃（MAU）Top5000 数据整理
06-16
国内移动端APP月活跃（MAU）Top5000 时间范围：2020年-2022年 具有一定参考价值 csv格式
和平巨魔跨进成免费.ipa
最新发布
06-16
和平巨魔跨进成免费.ipa
数据库管理工具:dbeaver-ce-23.0.4-macos-aarch64.dmg
06-16
1.DBeaver是一款通用数据库工具，专为开发人员和数据库管理员设计。 2.DBeaver支持多种数据库系统，包括但不限于MySQL、PostgreSQL、Oracle、DB2、MSSQL、Sybase、Mimer、HSQLDB、Derby、SQLite等，几乎涵盖了市场上所有的主流数据库。 3.支持的操作系统：包括Windows（2000/XP/2003/Vista/7/10/11）、Linux、Mac OS、Solaris、AIX、HPUX等。 4.主要特性： 数据库管理：支持数据库元数据浏览、元数据编辑（包括表、列、键、索引等）、SQL语句和脚本的执行、数据导入导出等。 用户界面：提供图形界面来查看数据库结构、执行SQL查询和脚本、浏览和导出数据，以及处理BLOB/CLOB数据等。用户界面设计简洁明了，易于使用。 高级功能：除了基本的数据库管理功能外，DBeaver还提供了一些高级功能，如数据库版本控制（可与Git、SVN等版本控制系统集成）、数据分析和可视化工具（如图表、统计信息和数据报告）、SQL代码自动补全等。
【课件】8.4.1简单选择排序.pdf
06-16
【课件】8.4.1简单选择排序
css 很漂亮的烟花
01-30
CSS 很漂亮的烟花效果是通过在网页中利用CSS样式和动画来模拟烟花的美丽效果。通过巧妙地运用各种属性和选择器，我们可以轻松创建出令人惊叹的烟花效果。 首先，我们可以使用渐变和阴影属性来实现烟花的明亮和渐变的效果。通过设置不同的颜色和透明度的渐变，我们可以模拟出烟花绽放时的明亮色彩变化，让整个烟花看起来更加立体且鲜艳。 其次，利用CSS的动画属性，我们可以为烟花添加运动效果。通过调整烟花的位置和大小，并将其以一定的速度和弧度旋转，我们可以让烟花看起来仿佛在空中绽放并散开。 此外，我们还可以结合粒子效果来模拟烟花绽放时的碎片，让整个效果更加逼真。通过将小的圆形元素作为烟花的碎片，并利用动画和延迟触发他们的出现和移动，我们可以创造出烟花散开时层层叠放的效果。 最后，我们可以利用CSS的过渡属性来为烟花的各个阶段添加过渡效果，使得烟花的出现和消失更加平滑和自然。 总之，通过巧妙地运用CSS样式和动画，我们可以创造出非常漂亮和逼真的烟花效果，让网页更加生动和有趣。无论是用于节日庆典，还是作为网页的装饰，CSS的烟花效果都能为视觉体验增添一抹亮丽的色彩。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值