标签：
主页面：
<!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 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 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 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
