码迷,mamicode.com
首页 > Web开发 > 详细

当当网页面

时间:2016-07-13 17:38:43      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:

主页面:
<!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>div 布局</title>
<link href="主页面.css" rel="stylesheet"/>
<style type="text/css"> 
	#t1:link{color:#000000;} /* 未访问的链接颜色 */
	#t1:hover{color:#FF0000;} /* 鼠标在链接上颜色 */ 
	#t1:active{color:#FF33FF;} /* 点击激活链接颜色 */
</style> 
</head>

<body>
<div id="header">
	<div style="width:1200px; height:50px;backgronnd-color:grey; border-style:solid;border-width:1pt;border-color:#CCCCCC;">
		<div style="width:400px; height:30px; float:left;margin-top:15px;">  送至:北京</div>
	<div style="width:800px;height:30px;float:left;background-color:#ffffff;">
		<div style="width:530px;height:30px; float:left; background-color:#ffffff;margin-top:15px">欢迎光临当当网,请<a style="color:#FF0000" href=            "登录界面.html" id="t1">登录</a>成为会员  购物车|我的订单|当当自出版|手机当当|
		</div>
		<div style="width:68px;height:30px; float:left;background-color:#ffffff;margin-top:15px;" onmouseover="fdang()" onmouseout="fdang2()">我的当当|
			<img src="我的当当.bmp" id="dangdang" style="display:none;"/>
		</div>
		<div style="width:136px;height:30px;background-color:#ffffff; float:left;margin-top:15px;">企业采购|客户服务</div>
	</div>
	</div>
	<div style="width:1200px;height:90px;background-color:#FFFFFF;border-style:solid;border-width:1pt;border-color:#CCCCCC">
		<div style="float:left; width:310px;height:88px;"><a  href="http://www.dangdang.com/"><img src="1.bmp" width="300" height="88" /></a>
		</div>   
		<div style="float:left;width:880px;height:61px;background-color:#ffffff;">
			<div style="float:left;width:522px;height:60px;background-color:#ffffff;">
				<input type="text"placeholder="全场满300减100" size="80"style="margin-top:15px;margin-left:20px;height:30px;border-color:#ff0000;" />
			</div>
		 	<div style="float:left;width:100px;height:60px;background-color:#ffffff;margin-left:20px;">
				<select style="width:100px;height:39px; margin-top:15px;background-color:#CCCCCC;">
					<option>全部分类</option>
					<option>图书</option>
					<option>电子书</option>
					<option>原创文字</option>
					<option>服饰</option>
					<option>运动户外</option>
				</select>
			</div>
			<div style="float:left;width:50px;height:60px;background-color:#ffffff;">
				<a href="http://t.dangdang.com/20160624_tknv"><img style="width:50px; height:37px;margin-top:15px;" src="搜索.bmp" /></a>
			</div>
				
		</div>
	</div>
	<div id="ul2"  style="width:1200px;height:55px;background-color:#FFFFFF;border-style:solid;border-width:1pt;border-color:#CCCCCC">
		<table width="1144">
			<tr>
			<p>
			  <td width="341">   全部商品分类</td>
				<td width="57" id="t1">尾品汇</td>
				<td width="45" id="t1">图书</td>
				<td width="55" id="t1">电子书</td>
				<td width="68" id="t1">原创文字</td>
				<td width="57" id="t1">服饰</td>
				<td width="77" id="t1">运动户外</td>
				<td width="63" id="t1">孕婴童</td>
				<td width="47" id="t1">家居</td>
				<td width="70" id="t1">自有美妆</td>
				<td width="53" id="t1">生鲜</td>
				<td width="65" id="t1">海外购</td>
				<td width="86" id="t1">电器城</td>
			<td width="0"></p>	
			</tr>
	  </table>
	</div>
