淘寶頁面實現（包括級聯選單，下拉選單，框架）

wzm10455發表於2012-12-10
框架
主框架：
<!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>無標題文件</title>
</head>
<frameset border="5" rows="20%,*">
	<frame src="top.html" name="topname" scrolling="no" />
		<frameset cols="20%,*">
			<frame src="left2.html" name="leftframe" scrolling="no" />
			<frame src="right.html" name="rignt.html" />
	</frameset>
</frameset><noframes></noframes>
<body>
</body>
</html>

左邊頁面：

<!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>無標題文件</title>
<script language="javascript">
function show(a)
{
    if(document.getElementById(a).style.display=="none")
    {
        document.getElementById(a).style.display="block";
    }
    else
    {
        document.getElementById(a).style.display="none";
    }
}
</script>
<style type="text/css">
<!--

.STYLE1 {font-size: small}
-->
</style>
</head>

<body>
<div><p><img src="images1/z-1.jpg" width="32" height="16" onclick="show('1')" /><span class="STYLE1">賬號服務</span></p>
</div>
<div class="STYLE1" id="1" position:absolute;
style="display:none"
    left:34px;
    top:44px;
    
    height:154px;
    z-index:1;>
  <table width="270" border="0">
    <tr>
      <td width="264"><img src="images1/z-top.gif" alt="1" width="18" height="18" />申請QQ賬號</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="1" width="18" height="18" />申請密碼保護</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="2" width="18" height="18" />找回QQ賬號</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="3" width="18" height="18" />恢復QQ好友和群</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="5" width="18" height="18" />QQ安全問題求助</td>
    </tr>
    <tr>
      <td><img src="images1/z-end.gif" alt="1" width="18" height="18" />客服中心</td>
    </tr>
  </table>
</div>
<div><img src="images1/z-2.jpg" width="32" height="16"  onclick="show('2')"/><span class="STYLE1">最新上傳</span></div>

<div class="STYLE1" id="2" position:absolute;="position:absolute;"
style="display:none"
    left:34px;="left:34px;"
    top:44px;="top:44px;"
    
    height:154px;="height:154px;"
    z-index:1;="z-index:1;">
  <table width="270" border="0">
    <tr>
      <td width="264"><img src="images1/z-top.gif" alt="1" width="18" height="18" />QQ皮膚</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="1" width="18" height="18" />QQ表情</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="2" width="18" height="18" />QQ桌面</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="3" width="18" height="18" />QQ主題</td>
    </tr>
  </table>
</div>
<div><img src="images1/z-3.jpg" width="32" height="16"  onclick="show('3')"/><span class="STYLE1">下載QQ</span></div>
<div class="STYLE1" id="3" position:absolute;="position:absolute;"
style="display:none"
    left:34px;="left:34px;"
    top:44px;="top:44px;"
    
    height:154px;="height:154px;"
    z-index:1;="z-index:1;">
  <table width="270" border="0">
    <tr>
      <td width="264"><img src="images1/z-top.gif" alt="1" width="18" height="18"  onclick="show(3)"/>Windows版</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="1" width="18" height="18" />手機版</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="2" width="18" height="18" />Pad版</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="3" width="18" height="18" />網頁版</td>
    </tr>
    <tr>
      <td><img src="images1/z-top.gif" alt="5" width="18" height="18" />Mac版</td>
    </tr>
    <tr>
      <td><img src="images1/z-end.gif" alt="1" width="18" height="18" />Linux版</td>
    </tr>
  </table>
</div>
<p>  </p>
</body>
</html>


右邊頁面：

