js 主页练习

<html>
 <head>
<style>
 body,p,div{font-size:14px;}
 p{font-family:华文行楷;font-size:18px;}
 p:first-letter {font-family:黑体;font-size:30px;color:green}
 a{text-decoration:none}
 a:active {color:yellow}
 a:link {color:blue}
 a:hover {color:blue}
 a:visited {color:yellow}
 .alpha1 {filter:alpha(style=1,startx=100,starty=0,finishx=220,finishy=90)}
 .t1 {font-family:隶书;font-weight:blod;font-size:30px;color:black;}
 .t2 {font-family:黑体;font-weight:blod;font-size:15px;color:yellow;}
 .t3 {font-family:华文楷体;font-size:14px;color:white}
 .bar1 {
     overflow-y:auto;
     height: 450px;
     scrollbar-3d-light-color :red;
     scrollbar-arrow-color :yellow;
     scrollbar-base-color :green;
     scrollbar-shadow-color :pink;
     }
</style>
<script language="javascript">
  var x=1;
var text1=" <h3>裸女</h3><p>纤纤的身姿  柔柔的倩影<br>飘摇于水中<br>一棵绿色的生灵  浮游于<br>真理出没的时空<br></p><p>不需要虚伪的掩饰 <br> 不需要杂物的涂抹<br>千年万年  <br>永远在水中<br>静静等候<br>千年万年  永远以<br>水中的影子<br>轻轻叩击  无尘的呼吸<br></p><p>一株水草   永远飘渺<br>永远在无中之无<br>衍化有中之有<br>永远在水中倒映  万物的美丽<br></p><p>尘世的容颜  柔若无骨地舞蹈<br>千万种颜色千万种姿态<br>以灿烂的黑暗闪烁黎明<br>这株水草  曾经穿越彼岸<br>在没有墙壁的天宇<br>为它奉献刻骨铭心的倾听<br></p><p>良知曾在夜中睡去 孩子曾在清晨醒来<br>母亲曾在黄昏编织<br>轻轻拂去唯一的一缕纱衣<br>洛水之滨 黄河之岸 <br>神女的歌吟<br>伴着清贫的履声<br>于蒹葭之旁  日夜打捞苍茫的逝水<br>搜索残章断句的往昔<br></p><p>猎猎的旗帜<br>曾经举着战火的骨骸<br>去亲吻那株水草<br>尔后总是在忏悔的弥失中流泪<br></p><p>而一株水草<br>一株安详的童贞<br>在水中断崖的壁上站立<br>大气若帝王<br>洁净若裸女<br></p><p>永远在水中  做裸体之泳<br>永远静静地等候<br>永远以洗濯的姿态<br>擦拭大地的尘埃  温暖寒冬的心脏<br>永远以坚贞之爱<br>做书写万载的追问<br></p><p>没有生存 也没有死亡<br>只有无始无终的缠绵<br>做坟茔迭加的欢唱<br>天上人间  日日夜夜响彻偶像的祈祷<br></p><p>一棵水草 一尊柔美的裸女<br>一株历史的青稞<br>从一条甬道穿越另一条甬道<br>携一尘不染的真情<br>仰视<br>纯净的灵魂<br>让尘封的文明  缓缓走在人类的心中<br></p>";
var text2="<h3 align=center>《青山绿水间》</h3><p>肆虐了一天的沙尘,经过一场春雨的洗礼,终于销声匿迹了。</p> <p>春雨的洗礼,山更青,水更绿了,一切变得朗润了,清新的空气沁人心脾,这美的景致使我变得贪婪,我大口地吮吸着这大自然所赋予的清新,信步游走在青山绿水之间,享受着这种心情的惬意与安然。碧绿的青草编织成绿茸茸的地毯,披挂着青山,镶嵌在地毯上的松柏显得那样地葱绿而庄严,飘香的野花洒满这碧绿的地毯,用一句话形容,正是“乱华渐欲迷人眼”。山角下,溪水潺潺,快乐的小鱼儿,时而跳出水面,看一眼这绿水青山。水很清,水流很慢,我俯下身,用手捧一点水放到嘴边,舌尖触及的一刹那,我真的感觉到有些甜,抬头远望,更是美丽的画卷,青山绿水,浩渺云烟。</p><p>远处的一点红,忽然闯入我的视线,我向一点红的地方走去,“万绿丛中一点红”给这美丽的青山绿水又多了份美丽的而又富有生机的镶嵌。我走近时,一点红清晰了,原来是一位美丽的红衣少女,在用手中的画笔,描绘着这美丽的画卷,我不忍心打扰她的专注,她的每一笔,似乎都力求一尘不染,不容许有任何私心杂念融入这美丽的绿水青山。我来到山角下,放下身上的背包,躺在这绿色的地毯上,来一次愉悦的身心舒展,我渐渐地闭上了双眼,但仍然是春光满眼,绿水青山。花香渐渐沁入我的脾胃,我也渐渐地融入这青山绿水间,感觉这氛围是种幸福的抚慰,是愉悦的舒展。</p> <p>不知不觉,一点红又在我的脑海中闪现,模糊的一点红渐渐清晰了,依然是那张熟悉的脸,依然是她那动人的美丽容颜,是青儿,是我大学时认识的一位女孩,我们是学生会一个部的,不知是不是有缘,我们见面的第一眼,彼此间就有种好感,当时我没有任何的奢念,因为我是一个从农村走出去的穷光蛋,与青儿简直是天壤之别,青儿的漂亮端庄,举止言谈,可以说是许多男孩的追求对象,大献殷勤者多之。青儿的家境不错,但她的穿着很朴素,平日里总喜欢穿一套红色的运动装,我们除了平日里工作上的交往,很少在一起说地谈天。她平时的爱好是做画,喜欢将心情画在纸面。记得一个春光明媚的周末,一个学友送给我一张纸条,纸条上写着:我等你在学校附近的青山绿水间,青儿。我有些懵懂,有些惊讶,但转念一想,肯定是学友们开的玩笑,但不管是不是玩笑,我还是一个人向学校附近的青山绿水走去,我们的校园就掩映在青山绿水之间,周围的景致很漂亮,我带着一种难以揣测的思绪,游走在青山绿水间,远处的朦胧红,吸引了我的视线,我加快了脚步,朦胧红清晰了,真的是青儿,她看了我一眼,一笑嫣然,没有说什么,仍然在描绘着手中的画卷,我站在她的旁边,注视着她融入这青山绿水的美感。也就在那一天,我们牵着手,将幸福洒满这青山绿水间。</p><p>我和青儿之间说不清是不是一种爱恋,但彼此在一起总有一种说不出的幸福感。大学的光阴毕竟是短暂,现实主义终于对许多美丽的梦境做了宣判,青儿要自费出国深造,我的选择很简单,回老家,服从分配。最后一次游青山绿水,青儿仍想为我们描绘一幅美丽的画卷,但她的泪水却将这美丽的画卷渲染得模糊不堪,最后她扔掉画笔,扑到我的怀里,泪水浸湿了我的肩。我望着远方,有些木然,似乎一双大手在揉搓着我的心田,一行泪顺着我的脸颊淌下来,滴在青儿的长发间……</p> <p>一个清脆的声音打断了我的思绪缠绵,我睁开眼,坐起来,是做画的红衣少女,她拿着刚画好的画,让我指点,她的画作真的不错,除了青山绿水,还将我画在了山脚下,还将做画的红衣少女也融入青山绿水间,我无可挑剔地竖起了大拇指,这无声的称赞,少女一笑嫣然,她拿着画卷,渐渐消失在青山绿水间……</p><p>手机的铃声打破我的惬意,我不想回到那纷繁的尘世间,于是我关掉了手机,没有看是谁的来电,工作的繁忙已经压榨到了我的神经极限,勾心斗角已经让我无比厌烦,复杂的人际关系有如一个怪圈,钻进去,弄不好就要触礁翻船,想找一份宁静,想找一回惬意,有时都很难,很难。</p> <p>我游走在青山绿水间,我思绪缠绵,喜欢这种惬意的安然…… </p>";

 function changebar()
 {
 switch (x)
  {
   case 1:
   document.getElementById("t1").style.width="0%";
   document.getElementById("t2").innerHTML="&#8250;";
   document.getElementById("d1").style.display="none";
   x=0;
   break;
   case 0:
   document.getElementById("t1").style.width="25%";
   document.getElementById("t2").innerHTML="&#8249;";
   document.getElementById("d1").style.display="block";
   x=1;
   break;
   }
 
  }

 


  
