淘寶頁面實現（包括級聯選單，下拉選單，框架）
主框架：
<!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>
相關文章
- JS實現級聯下拉選單JS
- jquery實現四級級聯下拉選單jQuery
- jQuery + jQuery Mobile 實現省市二級下拉選單頁面jQuery
- android 之 Spinner 下拉選單實現級聯Android
- select下拉選單實現分類級聯效果
- select下拉選單二級聯動
- css實現的二級下拉選單效果CSS
- jquery實現的點選二級下拉導航選單jQuery
- ABP後臺管理頁面AdminLTE框架，實現選單項點選後，選單展開當前選單項高亮框架
- javascript實現的三級下拉導航選單JavaScript
- CSS 二級下拉選單CSS
- CSS二級下拉選單CSS
- jQuery 二級下拉選單jQuery
- Vue.js自定義下拉選單，如何實現在下拉選單區域外點選即可關閉下拉選單的功能Vue.js
- 出生日期三級聯動下拉選單
- HTML+CSS實現下拉選單HTMLCSS
- checkbox及css實現點選下拉選單CSS
- 選擇下拉選單項實現跳轉效果
- Android實現三級聯動下拉框 下拉選單spinner的例項程式碼Android
- jQuery結合PHP+MySQL實現二級聯動下拉選單[例項]jQueryPHPMySql
- 下拉選單
- js物件導向封裝級聯下拉選單列表JS物件封裝
- select下拉選單級聯效果例項程式碼
- select級聯下拉選單程式碼例項分析
- 純CSS二級下拉導航選單實CSS
- Asp.net+Xml+js實現無線級下拉選單ASP.NETXMLJS
- JavaScript讀取xml實現下拉選單JavaScriptXML
- 使用Vue實現下拉選單框批量新增選項Vue
- 實現基於json的級聯選單JSON
- select下拉選單多級級聯效果程式碼例項
- Ionic如何實現單選二級選單切換
- 選擇select下拉選單網頁跳轉網頁
- JavaScript二級下拉選單詳解JavaScript
- jQuery與CSS二級下拉選單jQueryCSS
- HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單，取消隱藏HTMLCSSjQuery
- 實現單擊一級選單顯示或隱藏二級選單
- 選中select下拉選單option項實現提交效果
- vue下拉選單Vue