WEB标准用户体验网站建设网站优化
三种常见的符合WEB标准的活页JS

<!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=utf-8" />
<title>三种常见的活页JS  MHCY工作室</title>
<style>
body{
 margin:0 auto;
 padding:0px;
 text-align:center;
 font-size:12px;
 line-height:1.5em;
 color:#000;
 font-family: Arial,"宋体",sans-serif;
 background:#fff;
}
form, input, select {margin:0; padding:0;}
img,a img{border:0; margin:0; padding:0;}
input,select,textarea{font-size:12px;vertical-align:middle;font-family: Arial;}
input{padding-top:2px;}
.button { background:url(button_bg.jpg) repeat-x top; height:21px; padding:3px; 

border:1px #D9D9D9 solid;}

a {color:#10478C; text-decoration:none;}
a:visited {color:#83006F;text-decoration:none;}
a:hover {color:#10478C; text-decoration:underline;}
table{ border-collapse:collapse;font-size:12px;}
td { line-height:1.5em;}
th { text-align:center;}
.red { color:#ff0000;}
.font12 { font-size:12px; font-weight:bold;}
.fontw { font-weight:bold;}
.note { color:#666; font-size:12px;}
.other { color: #003300}
.clear { clear:both; line-height:0; font:0px/0px sans-serif;}
.fr { float:right;}
.fl { float:left;}
.name { color:#07427E; font-weight:bold;}
ul {margin:5px;padding:0; text-align:left;}
ul li {
 margin:0;
 padding:4px 3px 0 12px;
 text-align:left;
 display:block;
 overflow:hidden;
 height:17px;
 background:url(arrow.gif) no-repeat 0px 6px;
}
.blog { width:176px; float:left;text-align:left;}
.blog h4{
 margin:0; 
 padding:0;
 text-align:center; 
 font-size:12px;
 font-weight:normal;
 color:#FF6600; 
}
.blog ul { float:left; margin:0; padding:0 0 2px 0;}
.blog li { float:left; margin:0; padding:0; width:40px;}
.info { margin:10px 5px; height:90px; line-height:1.5em; color:#555;}
.info img { float:left; margin:0 5px 0 0;}
.line { height:5px; float:left; width:176px; font:0px/0px sans-serif;}
.line10 { height:10px; float:left; width:778px;font:0px/0px sans-serif;}

.tag3 { float:left; width:178px;}
.tag_title3 { float:left; margin:10px 0 0 0; width:178px; height:31px; 

background:#dfdfdf;}
.tag_title3 ul { float:left;margin:0;padding:0; list-style-type:none;}
.tag_title3 ul li {
 float:left;
 margin:0;
 padding:0;
 text-align:left;
 display: inline;
 overflow:hidden;
 height:31px;
 background:url(arrow.gif) no-repeat -10px -10px;
}
.tag_title3 a {color:#10478C; text-decoration:none;}
.tag_title3 a:visited {color:#10478C;text-decoration:none;}
.tag_title3 a:hover {color:#10478C; text-decoration:underline;}
.t_content3 { float:left;margin:0; padding:0; width:176px; height:180px; 

display:inline; overflow:hidden; border:1px #89C1DD solid; border-top:0;}

.middle_line { float:left; width:10px; height:200px;}
.tag_over { float: left; margin:0; padding:0 0 0 6px; background:#ff0000 url

(tag_left.jpg) no-repeat left top;text-decoration: none;}
.tag_over span { float:left; display:block; padding:9px 8px 0 2px; 

height:22px;background:#ff0000 url(tag_right.jpg) repeat-x right 

top;cursor:pointer;}
.tag_out { float: left; margin:0; padding:0 0 0 6px;}
.tag_out span { float:left; display:block; padding:9px 8px 0 2px; 

height:22px;cursor:pointer;}
.r_narrow { float:left; margin:0; padding:0; width:246px; border:1px #ccc 

solid;}
.r_narrow p { float:left; margin:5px; width:236px; display:inline; text-

align:center; clear:both;}
.r_narrow label { float:left; margin:5px 0 5px 20px; display:inline; 

width:210px; color:#636363; text-align:left;}
.login { height:217px;}
.search { margin:12px 0 0 0; height:160px;}
.s_option { float:left; margin:10px 5px 2px 20px; width:216px; display:inline; 

text-align:left;}
.key { float:left; margin:2px 5px 2px 20px; width:216px;display:inline; text-

align:left; line-height:20px;}
.s_frame { margin:70px auto 0 auto; width:500px; height:300px;}
.s_frame label { float:left; margin:10px 0 0 0;width:500px;text-align:left;}
.s_option2 { float:left; margin:0; font-size:14px; width:500px;text-

align:left;}
.s_option2 a {color:#003366; text-decoration:underline;}
.s_option2 a:hover {color:#ff0000; text-decoration:underline;}
.s_option2 a:visited {color:#003366; text-decoration:underline;}
.key2 { float:left; margin:10px 0 0 0; width:500px;text-align:left; line-

height:20px;}
.r_title { float:left; width:246px; height:34px; background:url

(../images/title_bg.jpg) repeat-x;}

</style>
<script>
//第一种
function  viewDiv(crrentDiv,rootDiv)   
  {  
  var   divs   =   document.getElementById(rootDiv).getElementsByTagName

("div");  
  for(i=0;i<divs.length;i++) 
  {   
  divs[i].style.display="none"
  }
  document.getElementById(crrentDiv).style.display="";
  }

//第二种
function TagRight(v1,v2)
{
 for(k=1;k<2;k++)
 {
  if(v1==k)
  {
  for(i=1;i<3;i++)
  {
   if(i==v2)
   {
   document.getElementById

("tagr"+k+i).className='tag_over';
   document.getElementById

("tcr"+k+i).style.display='block';
   }
   else
   {
   document.getElementById

("tagr"+k+i).className='tag_out';
   document.getElementById

("tcr"+k+i).style.display='none';
   }
  }
  }
 } 
}
//第三种
function searchdiv(n)
{
    var o ;
    for (i=1;i<8;i++)
    {       
        o = document.getElementById("search"+i);
        if (typeof(o)!="undefined" && o!=null)
        {
            if (i==n)
                o.style.display = "block";
            else 
                o.style.display = "none";
        }
    }
}
</script>
</head>

<body>
<div class="line10"></div>
<h1>第一种</h1>
<div class="line10"></div>
    <div class="blog">
    <h4>-- 测试 --</h4>
    <div id="zmqyj">
     <div class="info" id="zmqyj13" 

style="">
      <img 

src="../uploadfile/blog31.jpg" alt="1" height="90" width="70">
      <strong>测试1</strong><br>
      中国区经理<br>
      公司
     </div>
     <div class="info" id="zmqyj01" 

style="display: none;">
      <img 

src="../uploadfile/blog01.jpg" alt="2" height="90" width="70">
      <strong>测试2</strong><br>
      总裁兼执行长<br><br>
      国际集团
     </div>
     <div class="info" id="zmqyj02" 

style="display: none;">
      <img 

src="../uploadfile/blog02.jpg" alt="3" height="90" width="70">
      <strong>测试3</strong><br>
      董事长<br><br>
      实业有限公司
     </div>
     <div class="info" id="zmqyj03" 

style="display: none;">
      <img 

src="../uploadfile/blog03.jpg" alt="4" height="90" width="70">
      <strong>测试4</strong><br>
      执行董事,区人大代表<br>
      科技有限公司
     </div>
     <div class="info" id="zmqyj04" 

style="display: none;">
      <img 

src="../uploadfile/blog04.jpg" alt="5" height="90" width="70">
      <strong>测试5</strong><br>
      总经理<br><br>
      电子有限公司
     </div>
     <div class="info" id="zmqyj05" 

style="display: none;">
      <img 

src="../uploadfile/blog05.jpg" alt="6" height="90" width="70">
      <strong>测试6</strong><br>
      亚洲区总裁<br><br>
      电子有限公司
     </div>
    
    </div>
    <ul>
     <li><a href="744" target="_blank" 

onmouseover="javascript:viewDiv('zmqyj13','zmqyj')">测试1</a></li>
     <li><a href="1023" target="_blank" 

onmouseover="javascript:viewDiv('zmqyj01','zmqyj')">测试2</a></li>
     <li><a href="1138" target="_blank" 

onmouseover="javascript:viewDiv('zmqyj02','zmqyj')">测试3</a></li>
     <li><a href="162" target="_blank" 

onmouseover="javascript:viewDiv('zmqyj03','zmqyj')">测试4</a></li>
     <li><a href="1340" target="_blank" 

onmouseover="javascript:viewDiv('zmqyj04','zmqyj')">测试5</a></li>
     <li><a href="1342" target="_blank" 

onmouseover="javascript:viewDiv('zmqyj05','zmqyj')">测试6</a></li>
    </ul>
    </div>
<div class="line10"></div>    
<h1>第二种</h1> 
<div class="line10"></div>  
   <div class="tag3">
    <div class="tag_title3">
     <ul>
      <li><a href="javascript:;" 

class="tag_over" id="tagr11" onmousemove="TagRight(1,1);"><span>热点专题

</span></a></li>
      <li><a href="Product/" 

class="tag_out" id="tagr12" onmousemove="TagRight(1,2);"><span>推荐产品

</span></a></li>
     </ul>
    </div>
    <div class="t_content3">
        <!--热点专题-->
     <div id="tcr11" style="">
      <ul>   
       <li><a 

href="http://www.mhcy.net/14758.htm">基于LPC2214和uC／OS-I</a></li>   
       <li><a 

href="http://www.mhcy.net/14755.htm">基于RS-485总线的</a></li>   
       <li><a 

href="http://www.mhcy.net/14733.htm">嵌入式媒体处理器选型要素</a></li>   
       <li><a 

href="http://www.mhcy.net/14700.htm">汽车行驶记录仪的数据传输设计</a></li>   
       <li><a 

href="http://www.mhcy.net/14758.htm">基于LPC2214和uC／OS-II </a></li>   
       <li><a 

href="http://www.mhcy.net/14755.htm">基于RS-485总线的汽车四轮定位仪通讯功能</a></li>  

 
       <li><a 

href="http://www.mhcy.net/14733.htm">嵌入式媒体处理器选型要素</a></li>   
       <li><a 

href="http://www.mhcy.net/14700.htm">汽车行驶记录仪的数据传输设计</a></li>   
      </ul>
     </div>
        <!--推荐产品-->
     <div id="tcr12" style="display:none">
      <ul>   
       <li><a 

href="http://www.mhcy.net/14758.htm">基于LPC2214和uC／OS-II 的音频</a></li>   
       <li><a 

href="http://www.mhcy.net/14755.htm">基于RS-485总线的汽车</a></li>   
       <li><a 

href="http://www.mhcy.net/14733.htm">嵌入式媒体处理器选型要素</a></li>   
       <li><a 

href="http://www.mhcy.net/14700.htm">汽车行驶记录仪</a></li>   
       <li><a 

href="http://www.mhcy.net/14758.htm">基于LPC2214和uC／OS-II 的音频</a></li>   
       <li><a 

href="http://www.mhcy.net/14755.htm">基于RS-485总线的;</a></li>   
       <li><a 

href="http://www.mhcy.net/14733.htm">嵌入式媒体处理器选型要素</a></li>   
       <li><a 

href="http://www.mhcy.net/14700.htm">汽车行驶记录仪的数据传输设计</a></li>   
      </ul>
     </div>
    </div>
   </div> 
<div class="line10"></div>
<h1>第三种</h1>
<div class="line10"></div>

   <div class="r_narrow search">
     <div class="r_title"><span class="t02">搜索博客

</span></div>
     <div id="search1">
      <div class="s_option"><strong>博文</strong> 

<a href="javascript:searchdiv(2)">博客作者</a></div>
      <label><input name="" type="text" 

class="input3_s" /><img src="http://www.mhcy.net/images/search.jpg" alt="搜索" /></label>
       <div class="key"><!--热门关键字最多三行-->
    <a href="#" target="_blank"><span style="font-

size: 14px; font-weight: bold; color: rgb(238, 109, 0);">在线拍照</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px; font-weight: bold;">清明</span></a>
    <a href="#" target="_blank"><span style="font-

size: 12px;">动漫</span></a>
    <a href="#" target="_blank"><span style="font-

size: 14px;">风景</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px;">娱乐</span></a>
    <a href="#" target="_blank"><span style="font-

size: 14px; font-weight: bold;">同学</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px;">购物</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px;">旅游</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px; font-weight: bold; color: rgb(238, 109, 0);">美女</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px;">健身</span></a> 
    <a href="r" target="_blank"><span style="font-

size: 16px; font-weight: bold;">美食</span></a> 
    <a href="#" target="_blank"><span style="font-

size: 12px;">朋友</span></a> 
    <a href="#" target="_blank"><span style="font-

size: 12px;">汽车</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px; font-weight: bold;">婚礼</span></a>
       </div>
     </div>

     <div id="search2" style="display:none">
      <div class="s_option"><a 

href="javascript:searchdiv(1)">博文</a> <strong>博客作者</strong></div>
      <label><input name="" type="text" 

class="input3_s" /><img src="http://www.mhcy.net/images/search.jpg" alt="搜索" /></label>

        <div class="key"><!--热门关键字最多三行-->
    
    <a href="#" target="_blank"><span style="font-

size: 12px;">动漫</span></a>
    <a href="#" target="_blank"><span style="font-

size: 14px;">风景</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px;">娱乐</span></a>
    <a href="#" target="_blank"><span style="font-

size: 14px; font-weight: bold;">同学</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px;">购物</span></a>
    
    <a href="#" target="_blank"><span style="font-

size: 16px; font-weight: bold; color: rgb(238, 109, 0);">美女</span></a>
    <a href="#" target="_blank"><span style="font-

size: 16px;">健身</span></a> 
    <a href="r" target="_blank"><span style="font-

size: 16px; font-weight: bold;">美食</span></a> 
    <a href="#" target="_blank"><span style="font-

size: 12px;">朋友</span></a> 
    <a href="#" target="_blank"><span style="font-

size: 12px;">汽车</span></a>
        </div>
     </div>

   </div>   
</body>
</html>
提示：您可以先修改部分代码再运行
三种常见的符合WEB标准的活页JS 本文结束
[ 打印 ] [ 关闭 ]
三种常见的符合WEB标准的活页JS

相关文章