</div>
<div id="center">
<div id="center1" style="width:860px;height:600px; display:none; ">
  <img src="center1.bmp" /> 
 </div>
 
	<div class="left">
		<ul>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">图书、电子书、童书</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">创意文具</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">服饰、内衣</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">鞋靴、箱包</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">运动户外</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">孕、婴、童</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">家居、家纺、汽车</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">家具、家装、康体</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">美妆、个人护理、成人</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">食品、茶酒、生鲜</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">腕表、珠宝饰品、眼镜</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">手机、数码</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">电脑办公</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">家用电器</li></p>
			<p><li id="t1" onmousemove="fn1()" onmouseout="fn2()">当当礼品卡、生活服务</li></p>
		</ul>
	</div>
	<div id="main">
	<tr style="width:550px;height:300px;background-color:#ffffff;">
		<img width="550"height="300"src="d1.bmp" id="tupian1"/>
	</tr>
	<tr>
		<td ><img style="width:180px;height:150px;" src="main1.jpg" /></td>
		<td ><img style="width:180px;height:150px;"src="main2.jpg" /></td>
		<td ><img style="width:180px;height:150px;" src="main3.jpg" /></td>
	</tr>
		<tr>
		<td ><img style="width:180px;height:149px;" src="main4.jpg" /></td>
		<td ><img style="width:180px;height:149px;" src="main5.jpg" /></td>
		<td ><img style="width:180px;height:149px;" src="main6.jpg" /></td>
	</tr>
	</div>
	<div class="left">
		<img style="width:318px;height:600px;"src="main9.bmp" />
	</div>
</div>
<div id="footer">
	<div id="footer1">
		<table align="center">
			<tr>
				<td><a href="http://help.dangdang.com/details/page13"><img src="主页下1.bmp" /></a></td>
				<td><a href="http://help.dangdang.com/details/page21"><img src="主页下2.bmp" /></a></td>
				<td><a href="http://help.dangdang.com/details/page16"><img src="主页下3.bmp" /></a></td>
				<td><a href="http://help.dangdang.com/details/page29"><img src="主页下4.bmp" /></a></td>
			</tr>
		</table>
	</div>
	<div id="footer2">
		<table align="center" cellpadding="2px"  >
			<tr id="d1">
				<td height="32">购物指南</td>
				<td>支付方式</td>
				<td>订单服务</td>
				<td>配送方式</td>
				<td>退换货</td>
				<td>商家服务</td>
			</tr>
			<tr id="d2">
				<td height="34"><a href="http://help.dangdang.com/details/page2">购物流程</a></td>
				<td><a href="http://help.dangdang.com/details/page21">货到付款</a></td>
				<td>订单配送查询</td>
				<td>配送范围及免邮标准</td>
				<td>退换货政策</td>
				<td>商家中心</td>
			</tr>
			
			<tr id="d3">
				<td height="29"><a href="">发票制度</a></td>
				<td>网上支付</td>
				<td>订单状态说明</td>
				<td>配东范围</td>
				<td>退换货电话</td>
				<td>商家中心</td>
			</tr>
			<tr id="d4">
				<td height="32">账户管理</td>
				<td>货到付款</td>
				<td>订单配送查询</td>
				<td>配送范围及免邮标准</td>
				<td>退换货政策</td>
				<td>商家中心</td>
			</tr>
				
			<tr id="d5">
				<td height="26">会员优惠</td>
				<td>货到付款</td>
				<td>订单配送查询</td>
				<td>配送范围及免邮标准</td>
				<td>退换货政策</td>
				<td>商家中心</td>
			</tr>
		</table>
	</div>
	<div align="center"><img src="主页下5.bmp" /></div>
</div>
<script>
	var i=0;
	setInterval(tupianchange,1000);
	function tupianchange()
	{
		var imgs=document.getElementById("main");
		var srcc=imgs.getElementsByTagName("img");
		var imagsrc=["d2.bmp","d3.bmp","d4.bmp","d5.bmp","d6.bmp","d7.bmp","d8.bmp"];
		srcc[0].setAttribute("src",imagsrc[i]);
		i++;
		if(i==7)
		{
			i=0;
		}
	}
	function fn1()
	{
		document.getElementById("center1").style.display="block";
	}
	function fn2()
	{
		document.getElementById("center1").style.display="none";
	}
	function fdang()
	{
		document.getElementById("dangdang").style.display="block";
	}
	function fdang2()
	{
		document.getElementById("dangdang").style.display="none";
	}
</script>
</body>
</html>



登录界面:<pre name="code" class="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>
<link href="登录.css" rel="stylesheet"/>
</head>

