淘宝页面实现（包括级联菜单，下拉列表，框架）

最新推荐文章于 2024-01-06 10:12:45 发布
最新推荐文章于 2024-01-06 10:12:45 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zadastudyhard/article/details/8277420
版权 
主框架：
<!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" οnclick="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"  οnclick="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"  οnclick="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"  οnclick="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" οnchange="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"  οnchange="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" οnchange="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" οnchange="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" οnchange="check('5')" />
    </div></td>
  </tr>
  <tr>
    <td class="STYLE2">所在地区</td>
  </tr>
  <tr>
    <td><div align="center">国家：
        <select name="select" οnchange="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="提交注册" οnclick="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>




wzm10455
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
淘宝商品发布三级联动菜单.zip
05-24
淘宝商品发布三级联动菜单基于jquery.1.9.1.min.js制作，点击输入框弹出菜单。
仿淘宝商品发布三级联动菜单
11-10
仿淘宝商品发布三级联动菜单，h5源码，花高价买来的，现在分享出来给大家参考参考，拿来直接能用！欢迎下载
微信小程序三级分类
qq_45461146的博客
04-06 4257
今天，在做一个电商小程序的分类页面，要实现三级分类。首先，先上图。 要完成这样一个功能，前端的界面就不说了，具体说说怎么实现的吧，说复杂也挺复杂的，说简单只要会了思路就不难了。其实思路就是先在数据库中设计一个关于分类的数据表，数据表如下，因为本人java学的很烂，所以用的云开发，云数据库。先创建一张category表，如下图 上代码，页面布局： <view class="container"> <view class="search-header"> .
实现三级菜单联动综合代码
高振的博客
09-22 3340
实现三级菜单联动综合代码 实现点击一级菜单弹出二级菜单，选择二级菜单弹出三级菜单的功能 1、html代码 您当前选择的商品类别是： 2、css代码 /*选择商品分类标题*/ .selectedSort { padding: 5px 15px; border: 1px solid #DDDDDD; background-c
后台管理系统: 商品管理
薛定谔的猫
09-29 664
先做俩个卡片组件，分开距离三级联动很多地方都用到了它，我们可以封装成一个组件注册为一个全局组件。
练习篇：实现一个类似淘宝的商品展示列表页面
持续学习中
09-22 4948
经过前面两大部分的详细讲解，相信大家对大部分的布局方式、组件的使用、逻辑业务编写都有了很深入的了解，那么接下来我们就用前面学习的一些知识来进行一个实践：实现一个淘宝风格的商品展示列表，通过这个实例我们可以复习巩固我们之前学过的知识，也算是一个总结与检验。本课练习篇主要是将通过一些组件、自定义组件、常用布局等知识点来完成一个淘宝风格的商品展示列表，一起来学习吧，很简单！ 知识整理 在进行案例编写前，...
jqueryautocomplete实现类似淘宝搜索下拉列表
06-09
jquery.autocomplete实现搜索框下拉列表
js模拟淘宝网的多级选择菜单实现方法
10-23
主要介绍了js模拟淘宝网的多级选择菜单实现方法,涉及javascript针对页面元素结点的遍历与设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
基于HTML+CSS+JavaScript仿淘宝购物商城设计毕业论文源码
最新发布
qq__3200628753的博客
01-06 383
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
3.仿淘宝网多级分类列表菜单代码.html
12-07
仿淘宝网多级分类列表菜单代码,可支持三级以上
完美的仿天猫,淘宝三级下拉菜单
08-12
jquery天猫分类导航banner切换是一款仿最新天猫商品分类导航控制banner图片切换代码。 商城左侧分类jquery菜单是一款实用性非常大的特效，是商城必不可少的神兵利器。
jQuery商品发布三级联动菜单代码.zip
09-23
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
淘宝下拉菜单
03-29
仿淘宝顶部仿淘宝顶部js下拉菜单，很适合网站顶部使用
Android仿美团淘宝实现多级下拉列表菜单功能
08-31
主要介绍了Android仿美团淘宝实现多级下拉列表菜单功能，非常不错，具有参考借鉴价值，需要的朋友参考下
淘宝末级类目
10-19
淘宝末级类目大全。
Ajax实现级联下拉列表
weixin_48223983的博客
03-12 1002
Ajax级联下拉列表 在学习中，要使用级联的下拉列表，可是找了很多都不够好，或者有瑕疵。 1、获取下拉列表的数据 //获取第一个下拉列表的值 @GetMapping("/newemployee") public String tonewEmp(HttpSession session){ List<EmpDepart> depart=employeeInfService.toselectEmpDepartAll(); session.setAttri
级联下拉列表 ajax实现（两种方式）
奔跑的年糕
01-25 8785
案例：设置一个级联下拉列表，省市区，根据id进行查找，同属于同一个省的城市前两位id相同，属于同一个市的区前4位id相同 数据库数据如下（部分）： 第一种方式：通过获取json对象，然后进行解析json对象数组，动态创建下拉列表 1：Dao代码如下： package com.oracle.dao; import java.util.List; import com.orac
Bootstrap实现下拉菜单多级联动
08-28
主要为大家详细介绍了Bootstrap实现下拉菜单多级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用Jquery框架基于ajax实现三级级联下拉菜单
05-26
接下来，您需要使用jQuery框架来实现三级级联下拉菜单。具体步骤如下： 1. 给省的下拉菜单绑定change事件，当省的值改变时，触发事件。 2. 在事件处理函数中，使用ajax向后端请求对应省下的所有市的数据。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值