</script>
</head>
<body>
<table width="778" height="60"  border="0" cellspacing="0" cellpadding="0" align=center>
 <tr>
   <td width=30% bgcolor="green" rowspan="3">
    <table border=0 cellspacing=1 cellpadding=0 width=100% height=100% bgcolor="green">
     <tr>
      <td bgcolor="white" style="filter:alpha(style=1,startx=220,starty=0,finishx=220,finishy=60)" align=center>
       <div class="t1" style="position:relative">我的心情驿站</div>
      </td>
     </tr>
    </table>
   </td>
    <td></td>
  </tr>

       
          <tr>
           <td height=50 valign=bottom align=center bgcolor="">
           <table width=90% height=20 border=0 align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width=18%>
               <table width=100% height=100% border=0 cellpadding="0" cellspacing="1" bgcolor=green>
                <tr>
                 <td align=center bgcolor=gray class="alpha1" onMouseOver="this.bgColor='white';document.getElementById('d10').style.color='blue'" onMouseOut="this.bgColor='gray';document.getElementById('d10').style.color='yellow'" style="cursor:hand">
                 <a href="#"><div id="d10" class="t2" style="position:relative">主页</div></a>
                 </td>
                </tr>
               </table>
              </td>
             <td width=10 bgcolor=""></td>
             
            <td width=18%>
               <table width=100% height=100% border=0 cellpadding="0" cellspacing="1" bgcolor=green>
                <tr>
                 <td align=center bgcolor=gray class="alpha1" onMouseOver="this.bgColor='white';document.getElementById('d11').style.color='blue'" onMouseOut="this.bgColor='gray';document.getElementById('d11').style.color='yellow'" style="cursor:hand">
                 <a href="#"><div id="d11" class="t2" style="position:relative">日记</div></a>
                 </td>
                </tr>
               </table>
              </td>
             <td width=10 bgcolor=""></td>
             
             <td width=18%>
               <table width=100% height=100% border=0 cellpadding="0" cellspacing="1" bgcolor=green>
                <tr>
                 <td align=center bgcolor=gray class="alpha1"  onmouseover="this.bgColor='white';document.getElementById('d12').style.color='blue'" onMouseOut="this.bgColor='gray';document.getElementById('d12').style.color='yellow'" style="cursor:hand">
                 <a href="#"><div id="d12" class="t2" style="position:relative">相册</div></a>
                 </td>
                </tr>
               </table>
              </td>
             <td width=10 bgcolor=""></td>
             
             <td width=20%>
               <table width=100% height=100% border=0 cellpadding="0" cellspacing="1" bgcolor=green>
                <tr>
                 <td align=center bgcolor=gray class="alpha1"  onmouseover="this.bgColor='white';document.getElementById('d13').style.color='blue'" onMouseOut="this.bgColor='gray';document.getElementById('d13').style.color='yellow'" style="cursor:hand">
                 <a href="#"><div id="d13" class="t2" style="position:relative">留言板</div></a>
                 </td>
                </tr>
               </table>
              </td>
             <td width=10 bgcolor=""></td>
             
             <td width=18%>
               <table width=100% height=100% border=0 cellpadding="0" cellspacing="1" bgcolor=green>
                <tr>
                 <td align=center bgcolor=gray class="alpha1"  onmouseover="this.bgColor='white';document.getElementById('d14').style.color='blue'" onMouseOut="this.bgColor='gray';document.getElementById('d14').style.color='yellow'" style="cursor:hand">
                 <a href="#"><div id="d14" class="t2" style="position:relative">音乐盒</div></a>
                 </td>
                </tr>
               </table>
              </td>
             <td width=10 bgcolor=""></td>
             
             </tr>
             </table>
            </td>
           </tr>
         <tr>
          <td height=5 bgcolor="green">
          </td>
         </tr>

    </table>