<body>
<div id="header">
	<img src="登录1.bmp" width="800" height="100" />
</div>
<div id="center">
	<table>
		<tr>
			<td>
				<img src="登录3.jpg" width="450"height="384" />
			</td>
		  <td>
    	<p align="left">   用户名:<input type="text" size="30"style="height:30px;" onmousemove="change1()" onmouseout="changeout1()" id="name"placeholder="邮箱/昵称/手机号码"/><span id="sp1" style="display:none;margin-left:60px;">请输入邮箱/昵称/手机号码   </span></p>
		<p align="left">   密   码:<input type="password" name="pwd" size="30"style="height:30px;" onmouseover="change2()" onmouseout=	"changeout2()" id="pwd" placeholder="请输入密码"/><span id="sp2" style="display:none;margin-left:60px;">请填写长度为6-20个字符的密码</span></p>
		<p>            <input type="checkbox" checked="checked" /><span id="checkd"> 请勿在公用电脑上勾选此选项</span>    <span id="wangji"><a href="https://login.dangdang.com/lostpassword.php">忘记密码?</a></span></p>
		<p align="center"><input  type="button" value="登 录"style="width:200px; height:8px; background:#FF0000; font-size:30px; height:auto; color:#FFFFFF" onclick="return1()"></button></p>
				<p align="right"><a href="注册页面.html" style="color:#666666;font-size:12px;">立即注册</a></p>
			</td>
		</tr>
	</table>
</div>
<div id="footer">
	<img src="登录2.bmp"width="800" height="120"/>
</div>
</body>
<script>
	function change1()
	{document.getElementById("sp1").style.display="block";}
	function changeout1()
	{document.getElementById("sp1").style.display="none";}
	function change2()
	{document.getElementById("sp2").style.display="block";}
	function changeout2()
	{document.getElementById("sp2").style.display="none";}
function return1()
	{
	 var name=document.getElementById("name").value;
	 var pwd=document.getElementById("pwd").value;
	
	 var nflag=false;
	 var mflag=false;
	 
	 if(name=="")
	  {
	    
	  		document.getElementById("sp1").style.display="block";
			
	  }else{
	  	var reg1= /^\w+@\w+(\.\w+){1,2}$/;
		var reg2=/^1[358][0-9]{9}$/;
		var reg3=/^[\u4e00-\u9fa5]{0,5}$/;
		if(reg1.test(name)||reg2.test(name)||reg3.test(name))
		{
			nflag=true;
		}
		else
		{
			
			document.getElementById("sp1").innerHTML="邮箱、手机号码不正确或者昵称不在0-5个字符之内,请重新输入!";
			document.getElementById("sp1").style.display="block";
			nflag=false;
		}
	  }
	  
	  
	 if(pwd=="")
	  {
	    
	  	document.getElementById("sp2").style.dispaly="block";
	  }
	  else
	  {
	  	var reg4=/^[a-zA-Z0-9]{6,20}$/;
		if(reg4.test(pwd))
		{
		 	
			mflag=true;
		}
		else
		{
			document.getElementById("sp2").innerHTML="请输入有数字和字母组成的6-20位的密码";
			document.getElementById("sp2").style.display="block";
			mflag=false;
		}
	  }
	   if(nflag==true&&mflag==true)
	  {
	  	
	  	window.location.href="主页面.html";
	  }
	
	}
</script>
</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>
<link href="注册.css" rel="stylesheet" />

</head>

