仿windows选项卡-2

本文档包含多个网页布局和交互的实例,展示了不同样式和脚本的应用,如导航菜单、选项卡面板等内容切换效果,涉及HTML、CSS及JavaScript等技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

10、

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>menu</title>
<base target="_blank">
<style>
A:link {COLOR: #0000cc; TEXT-DECORATION: underline}
A:visited {COLOR: #551a8b; TEXT-DECORATION: underline}
A:active{COLOR: #ff0000; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-color: #ffffff;
 color: #000000;
 font-size: 12px;
}
td{
 font-size:12px;
 line-height: 150%;
}
.white {color: #ffffff}
.cardNormal {
 CURSOR: hand;
 COLOR: #000000;
 font-size:12px;
 BACKGROUND-COLOR: #FFFFFF;
 border-top: 1px solid #0A6CCE;
 border-right: 1px solid #0A6CCE;
 border-bottom: 1px solid #0A6CCE;
 border-left: 1px solid #0A6CCE;
}
.cardSelected {
BORDER-left: 1px solid #0A6CCE;
 BORDER-RIGHT: 1px solid #0A6CCE;
 BORDER-TOP: 1px solid #0A6CCE;
 FONT-WEIGHT: normal;
 CURSOR: hand;
 COLOR: #000000;
 font-size:12px;
 BACKGROUND-COLOR: #E1EFFD;
}
.boardMain {
 BORDER-RIGHT: 1px solid #dbe9fd;
 BORDER-LEFT: 1px solid #dbe9fd;
 COLOR: #F1AB65;
 LINE-HEIGHT:200%;
 BORDER-BOTTOM:1px solid #0A6CCE;
BORDER-left: 1px solid #0A6CCE;
 BORDER-RIGHT: 1px solid #0A6CCE;
 BACKGROUND-COLOR:#E1EFFD;
}
.cardSpace {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLeft {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLast {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
A.nav1:link {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:visited {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:active,A.nav1:hover {COLOR:#000000; TEXT-DECORATION: none}
.erect{
COLOR: #ffffff;
WRITING-MODE: tb-rl;
TEXT-ALIGN:left;
letter-spacing:2px;
}
A.nav:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.nav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.nav:active{COLOR: #FFFF00; TEXT-DECORATION: none}
A.nav:hover {COLOR: #FFFF00; TEXT-DECORATION: none}
</style>
</head>
<body bgcolor="#FFFFFF">

<table width="230" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<!-- 菜单定义开始 -->
<script language=javascript>
function secCard(n)
{
for(i=0;i<secTable.cells.length;i++)
  secTable.cells[i].className="cardNormal";
secTable.cells[n].className="cardSelected";
for(i=1;i<secTable.cells.length;i=i+2)
  secTable.cells[i].className="cardSpace";
secTable.cells[n+1].className="cardSpaceLeft";
secTable.cells[3].className="cardSpaceLast";
}
function secBoard(n)
{
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="";
}
</script>
<td width="25" rowspan="2" align="center" bgcolor="#0A6CCE" ><span class="erect">
中国</span></TD>
<td><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=0 class=cardFont id=secTable>
<TBODY>
<TR>
<TD align="center" class="cardSelected" onMouseOver="secCard(0);secBoard(0);" style="padding:0 0 0 0">menu1</TD>
<TD width="2" height="20" class="cardSpace"> </TD>
  <TD align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(2);secBoard(1);">menu2</TD>
<TD width="2" height="20" class="cardSpace"> </TD>

</TR>
</TBODY>
</TABLE></TD>
</TR>
<tr>
<td><TABLE width="100%" height=30 border="0" align="center" cellPadding="5" cellSpacing="0" class="boardMain" id="mainTable">
<TBODY style="DISPLAY: block">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="75" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td>abcde</td>
</tr>
</table></TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="69"><div align="center"></div>
abcde</td>
</tr>
</table></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TABLE>
</body></html> 

11、

<style type="text/css">
<!--
* {
  margin: 0; padding:0
}
body {
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: 10px;
  margin-left: auto;
  text-align: center;
  height: auto;
  width: auto;
  background: #D6D3CE;
  font-size: 14px;
  font-weight:bold;
  color: #000000;
}
#top{
    width:739px;
    height:65px;
    background: #D6D3CE url(top.gif) no-repeat;
    }
#bottom {
    width:739px;
    height:45px;
    background: #D6D3CE url(bottom.gif) no-repeat 615px 0px;
    font-size:12px;
    font-weight:normal;
    text-align:left;
    padding:22px 0 0 22px;
    }
#container {
  text-align: left;
  width: 717px;
  margin: 0 11px;
  background: #D6D3CE;
}
#conleft{
    float:left;
    width:134px;
    height:296px;
    border: 1px #7B9EBC solid;
    background:#FFF;
    text-align:center;
    padding-top:10px;
    }
#conright{
    float:right;
    width:550px;
    height:306px;
    border: 1px #7B9EBC solid;
    background:#FFF;
    }
#container #title {
  height: 28px;
}
#container #title li {
  float: left;
  list-style-type: none;
  height: 28px;
  line-height: 28px;
  text-align: center;
  margin-right: 1px;
}
#container #title ul {
  background: #D6D3CE;
  height: 28px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
  height: 300px;
  padding: 10px;
}
.content1 {
  border: 1px #94999C solid ;
  background: #EFE6E7;
}
.content2 {
  border: 1px #94999C solid ;
  background: #EFE6E7;
}
.content3 {
  border: 1px #94999C solid ;
  background: #EFE6E7;
}
.hidecontent {display:none;}
/*-----------Tags-----------*/
#container #title a {
  text-decoration: none;
  color: #000000;
  display: block;
  width: auto;
  background: url(tagleft.gif) no-repeat left -29px;
}
#container #title a span{
  display: block;
  background: url(tagright.gif) no-repeat right -29px;
  padding: 0 25px 0 25px;
}
#container #title #tag1 a:hover {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(tagleft.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
  display: block;
  background: url(tagright.gif) no-repeat right -87px;
  padding: 0 25px 0 25px;
}
#container #title #tag2 a:hover {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(tagleft.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
  display: block;
  background: url(tagright.gif) no-repeat right 0px;
  padding: 0 25px 0 25px; 
}
#container #title #tag3 a:hover {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(tagleft.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
  display: block;
  background: url(tagright.gif) no-repeat right -58px;
  padding: 0 25px 0 25px; 
}
#container #title .selectli1 {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(tagleft.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
  display: block;
  background: url(tagright.gif) no-repeat right -87px;
  padding: 0 25px 0 25px;
}
#container #title .selectli2 {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(tagleft.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
  display: block;
  background: url(tagright.gif) no-repeat right 0px;
  padding: 0 25px 0 25px;
}
#container #title .selectli3 {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(tagleft.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
  display: block;
  background: url(tagright.gif) no-repeat right -58px;
  padding: 0 25px 0 25px;
}