<!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>無標題文件</title>
<script language="javascript">
function fun()//用陣列實現國家和身份兩個下拉框的互動
{
 if(document.getElementById("5").value=="")
	{
	document.getElementById("5").value="--請輸入--";
	}
 var ay=new Array();
 ay[0]=['紐約','洛杉磯','芝加哥','休斯敦','費城','菲尼斯','聖迭戈','達拉斯','聖安東尼奧','底特律'];
 ay[1]=['東京','橫濱','大阪','名古屋','神戶','京都','福岡','千葉','川口','玉市'];
 ay[2]=['上海','香港','北京','深圳','廣州','天津','臺北','佛山','杭州','重慶'];
 document.getElementById("shen").length=0;//清空自下拉框的所有項
 var Index=document.getElementById("coun").selectedIndex-1;
 for(var i=0;i<ay[Index].length;i++)
 {
 document.getElementById('shen').options.add(new Option(ay[Index][i],ay[Index][i]));//new Option(ay[Index][i],ay[Index][i]))這個的作用是新建子選項
 }
}
 function check3()
 {
 if(document.getElementById("3").value==""||document.getElementById("2").value=="")
	{
	document.getElementById("2").value="--請輸入--";
	document.getElementById("3").value="--請輸入--";
	}
 if(document.getElementById("2").value!=document.getElementById("3").value)
 {
 	document.getElementById("3").value="";
	document.getElementById("t3").style.display="block";
 }
 else
 {
 document.getElementById("t3").style.display="none";
 }
 }
 function check(i)
{
    var str=document.getElementById(i).value;
	if(i=="1")
	{var reg=/^[a-z0-9_-]{4,16}$/;}
	else if(i=="2")
	{var reg=/^[a-z0-9]{6,16}$/;
	check("1");
	}
	else if(i=="4")
	{
	check3();//var reg=/^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|1[1-2]\d|3[0-1]$/;
	var reg=/^([1-2]\d{3})[\/|\-](0?[1-9]|10|11|12)[\/|\-]([1-2]?[0-9]|0[1-9]|30|31)$/ig;
	}
	else if(i=="5")
	{var reg=/\w@\w*\.\w/;
	check("4");}
	var re=new RegExp(reg);
	if(str=="")
	{
	document.getElementById(i).value="--請輸入--";
	}
	if(!re.test(str)&&str!="")
	{
	document.getElementById(i).value="";
	document.getElementById('t'+i).style.display="block";
	}
	else
	{
	document.getElementById('t'+i).style.display="none";
	}

}
function checkall()
{
  if(document.getElementById("ch").checked=="checked"&&check("6")&&document.getElementById('shen').options.length!=0)
  {
      alert("Congratulaitions!");
  }
  else
  {
  check("6");
  	alert("如果想要註冊成功就要同意哦！！！所以您可以選擇關閉網頁和勾上同意選項");
  }
}
</script>
<style type="text/css">
<!--
.STYLE1 {
	font-family: "新宋體";
	font-size: medium;
}
.STYLE2 {
	font-family: "宋體";
	font-size: large;
	font-weight: bold;
}
.STYLE3 {color: #FF0000}
.STYLE4 {color: #000000}

.STYLE5 {color: #CC0000}
-->
</style>
</head>

<body>
	  <div class="STYLE3" id="t1" style="position:absolute;
	  display:none;
	left:303px;
	top:136px;
	width:206px;
	height:21px;
	z-index:1;">請重新輸入</div>
      <div class="STYLE3" id="t2" style="position:absolute;
	left:315px;
	display:none;
	top:201px;
	width:153px;
	height:19px;
	z-index:2;">請輸入密碼</div>
      <div class="STYLE3" id="t3" style="position:absolute;
	left:355px;
	display:none;
	top:254px;
	width:147px;
	height:19px;
	z-index:3;">請正確輸入密碼</div>
      <div class="STYLE3" id="t4" style="position:absolute;
	left:327px;
	top:303px;
	display:none;
	width:163px;
	height:14px;
	z-index:4;">請正確輸入出生日期</div>
      <div class="STYLE5" id="t5" style="	position:absolute;
	left:336px;
	top:354px;
	width:159px;
	display:none;
	height:23px;
	z-index:5;">請正確輸入電子郵箱</div>
      <p class="STYLE1">歡迎您申請免費QQ號碼，申請過程將不會收取您任何費用。我們承諾保護您的信安全，不會將它提供給第三方 。</p>
<p class="STYLE1">注：*為必填內容</p>
<table width="664" height="461" border="0">
  <tr>
    <td><span class="STYLE2">您的賬戶資訊</span></td>
  </tr>
  <tr>
    <td height="23" >
      <p align="center"><span class="STYLE3">*</span><span class="STYLE4">暱稱：
      </span>
      <input name="textfield" type="text" id="1" onchange="check(1)" style="border-color:#000000" />
      </p>	 </td>
  </tr>
  <tr>
    <td><div align="center">           <span class="STYLE4">英文字母，數字或者下劃線，長度為4-16個字元</span></div></td>
  </tr>
  <tr>
    <td> <div align="center" class="STYLE3">*<span class="STYLE4">密碼</span>：
        <input name="textfield2" type="password" id="2"  onchange="check('2')"/>
    </div></td>
  </tr>
  <tr>
    <td><div align="center" class="STYLE4">    6-16個字元組成字母或數字組成</div></td>
  </tr>
  <tr>
    <td><div align="center"><span class="STYLE3">*</span><span class="STYLE4">重新輸入密碼：</span>
        <input name="textfield3" type="password" id="3" onchange="check3()" />
    </div></td>
  </tr>
  <tr>
    <td class="STYLE2">您的個人資訊</td>
  </tr>
  <tr>
    <td><div align="center"><span class="STYLE3">        *</span><span class="STYLE4">出生日期：</span>
        <input name="textfield4" type="text" id="4" onchange="check('4')" />
        <span class="STYLE4">日期格式yyyy-mm-dd</span></div></td>
  </tr>
  <tr>
    <td><div align="left"><span class="STYLE4">                  性別：</span>
        <input name="radiobutton" type="radio" value="radiobutton" />
      <span class="STYLE4">男 </span>
      <input name="radiobutton" type="radio" value="radiobutton" checked="checked" />
      <span class="STYLE4">女</span></div></td>
  </tr>
  <tr>
    <td><div align="center"><span class="STYLE3">*</span><span class="STYLE4">電子郵件地址：</span>
      <input name="textfield5" type="text" id="5" onchange="check('5')" />
    </div></td>
  </tr>
  <tr>
    <td class="STYLE2">所在地區</td>
  </tr>
  <tr>
    <td><div align="center">國家：
        <select name="select" onchange="fun()" id="coun">
          <option value="-1">--請選擇所屬國家--</option>
          <option value="0">美國</option>
          <option value="1">日本</option>
          <option value="2">中國</option>
        </select>
    </div></td>
  </tr>
  <tr>
    <td><div align="center">省份/地區：    
        <select name="select2" id="shen">
          <option value="-1">--請選擇所在的省份和地區--</option>
          </select>
    </div></td>
  </tr>
  <tr>
    <td class="STYLE2">相關服務條款</td>
  </tr>
  <tr>
    <td height="22"><input type="checkbox" name="checkbox" value="checkbox" id="ch" />
      <span class="STYLE1">我同意一下條款</span></td>
  </tr>
  <tr>
    <td height="92"><ul>
      <li>騰訊QQ使用者服務條款</li>
      <li>本著有效利用QQ號碼資源，保障更多合法使用者權益為目的，對於惡意註冊或者長期不登陸的QQ號碼，系統有權收回。</li>
      <li>騰公司具有對以上條款內容的最終解釋權。</li>
    </ul></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="submit" name="Submit" value="提交註冊" onclick="checkall()" />
    </div></td>
  </tr>
</table>
<p>  </p>
</body>
</html>

上頁面：

<!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>無標題文件</title>
</head>
<body>
<img src="images1/top2.jpg" width="1002" height="117" />
</body>
</html>




相關文章