<body>
	<div id="header">
		<img src="注册4.bmp" width="1000" height="100" />
	</div>
	<div id="center">
		<div id="maint" >
		 	<table align="left" bordercolor="#CCCCCC">
			<tr style="height:20px;">   </tr>
				<tr>
					<td style="padding-left:2px;padding-top:10px;">
					 	新用户注册  
					</td>
					<td style="padding-left:6px;padding-top:10px; background-color:#CCCCCC; background-position:center">
						企业用户注册
					</td>
				</tr>
			</table>
		</div>
		<div id="mainb">
		<form  action="" method="post" >
			<table style="azimuth:center">
			<tr >      </tr>
				<tr>
					<td  align="right" style="width:150px;">
						邮箱/手机号码
					</td>
					<td>
						    <input type="text" name="user" id="user"style="width:230px;height:23px;" placeholder=               "请输入你的手机号或邮箱";/>  
					</td>
				</tr>
				<tr>
					<td>   </td>
					<td><span id="sp1" style="width:350px;display:none;color:red;border:#3300FF 1px solid;float:left;">用户名不能为空</span></td>
				</tr>
				<tr>
					<td  align="right">
						登录密码
					</td>
					<td>
						    <input type="password" name="pwd" id="pwd"style="width:230px;height:23px;" placeholder=			                  "请输入密码" />  
					</td>
				</tr>
				<tr>
					<td>   </td>
					<td><span id="sp2" style="width:350px;display:none;color:red;border:#3300FF 1px solid;"placeholder="请输入你的密码">密码不能为空</span></td>
				</tr>
				<tr>
					<td  align="right">
						确认密码
					</td>
					<td>
						    <input type="password" name="repwd" id="repwd" style="width:230px;height:23px;" placeholder="请再次输入密码"/                     >  
					</td>
				</tr>
				<tr>
					<td>   </td>
					<td><span id="sp3" style="width:350px;display:none;color:red;border:#3300FF 1px solid;"placeholder="请再次输入密码">需要再次输入密码</span></td>
				</tr>
				<tr>
					<td  align="right">
						验证码
					</td>
					<td>
						    <input type="text" name="yanzheng" id="yanzheng"style="width:230px;height:23px;" placeholder="请输入验证码" /                >  
						<img src="注册3.bmp" width="50" height="20"  align="absbottom"/>  
						<a href="2.bmp" style="font-size:12px;">换张图</a>
					</td>
				</tr>
				<tr>
					<td>   </td>
					<td><span id="sp4" style="width:250px;display:none;color:red;border:#3300FF 1px solid;"placeholder="请输入验证码">请输入验证码</span></td>
				</tr>
				<tr>
				<td>    </td>
				<td><input type="checkbox" checked="checked"  /><span id="id1">我已阅读并同意</span><a href="http://help.dangdang.com/details/page12" style="color:#FF0000 " id="id2">当当交易条款</a><sapn id="id4">和</span><a href="http://help.dangdang.com/details/page42" style="color:#FF0000" id="id3">当当社区条款</a>
				</td>
				</tr>
				<br />
				<tr>
					<td>   </td>
					<td><input type="button" value="立即注册"style="background-color:#FF0000;font:'宋体';height:40px;width:150px;font-size:14px;" onclick="check()"></td>
				</tr>
			</table>
		</form>	
	</div>
	
	<div id="footer">
		<img src="注册5.bmp" width="800" height="100" />
	</div>

</body>
<script>
	var uflag=false;
	var pflag=false;
	var repflag=false;
	var yzflag=false;
	function check()
	{
	  document.getElementById("sp1").style.display="none";
	  document.getElementById("sp2").style.display="none";
	  document.getElementById("sp3").style.dispaly="none";
	  document.getElementById("sp4").style.dispaly="none";
	  
	  var user=document.getElementById("user").value;
	  var pwd=document.getElementById("pwd").value;
	  var repwd=document.getElementById("repwd").value;
	  var yanzheng=document.getElementById("yanzheng").value;
	  
	  if(user=="")
	  {
	  		document.getElementById("sp1").style.display="block";
			
	  }
	  else
	  {
	  	var reg1= /^\w+@\w+(\.\w+){1,2}$/;
		var reg2=/^1[358][0-9]{9}$/;
		if(reg1.test(user)||reg2.test(user))
		{
			uflag=true;
		}
		else
		{
		document.getElementById("sp1").innerHTML="邮箱或者手机号码是不正确,请重新输入!";
		document.getElementById("sp1").style.display="block";
		uflag=false;
		}
	  }
	  
	  if(pwd=="")
	  {
	  	document.getElementById("sp2").style.dispaly="block";
	  }
	  else
	  {
	  	var reg3=reg2=/^[a-zA-Z0-9]{6,}$/;
		if(reg3.test(pwd))
		{
		 	pflag=true;
		}
		else
		{
			document.getElementById("sp2").innerHTML="请输入有数字和字母组成的至少6位密码";
			document.getElementById("sp2").style.display="block";
			pflag=false;
		}
	  }
	  
	  if(repwd=="")
	  {
	  	document.getElementById("sp3").style.display="block";
	  }
	  else
	  {
	  	if(repwd==pwd)
		{
			repflag=true;
		}
		else
		{
			document.getElementById("sp3").innerHTML="两次密码输入不一致,请重新输入!";
			document.getElementById("sp3").style.display="block";
			repflag=false;
		}
	  }
	  
	  if(yanzheng=="")
	  {
	  	document.getElementById("sp4").style.display="block";
	  }
	  else
	  {
	  	var reg4=/^[A-Za-z]{4}$/;
		if(reg4.test(yanzheng))
		{
			yzflag=true;
		}
		else
		{
			document.getElementById("sp4").innerHTML="验证码输入错误";
			document.getElementById("sp4").style.dispaly="block";
			yzflag=false;
		}
	  }
	  
	  if(uflag==true&&pflag==true&&repflag==true&&yzflag==true)
	  {
	  	alert("注册");
	  	window.location.href="登录界面.html";
	  }
	  else
	  {
	  	alert("注册失败,请重新注册");
	  }
	
	}