-->
</style>
<!-------------去掉连接的虚线框----------------->
<script>
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>
<!----------------标签设计--------------------->
<script language="javascript">
function switchTag(tag,content)
{
//  alert(tag);
//  alert(content);
  for(i=1; i <3; i++)
  {
    if ("tag"+i==tag)
    {
      document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
      document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
    }else{
      document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
      document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
    }
    if ("content"+i==content)
    {
      document.getElementById(content).className="";
    }else{
      document.getElementById("content"+i).className="hidecontent";
    }
    document.getElementById("content").className=content;
  }
}
</script>
</head>
<body>
<div id="top"></div>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">金翅擘海</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>子虚乌有</span></a></li>
    </ul>
  </div>
  <div id="content" class="content1">
    <div id="content1">说老实话,办老实事,做老实人。
说谎话的不仅没糖吃,而且还有可能被狼吃掉......</div>
    <div id="content2" class="hidecontent">虚心、踏实、坚韧的学习
老虎不发猫,你当我病危?——蓝色语</div>
    <div id="content3" class="hidecontent">klklklklklkl</div>
  </div>
</div>
<div id="bottom">marvellous ©版权所有2000-2006</div>
</body>

12、

<style>
body {
    font-family: Arial,"宋体";
    font-size:9pt;
}
td { font-size:12px;;
}
.mousehand{
    cursor:hand;
}
.titletable{
    padding-left:5px;
    background-color:#E9E9E9; }   
table.TabBarLevel1{
}

table.TabBarLevel1 td{
 border:1px solid #CCCCCC;
 height:20px;
 background-color:#E1E1E1;
}
table.TabBarLevel1 td.Selected{
 border-bottom-width:0px;
 background-color:#ffffff;
}
table.TabBarLevel1 td.Black{
 border-left-width:0px;
 border-top-width:0px;
 border-right-width:0px;
 background-color:#FFFFFF;
}
table.Content{
 border-left:1px solid #CCCCCC;
 border-right:1px solid #CCCCCC;
 border-bottom:1px solid #CCCCCC;
}
</style>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="100%"  border="0" cellspacing="0" cellpadding="0" class="TabBarLevel1" id="TabPage1">
      <tr align="center">
        <td width="130" id="imageTab1" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab1','心开风神','image');">热门图片</td>
        <td width="7" class="Black"> </td>
        <td width="80" id="imageTab2" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab2','子虚乌有','image');">波希米亚</td>
        <td width="7" class="Black"> </td>
        <td width="80" id="imageTab3" valign="middle" class="Selected mousehand" onclick="javascript:switchTab('TabPage1','imageTab3','孤零飘客','image');">红色黑客</td>
        <td width="7" class="Black"> </td>
        <td width="" align="right" class="Black"><a href="http://www.eawan.com">查看示例</a>  </td>
      </tr>
    </table>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" class="Content">
        <tr>
          <td height="110"><div id="divimagelist_all"> 正在加载...</div></td>
        </tr>
      </table></td>
  </tr>
</table>
<script language="javascript">
function switchTab(tabpage,tabid,action,type){
    var oItem = document.getElementById(tabpage);  
    for(var i=1;i< 4;i++){
        var x = document.getElementById(type + 'Tab' + i);   
        //alert(x);
        x.className = "mousehand";
        //var y = x.getElementsByTagName('a');
        //y[0].style.color="#333333";
    }   
    document.getElementById(tabid).className = "Selected";
    //gethotimagelist(type+'_'+action);
    divimagelist_all.innerHTML = type+'_'+action;
}
</script>

13、

<style type="text/css">
#div {
    width:360px;
}
.div_01{
    border:1px solid #FFFFFF;
    background-color:#3366CC;
    width:60px;
    height:30px;
    float:left;
    color:#FFFFFF;
}
#div_02 {
    border:1px solid #000000;
    width:360px;
    height:300px;
}
</style>
<center>
<div id="div">
    <div class="div_01" id="d1" onclick="run(this.id)">表一</div>
    <div class="div_01" id="d2" onclick="run(this.id)">表二</div>
    <div class="div_01" id="d3" onclick="run(this.id)">表三</div>
    <div class="div_01" id="d4" onclick="run(this.id)">表四</div>
    <div class="div_01" id="d5" onclick="run(this.id)">表五</div>
    <div class="div_01" id="d6" onclick="run(this.id)">表六</div>
    <div id="div_02">初始化</div>
