这篇博客展示了如何在课堂上使用Dreamweaver（DW）来制作一个模仿淘宝网站的用户注册页面。代码包括HTML结构，样式设计，以及表单元素如文本输入、密码确认、性别选择和兴趣爱好复选框等。
上课学习的dw操作，图为课堂作业，代码如下
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
font-family: "微软雅黑";
}
#logo,header,#main,footer {
width: 700px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
header {
font-size: 18px;
line-height: 40px;
font-weight: bolder;
color: #fff;
background-color: #f60;
height: 40px;
}
#main {
height: 380px;
}
#main li {
height: 35px;
list-style-type: none;
}
#user,#psw2,#psw1 {
background-color: #ffc;
height: 20px;
width: 150px;
border: 1px solid #157782;
}
#user:hover,#psw1:hover,#psw2:hover {
background-color: #e0f9fc;
}
footer {
font-size: 16px;
line-height: 40px;
background-color: #f60;
text-align: center;
height: 40px;
}
#txt{
border-bottom:0px;
border-right:0px;
border-left:2px #000000 solid;
border-top:2px #000000 solid;
}
#txt{
background-color:#fff;
}
#txt:hover{
background-color:#0ff;
}
</style></head>
<body>
<div id="logo">
<img src="image/logo.gif" width="250" height="40" />
<img src="image/reg.gif" width="250" height="40" />
</div>
<header>用户免费注册页面</header>
<div id="main">
<ul>
<form>
<li>
<label for="user">会员账号：</label>
<input type="text" name="username" id="user" />
</li>
<li>
<label for="psw1">登录密码：</label>
<input type="password" name="psw1" id="psw1" />
</li>
<li>
<label for="psw1">确认密码：</label>
<input type="password" name="psw2" id="psw2" />
</li>
<li>
<label>会员性别</label>
<input type="radio" name="rdoSex" value="0" checked />
<img src="image/Male.gif" width="22" height="21" alt=""/>
<input name="rdoSex" type="radio" value="1" />
<img src="image/Female.gif" width="22" height="21" alt=""/>
</li>
<li>
<label>个人爱好：</label>
<input type="checkbox" value="sport" name="cbxHobby" />运动
<input type="checkbox" value="chat" name="cbxHobby" />聊天
<input type="checkbox" value="game" name="cbxHobby" />游戏
</li>
<li>
<label for="date">出生日期：</label>
<input type="date" name="date" id="date" value="2015-08-04" />
</li>
<li>
<input type="submit" name="submit" id="submit" value="同意以下条款并提交注册信息" />
<input type="reset" name="reset" id="reset" value="重置" />
</li>
<li>
<img src="image/read.gif" width="35" height="26" alt=""/>阅读《淘宝服务协议》
</li>
<li>
<textarea name="textarea" cols="70" rows="5">本协议由您与浙江淘宝网络有限公司共同缔结，本协议具有合同效力。本协议中协议双方合称协议方，浙江淘宝网络有限公司在协议中亦称为“淘宝”。本协议中“淘宝平台”指由浙江淘宝有限公司运营的网络交易平台，包括淘宝网，域名为 taobao.com;淘宝商城，域名为tmall.com;一淘网，域名为etao.com。
</textarea>
</li>
</form>
</ul>
</div>
<footer>Copyright©2005-2015 Taobao.com 版权所有</footer>
</body>
</html>
扫一扫
2137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