</script>
</html>

主页面css
/* CSS Document */
#header
{
	border:#999999 2px solid;
	width:1200px;
	height:200px;
	margin-left:auto;
	margin-right:auto;
	
}
#center
{
	border:#FFFFFF 2px solid;
	width:1200px;
	height:600px;
	margin-left:auto;
	margin-right:auto;
}
.left
{
	border:#FFFFFF 2px solid;
	width:319px;
	height:600px;
	float:left;
}
ul li

{

list-style-type:none;

}

#main
{
	border:#FFCCFF 2px solid;
	width:550px;
	height:600px;
	float:left;
}
#footer
{
	border:#FFFFFF2px solid;
	width:1200px;
	height:400px;
	margin-left:auto;
	margin-right:auto;
}
#footer1
{
	border:#FFFFFF 2px solid;
	width:1200px;
	height:100px;
	margin-left:auto;
	margin-right:auto;
}
#footer2
{
	border:#FFFFFF2px solid;
	width:1200px;
	height:195px;
	margin-left:auto;
	margin-right:auto;
}
#d2,#d3,#d4,#d5
{
 font-size:12px;
 color:#666666;
}
#d1
{
	font-size:14px;
}
#center1 {
  position: absolute;
  left:319px;
  top: 210px;
}
#dangdang{
  position: absolute;
  left:1040px;
  top: 60px;
}

注册css
/* CSS Document */
#header
{
	border:#FFFFFF 2px solid;
	width:1000px;
	height:100px;
	margin-left:auto;
	margin-right:auto;
	
}
#center
{
	border:#CCCCCC 2px solid;
	width:800px;
	height:600px;
	margin-left:auto;
	margin-right:auto;
}
#maint
{
	border:##FF0000 2px solid;
	width:800px;
	height:90px;
	margin-left:auto;
	margin-right:auto
	
}
#mainb
{
	border:##00FFFF 2px solid;
	width:800px;
	height:500px;
	margin-left:auto;
	margin-right:auto
	
}
#id1,#id2,#id3,#id4
{
	font-size:12px;
}

#footer
{
	border:#FFFFFF 2px solid;
	width:800px;
	height:100px;
	margin-left:auto;
	margin-right:auto;
}


登录css
/* CSS Document */
#header
{
	border:#FFFFFF 2px solid;
	width:900px;
	height:100px;
	margin-left:auto;
	margin-right:auto;
	
}
#center
{
	border:#FFFFFF 2px solid;
	width:900px;
	height:400px;
	margin-left:auto;
	margin-right:auto;
}
#checkd
{
	font-size:12px;
	color:#999999;
}
#sp1,#sp2
{
	font-size:12px;
	color:#FF0000;
}
#wangji
{
	font-size:12px;
	color:#0066CC;
}
#footer
{
	border:#FFFFFF 2px solid;
	width:900px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
}



当当网页面

标签:

原文地址:http://blog.csdn.net/qq_20461915/article/details/51882391

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!