<table width=778 height=500 border=0 cellspacing=0 cellpadding=0 bgcolor=purple align=center style="border:solid 1px  gray;">
 <tr>
    <td bgcolor="pink" style="padding:20 20 20 20;filter:alpha(style=1,opacity=60,finishopacity=100,startx=220,starty=500,finishx=220,finishy=00)">
     
     <table width=100% height=100% border=0 cellspacing=1 cellpadding=0 bgcolor="green">
     <tr bgcolor="white">
     <td width="25%" id="t1" valign=top>
      <div id="d1" style="padding:4 4 4 4;height:100%;border:solid 1px green;">
          <table width=100% height=50% border=0 cellpadding="0" cellspacing="1" bgcolor="gray">
                <tr>
                 <td height=12 bgcolor=gray class="t3">文章列表
                 </td>
            </tr>
             <tr>
                 <td height=100%  bgcolor=#cccccc valign=top style="padding:3 3 3 3"  class="t3">
                  <ul type="circle">
                  <li><span onclick="document.getElementById('dtext').innerHTML=text1" style="cursor:hand;"><a href="#">text1</a></span><br>
                  <li><span onclick="document.getElementById('dtext').innerHTML=text2" style="cursor:hand;">text2</span><br>
                  <li><span onclick="document.getElementById('dtext').innerHTML=text1" style="cursor:hand;">text1</span><br>
                  <li><span onclick="document.getElementById('dtext').innerHTML=text2" style="cursor:hand;">text2</span><br>
                  <li><span onclick="document.getElementById('dtext').innerHTML=text1" style="cursor:hand;">text1</span><br>
                  <li><span onclick="document.getElementById('dtext').innerHTML=text2" style="cursor:hand;">text2</span><br>
                  
                 </ul>
                 </td>
            </tr>
       </table>
       <br>
          <table width=100% height=40% border=0 cellpadding="0" cellspacing="1" bgcolor=#666666>
                <tr>
                 <td height=12 bgcolor=gray class="t3">我的QQ好友列表
                 </td>
            </tr>
             <tr>
                 <td height=100%  bgcolor=#cccccc valign=top>
                
                  <a href="tencent://Message/?Uin=00000000&websiteName=qzone.qq.com&Menu=yes">
                   <a  class="guestname" href="javascript:top.sdsBuddySW=true;top.hitcounter(14,85);openUserSpace('00000000');">
                 <img border="0" SRC="http://wpa.qq.com/pa?p=1:00000000:14"  width="45"  height="15"  alt="点击这里给我发消息"></a><br>
                                 
                  <a href="tencent://Message/?Uin=00000000&websiteName=qzone.qq.com&Menu=yes">
                 <img border="0" SRC="http://wpa.qq.com/pa?p=1:00000000:14"  width="45"  height="15"  alt="点击这里给我发消息"></a><br>
                                 
                  <a href="tencent://Message/?Uin=00000000&websiteName=qzone.qq.com&Menu=yes">
                 <img border="0" SRC="http://wpa.qq.com/pa?p=1:00000000:14"  width="45"  height="15"  alt="点击这里给我发消息"></a><br>
                                 
                  <a href="tencent://Message/?Uin=00000000&websiteName=qzone.qq.com&Menu=yes">
                 <img border="0" SRC="http://wpa.qq.com/pa?p=1:00000000:14"  width="45"  height="15"  alt="点击这里给我发消息"></a><br>
                                 
                  <a href="tencent://Message/?Uin=00000000&websiteName=qzone.qq.com&Menu=yes">
                 <img border="0" SRC="http://wpa.qq.com/pa?p=1:00000000:14"  width="45"  height="15"  alt="点击这里给我发消息"></a><br>
                                 
                  <a href="tencent://Message/?Uin=00000000&websiteName=qzone.qq.com&Menu=yes">
                 <img border="0" SRC="http://wpa.qq.com/pa?p=1:00000000:14"  width="45"  height="15"  alt="点击这里给我发消息"></a><br>
                                 
                  <a href="tencent://Message/?Uin=00000000&websiteName=qzone.qq.com&Menu=yes">
                 <img border="0" SRC="http://wpa.qq.com/pa?p=1:00000000:14"  width="45"  height="15"  alt="点击这里给我发消息"></a><br>
                                 
                  <a href="tencent://Message/?Uin=00000000&websiteName=qzone.qq.com&Menu=yes">
                 <img border="0" SRC="http://wpa.qq.com/pa?p=1:00000000:14"  width="45"  height="15"  alt="点击这里给我发消息"></a><br>
                 </td>
            </tr>
       </table>
     </div>
      
     </td>
     <td id="t2" width="1%" bgcolor=gray style="cursor:hand" onClick="changebar();" valign=middle align=center>
     &#8249;
     </td>
     <td width="74%" valign=top  style="padding:4 4 4 4;">
      <div id="d2" style="height:100%;border:solid 1px #666666;">
          <table width=100% height=100% border=0 cellpadding="0" cellspacing="0" bgcolor=#666666>
                <tr>
                 <td height=15 bgcolor=white style="filter:alpha(style=1,startx=220,starty=150,finishx=220,finishy=0)">
                 </td>
            </tr>
             <tr>
                 <td height=100%  bgcolor=#cccccc>
                  <div id="dtext" class="bar1" style="padding:10 4 5 10">
<script language="javascript">

 document.write (text1);
 </script>

                  </div>
                 </td>
            </tr>
       </table>
       
     </div>
      
     </td>
     </tr>
     </table>
     
    </td>
 </tr>
</table>

</body>
</html> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值