</div>
<Script type="text/JavaScript">
var oHTML=[
"<a href=/"test.asp/">测试表一数据</a>",
"<a href=/"test.asp/">测试表二数据</a>",
"<a href=/"test.asp/">测试表三数据</a>",
"<a href=/"test.asp/">测试表四数据</a>",
"<a href=/"test.asp/">测试表五数据</a>",
"<a href=/"test.asp/"><center><img src=http://www.blueidea.com/articleimg/usericon/marvellous.gif style='border:6 red groove;filter:fliph;'><span style='width:234;height:33;'></span><img src=http://www.blueidea.com/articleimg/usericon/marvellous.gif style='border:6 blue double;'></a>"
]
function run(obj){
    for(i=1;i<=6;i++)
    {
        eval("document.getElementById(/"d"+i+"/").style.backgroundColor=/"#3366cc/"");
        document.getElementById(obj).style.backgroundColor="#FF0000";
    }
    document.getElementById("div_02").innerHTML=oHTML[obj.split("")[1]*1-1];
}
</Script>

14、

<!-- $Id: example.html,v 1.4 2006/03/27 02:44:36 pat Exp $ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<base href="http://www.jluvip.com/works/css/tabber/"><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>

<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">

<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<//style>');
</script>

</head>
<body>
<center>
<h1>Tabber Example</h1>

<p>← <a href="http://www.barelyfitz.com/projects/tabber/">Tabber Home</a></p>

<div class="tabber" style="width:567px;">

     <div class="tabbertab">
      <h2>剑气凌人</h2>
      <p><Font Size=4 Face="微软简行楷"><Font Color="#FF0000">孤</Font><Font Color="#FFA000">独</Font><Font Color="#55C000">时</Font><Font Color="#00C07F">我</Font><Font Color="#0080FF">才</Font><Font Color="#2A00FF">能</Font><Font Color="#FF00FF">感</Font><Font Color="#FF00FF">受</Font><Font Color="#2B00FF">到</Font><Font Color="#0080FF">真</Font><Font Color="#00C080">实</Font><Font Color="#55C000">的</Font><Font Color="#FFA000">自</Font><Font Color="#FF0000">己</Font></Font>
</p>
     </div>


     <div class="tabbertab">
      <h2>垃圾青蛙</h2>
      <p><Font Size=4 Face="华文行楷"><Font Color="#FF0000">天</Font><Font Color="#FF5700">地</Font><Font Color="#FFAE00">有</Font><Font Color="#A3C000">正</Font><Font Color="#2FC000">气</Font> <Font Color="#00C0B9">往</Font><Font Color="#009EFF">来</Font><Font Color="#0046FF">复</Font><Font Color="#1700FF">无</Font><Font Color="#8B00FF">穷</Font> <Font Color="#8C00FF">落</Font><Font Color="#1800FF">眼</Font><Font Color="#0045FF">繁</Font><Font Color="#009DFF">华</Font><Font Color="#00C0BA">处</Font> <Font Color="#2EC000">尽</Font><Font Color="#A2C000">是</Font><Font Color="#FFAF00">色</Font><Font Color="#FF5800">与</Font><Font Color="#FF0000">空</Font></Font>
</p>
     </div>

<div class="tabbertab">
      <h2>天外飞猪</h2>
      <p><Font Size=3 Face="微软简行楷"><Font Color="#FF00FF">既</Font><Font Color="#B900FF">然</Font><Font Color="#7200FF">爱</Font><Font Color="#2B00FF">上</Font><Font Color="#0015FF">了</Font><Font Color="#004AFF">那</Font><Font Color="#0080FF">一</Font><Font Color="#00B5FF">抹</Font><Font Color="#00C0C7">蓝</Font><Font Color="#00C080">色</Font><Font Color="#00C039">,</Font><Font Color="#0EC000">就</Font><Font Color="#55C000">注</Font><Font Color="#9BC000">定</Font><Font Color="#E2C000">要</Font><Font Color="#FFA000">忧</Font><Font Color="#FF6B00">郁</Font><Font Color="#FF3600">一</Font><Font Color="#FF0000">生</Font></Font>

</p>
     </div>


<div class="tabbertab">
      <h2>铁板牛排</h2>
      <p><Font Size=3 Face="微软简行楷"><Font Color="#FF00FF">[</Font><Font Color="#0000FF">全</Font><Font Color="#00C0FF">力</Font><Font Color="#00C000">以</Font><Font Color="#FFC000">赴</Font><Font Color="#FF0000">,</Font><Font Color="#FF0000">重</Font><Font Color="#FFC000">塑</Font><Font Color="#00C000">自</Font><Font Color="#00C0FF">我</Font><Font Color="#0000FF">]</Font> </Font>
</p>
     </div>


<div class="tabbertab">
      <h2>萧萧小雨</h2>
      <p><Font Size=3 Face="微软简行楷"><Font Color="#FF0000">时</Font><Font Color="#FFA000">间</Font><Font Color="#55C000">悄</Font><Font Color="#00C07F">悄</Font><Font Color="#0080FF">的</Font><Font Color="#2A00FF">走</Font><Font Color="#FF00FF">了</Font><Font Color="#2B00FF">,</Font><Font Color="#0080FF">没</Font><Font Color="#00C080">有</Font><Font Color="#55C000">等</Font><Font Color="#FFA000">我</Font><Font Color="#FF0000">。</Font></Font>

</p>
     </div>


<div class="tabbertab">
      <h2>天牙海脚</h2>
      <p><Font Size=3 Face="微软简行楷"><Font Color="#FF0000">没</Font><Font Color="#FFA000">树</Font><Font Color="#55C000">叶</Font><Font Color="#00C07F">的</Font><Font Color="#0080FF">亚</Font><Font Color="#2A00FF">当</Font><Font Color="#FF00FF">—</Font><Font Color="#FF00FF">—</Font><Font Color="#2B00FF">大</Font><Font Color="#0080FF">胆</Font><Font Color="#00C080">而</Font><Font Color="#55C000">又</Font><Font Color="#FFA000">真</Font><Font Color="#FF0000">实</Font></Font>

</p>
     </div>


<div class="tabbertab">
      <h2>孤零飘客</h2>
      <p><Font Size=3 Face="隶书"><Font Color="#FF00FF">情</Font><Font Color="#9500FF">有</Font><Font Color="#2B00FF">多</Font><Font Color="#0030FF">少</Font><Font Color="#0080FF">…</Font><Font Color="#00C0EA">…</Font><Font Color="#00C080">欢</Font><Font Color="#00C016">乐</Font><Font Color="#55C000">就</Font><Font Color="#BFC000">有</Font><Font Color="#FFA000">多</Font><Font Color="#FF5000">少</Font><Font Color="#FF0000">…</Font><Font Color="#FF5000">…</Font><Font Color="#FFA000">就</Font><Font Color="#C0C000">让</Font><Font Color="#55C000">我</Font><Font Color="#00C015">们</Font><Font Color="#00C07F">这</Font><Font Color="#00C0E9">样</Font><Font Color="#0080FF">爱</Font><Font Color="#0030FF">到</Font><Font Color="#2A00FF">老</Font><Font Color="#9400FF">…</Font><Font Color="#FF00FF">…</Font></Font>

</p>
     </div>


     <div class="tabbertab">
      <h2>两面之城</h2>
      <p><Font Size=4 Face="方正姚体"><I><Font Color="#FF00FF">我</Font><Font Color="#CA00FF">坚</Font><Font Color="#9500FF">持</Font><Font Color="#6000FF">自</Font><Font Color="#2B00FF">己</Font><Font Color="#0008FF">的</Font><Font Color="#0030FF">信</Font><Font Color="#0058FF">念</Font><Font Color="#0080FF">,</Font><Font Color="#00A8FF">沉</Font><Font Color="#00C0EA">默</Font><Font Color="#00C0B5">而</Font><Font Color="#00C080">顽</Font><Font Color="#00C04B">强</Font><Font Color="#00C016">的</Font><Font Color="#1FC000">走</Font><Font Color="#55C000">自</Font><Font Color="#8AC000">己</Font><Font Color="#BFC000">认</Font><Font Color="#F4C000">为</Font><Font Color="#FFA000">正</Font><Font Color="#FF7800">确</Font><Font Color="#FF5000">的</Font><Font Color="#FF2800">道</Font><Font Color="#FF0000">路</Font></I></Font>
</p>
     </div>

</div>

 

 

 


<center>◥□◣☆★春花   秋 月   何时了 ★☆◢□◤<br>◥□◣☆ ↘往事   知   多少 ↙☆◢□◤<br>◥□◣小楼   昨夜   又东风  ◢□◤<br>◥故国不堪回首月明中◤<br>◥雕栏玉砌应犹在◤<br>←只↑←是↑←朱↑←颜↑←改 <br>←问↑←君↑←能↑←有↑←几↑←多↑←愁 <br>←恰↑←似↑←一↑←江↑←春↑←水↑←向↑←东↑←流</center>
</body>
</html>

15、

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>层切换</title>
<style>
#red{
  display:block;
  float:left;
  position:absolute;
  width:400px;
  height:400px;
  background-color:#ff0000;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=deeppink);
}
#green{
  display:none;
  float:left;
  position:absolute;
  width:400px;
  height:400px;
  background-color:#00ff00;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green);
}
#blue{
  display:none;
  float:left;
  position:absolute;
  width:400px;
  height:400px;
  background-color:#0000ff;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue);
}
#switch{
  position:absolute;
  top:400px;
  width:400px;
  height:30px;
  background-color:#000000;
}
#switch a.tabs{
  float:left;
  color:#ffffff;
  height:28px;
  width:133px;
  margin:0;
  padding:8px 0 0 14px;
  font-size:12px;
  cursor:pointer;
  text-decoration:none;text-align:center; 
}
#switch a.tabs:hover{
  color:#ffff00;
  background-color:#666666;
  text-decoration:none;
}
body{filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=orange);}
</style>
<script language="javascript">
function switchbox(i)
{
 selectbox(i);
}
function selectbox(i)
{
 switch(i)
 {
 case 1:
 document.getElementById("red").style.display="block";
 document.getElementById("green").style.display="none";
 document.getElementById("blue").style.display="none";
 break;
 case 2:
 document.getElementById("red").style.display="none";
 document.getElementById("green").style.display="block";
 document.getElementById("blue").style.display="none";
 break;
 case 3:
 document.getElementById("red").style.display="none";
 document.getElementById("green").style.display="none";
 document.getElementById("blue").style.display="block";
 break;
 }
}
</script>
</head>

<body><div style="position:absolute;top:19px;left:320px;">
<div id="content">
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</div>
<div id="switch"><a class="tabs" id="red-tab" href="javascript:switchbox(1);">红色</a><a class="tabs" id="green-tab" href="javascript:switchbox(2);">绿色</a><a class="tabs" id="blue-tab" href="javascript:switchbox(3);">蓝色</a></div></div>

16、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> stu nicholls | CSS PLaY | cross browser tabbed pages with embeded links</title>
<meta name="Author" content="Stu Nicholls"/>
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations"/>
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS"/>
<link rel="stylesheet" media="all" type="text/css" href="http://www.forest53.com/tutorials/onepage/one_page.css"/>
<style type="text/css">
body {text-align:center; font-family:verdana, arial, sans-serif; font-size:76%; color:#000; background:#fff url(back.gif) repeat-x; padding:0; border:0; margin:0;}
</style>

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="http://www.forest53.com/tutorials/onepage/one_page_ie.css" />

<![endif]-->


<!--[if lte IE 6]>
<style>
#ads {display:none;}
#smallads {display:none;}

#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
#smalladsie {clear:both; text-align:center; width:468px; margin-top:10px;}
</style>
<![endif]-->


</head>

<body>
  <div class="menu" style="margin: 10px auto;">
    <ul>
      <li><a class="hide" href="#nogo">John Constable</a>
          <!--[if lte IE 6]>
<a href="../menu/index.html">John Constable
<table><tr><td>
<![endif]-->
          <ul>
            <li>
              <p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
            

 

<img src="tutu24.gif"
OnMouseMove = "this.style.filter = 'alpha(opacity = 20)'"
OnMouseOut  = "this.style.filter = 'alpha(opacity = 100)'">

 

 

 

              <p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
              <p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p>
              <p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
              <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/constable/">The WebMuseum, Paris</a></p>
            </li>
          </ul>
        <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
      </li>
      <li><a class="hide" href="#nogo">Claude Monet</a>
          <!--[if lte IE 6]>
<a href="#nogo">Claude Monet
<table><tr><td>
<![endif]-->
          <ul>
            <li>
              <p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>
45454545454545445


              <p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p>
              <p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p>
              <p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
              <p><a href="http://www.ibiblio.org/wm/paint/auth/courbet/">Courbet</a> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p>
              <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/monet/">The WebMuseum, Paris</a></p>
            </li>
          </ul>
        <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
      </li>
      <li><a class="hide" href="#nogo">Vincent Van Gogh</a>
          <!--[if lte IE 6]>
<a href="../layouts/index.html">Vincent Van Gogh
<table><tr><td>
<![endif]-->
          <ul>
            <li>
              <p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>
              <img src="vincent.jpg" alt="The Starry Night" title="The Starry Night"/>
              <p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">Cézanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The Starry Night</a> (1889).</p>
              <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The WebMuseum, Paris</a></p>
            </li>
          </ul>
        <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
      </li>
    </ul>
    <div class="clear"> </div>
  </div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值