文章目录
入口是登录界面
页面之间联系
功能简介
业务流程图
1.体检业务流程图
2.物流业务流程图
用例图分析
页面源码及效果展示
1.登录页面
1.源码
<!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">
.center {
text-align: center;
color: #09F;
}
.ziti {
font-family: Verdana, Geneva, sans-serif;
}
.ziti strong {
font-family: Georgia, "Times New Roman", Times, serif;
}
.ziti strong {
font-family: Arial, Helvetica, sans-serif;
}
.ziti strong {
font-family: "方正舒体", "方正姚体", "汉仪旗黑-55", "黑体", "华文彩云", "华文仿宋", "华文细黑", "华文新魏", "华文行楷", "华文中宋", "隶书", "宋体", "宋体-方正超大字符集", "新宋体", "幼圆";
}
.ziti strong {
font-family: "方正舒体";
}
.ziti strong {
}
.ziti strong {
text-align: center;
font-family: "方正舒体";
}
.center strong {
font-family: "方正舒体";
color: #09F;
font-size: larger;
}
.xie {
font-style: italic;
}
.a1 {
color: #03F;
}
.a2 {
color: #939;
}
.a3 {
color: #9C3;
}
.a4 {
color: #CC9;
}
.a3 u {
font-style: italic;
}
.啊1 {
font-size: 24px;
}
.啊1 {
font-size: 12px;
}
.啊1 {
text-align: center;
}
a:link {
color: #06C;
}
a:visited {
color: #06C;
}
.标题 {
color: #0FC;
}
.标题 strong {
font-size: xx-large;
}
.标题 strong {
font-family: "方正舒体";
}
.标题 strong {
color: #9FC;
}
body {
background-image: url(../%E5%A4%A7%E4%BD%9C%E4%B8%9A%E7%94%A8%E5%9B%BE/0017030071726003_b.jpg);
background-repeat: no-repeat;
background-position:center;
}
#Layer1 {
position:absolute;
width:404px;
height:168px;
z-index:1;
left: 562px;
top: 16px;
}
.STYLE1 {font-size: 80px}
.STYLE5 {color: #3366FF}
</style>
</head>
<body>
<center>
<div id="Layer1">
<p> </p>
<p class="STYLE1">宠爱之旅</p>
</div>
<h1 class="标题"> </h1>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table width="412" height="213" border="0" align="center">
<tr>
<td width="84" height="37"><div align="center">用户名</div></td>
<td width="318"><input name="user22" type="password" id="user22" size="25" /></td>
</tr>
<tr>
<td height="32"><div align="center">密 码</div></td>
<td><input name="user2" type="password" id="user2" size="25" />
<a href="#">忘记密码</a></td>
</tr>
<tr>
<td height="32"><div align="center">验证码</div></td>
<td><p>
<input name="user3" type="password" id="user3" size="15" />
<span class="STYLE5"><u>2354</u></span></p>
</td>
</tr>
<tr class="center">
<td height="26"><p>
<input type="submit" name="button" id="button" value="登录" onclick="window.location=('主页.html');"/>
</p></td>
<td height="26"><input type="submit" name="button2" id="button2" value="取消" /></td>
</tr>
<tr class="center">
<td height="21" colspan="2"><p><a href="注册.html"> 未注册？</a><a href="rigester.html">立即注册</a><a href="rigester.html"></a> </p></td>
</tr>
</table>
</center>
<p> </p>
<p class="a1"> </p>
</body>
</html>
2.图示
若没有账号，点击未注册？立即注册，跳转到注册界面
2.注册界面
1.源码
<!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">
.center {
text-align: center;
color: #09F;
}
.ziti {
font-family: Verdana, Geneva, sans-serif;
}
.ziti strong {
font-family: Georgia, "Times New Roman", Times, serif;
}
.ziti strong {
font-family: Arial, Helvetica, sans-serif;
}
.ziti strong {
font-family: "方正舒体", "方正姚体", "汉仪旗黑-55", "黑体", "华文彩云", "华文仿宋", "华文细黑", "华文新魏", "华文行楷", "华文中宋", "隶书", "宋体", "宋体-方正超大字符集", "新宋体", "幼圆";
}
.ziti strong {
font-family: "方正舒体";
}
.ziti strong {
}
.ziti strong {
text-align: center;
font-family: "方正舒体";
}
.center strong {
font-family: "方正舒体";
color: #09F;
font-size: larger;
}
.xie {
font-style: italic;
}
.a1 {
color: #03F;
}
.a2 {
color: #939;
}
.a3 {
color: #9C3;
}
.a4 {
color: #CC9;
}
.a3 u {
font-style: italic;
}
.啊1 {
font-size: 24px;
}
.啊1 {
font-size: 12px;
}
.啊1 {
text-align: center;
}
body {
background-image: url(%E5%9B%BE%E7%89%87%E6%96%B0/%E8%83%8C%E6%99%AF2.jpeg);
}
.标题 { color: #0FC;
}
</style>
</head>
<body>
<center>
<h1 class="center"> </h1>
<h1 class="center"><span class="标题"><img src="../大作业用图/980.jfif" alt="" width="420" height="192" /></span></h1>
</center>
<table width="411" height="285" border="0" align="center">
<tr>
<td width="150" height="37"> <div align="center">用户名</div></td>
<td width="251"><input name="user22" type="password" id="user22" size="25" /></td>
</tr>
<tr>
<td height="32"><div align="center">密 码</div></td>
<td><input name="user2" type="password" id="user2" size="25" /></td>
</tr>
<tr>
<td height="32"><div align="center">邮 箱</div></td>
<td><input name="user2" type="text" id="user2" size="25" /></td>
</tr>
<tr>
<td height="32"><div align="center">联系方式</div></td>
<td><input name="user2" type="text" id="user2" size="25" /></td>
</tr>
<tr>
<td height="35"><div align="center">验证码</div></td>
<td><input name="user3" type="password" id="user3" size="15" />
<span class="a3"><u>2354</u></span></td>
</tr>
<tr class="啊1">
<td height="23" align="left" nowrap="nowrap" bordercolor="#999999" bgcolor="#FFFFFF"><blockquote>
<div align="center"><span class="a1"><a href="登录.html" accesskey="注">注册</a> </span> </div>
</blockquote></td>
<td height="23" align="left" nowrap="nowrap" bordercolor="#999999" bgcolor="#FFFFFF"><div align="center"><a href="登录.html"> 取消</a></div></td>
</tr>
</table>
<p class="a1"> </p>
</body>
</html>
2.图示
输入用户名，密码，验证码，点击登录，进入 首页
3.首页界面
1.源码
<!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">
.zi {
font-family: "方正舒体";
color: #F00;
background-image: none;
}
a:link {
color: #F00;
font-size: xx-large;
background-image: url(%E5%9B%BE%E7%89%87%E6%96%B0/%E8%83%8C%E6%99%AF2.jpeg);
text-decoration: none;
}
a:visited {
color: #F00;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
body {
background-image: url(%E5%A4%A7%E4%BD%9C%E4%B8%9A%E7%94%A8%E5%9B%BE/285c54368e366b4.jpg);
background-repeat: no-repeat;
background-position:center;
}
.l {
font-size: 50px;
}
a {
font-size: 16px;
}
body,td,th {
font-size: 16px;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
font-size: 16px;
font-family: "方正舒体";
background-image: url(%E5%9B%BE%E7%89%87%E6%96%B0/%E8%83%8C%E6%99%AF2.jpeg);
}
.STYLE1 {color: #CCCCCC}
.STYLE3 {color: #33CCFF; }
.STYLE4 {color: #333333; font-family: "方正舒体"; }
.STYLE7 {font-family: "方正舒体"; color: #33CCFF; background-image: none; }
</style>
</head>
<body>
<center>
<table width="544" height="33" border="0" align="center">
<tr>
<td width="480">首页</td>
</tr>
</table>
<p><img src="../大作业用图/t017f017a0fad8d3d94.jpg" width="613" height="275" /></p>
<table width="526" height="539" border="0" align="center">
<tr bgcolor="#FFFFFF">
<td width="240" height="263" align="center" valign="middle" class="zi"><p><a href="../学校页面/main.html"><img src="../大作业用图/0035035929984563_b.jpg" width="311" height="197" border="0"/></a></p>
<p><a href="体检.html">体检预约</a></p></td>
<td width="244" align="center" valign="middle" bgcolor="#FFFFFF" class="zi"><p><a href="../学校页面/main.html"><img src="../大作业用图/t0133f7c1da06339460.jpg" width="297" height="202" border="0"/></a></p>
<p><a href="宠物快递首页.html">宠物物流</a></p></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="135" align="center" valign="middle" bgcolor="#FFFFFF" class="zi"><p><a href="../花花/我12.html"><img src="../大作业用图/13278682_164822841000_2.jpg" width="309" height="205" usemap="#Map" border="0"/></a>
<map name="Map" id="Map">
<area shape="circle" coords="4,-3,3" href="#" />
</map>
</p>
<p><a href="商城.html">宠物商城</a></p></td>
<td align="center" valign="middle" class="zi"><p><a href="../花花/我12.html" class="STYLE1"><img src="../大作业用图/12-1Q031135029.jpg" width="297" height="195" border="0" /></a></p>
<p><a href="理容.html">医护理容</a></p></td>
</tr>
</table>
<table width="569" border="0">
<tr>
<td width="183"><div align="center" class="STYLE3"><a href="#" class="STYLE4">首页</a></div></td>
<td width="182"><div align="center" class="STYLE3"><a href="广场.html" class="zi">广场</a></div></td>
<td width="182"><div align="center" class="STYLE3"><a href="我的主页.html" class="STYLE7">我的</a></div></td>
</tr>
</table>
</center>
</body>
</html>
2.图示
4.体检预约
1.源码
<!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">
.center {
text-align: center;
color: #09F;
}
.ziti {
font-family: Verdana, Geneva, sans-serif;
}
.ziti strong {
font-family: Georgia, "Times New Roman", Times, serif;
}
.ziti strong {
font-family: Arial, Helvetica, sans-serif;
}
.ziti strong {
font-family: "方正舒体", "方正姚体", "汉仪旗黑-55", "黑体", "华文彩云", "华文仿宋", "华文细黑", "华文新魏", "华文行楷", "华文中宋", "隶书", "宋体", "宋体-方正超大字符集", "新宋体", "幼圆";
}
.ziti strong {
font-family: "方正舒体";
}
.ziti strong {
}
.ziti strong {
text-align: center;
font-family: "方正舒体";
}
.center strong {
font-family: "方正舒体";
color: #09F;
font-size: larger;
}
.xie {
font-style: italic;
}
.a1 {
color: #03F;
}
.a2 {
color: #939;
}
.a3 {
color: #9C3;
}
.a4 {
color: #CC9;
}
.a3 u {
font-style: italic;
}
.啊1 {
font-size: 24px;
}
.啊1 {
font-size: 12px;
}
.啊1 {
text-align: center;
}
body {
background-image: url(%E5%A4%A7%E4%BD%9C%E4%B8%9A%E7%94%A8%E5%9B%BE/u=3179894668,3165869145&fm=26&gp=0.jpg);
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position:center;
}
.标题 { color: #0FC;
}
#Layer1 {
position:absolute;
width:200px;
height:51px;
z-index:1;
left: 671px;
top: 325px;
}
.STYLE1 {
font-family: "宋体";
font-size: 36px;
color: #003399;
}
body,td,th {
font-size: 18px;
}
</style>
</head>
<body>
<center>
<h1 class="center"> </h1>
<h1 class="center"><img src="../大作业用图/u=946802479,3347011204&fm=26&gp=0.jpg" width="500" height="324" /></h1>
<div class="STYLE1" id="Layer1">宠物体检</div>
</center>
<table width="321" border="0" align="center">
<tr>
<td height="41">宠物种类</td>
<td><select name="select">
<option selected="selected"> 狗 </option>
<option> 猫</option>
<option> 荷兰猪</option>
<option> 仓鼠</option>
<option> 蜘蛛</option>
<option>鹦鹉</option>
<option>蜜袋鼯</option>
<option>蛇</option>
</select></td>
</tr>
<tr>
<td width="82" height="41">预约时间</td>
<td width="229"><select name="select2">
<option selected="selected">2021年3月 </option>
<option>2021年4月 </option>
<option>2021年5月</option>
</select>
<a href="#" target="_blank"></a></td>
</tr>
<tr>
<td height="49">预约地点</td>
<td><select name="select3">
<option selected="selected">宠物医院 </option>
<option>宠物管理中心 </option>
<option>动物健康体检所</option>
</select></td>
</tr>
<tr>
<td height="41">联系方式</td>
<td><input name="user2" type="text" id="user2" value="1882934****" size="25" /></td>
</tr>
<tr>
<td height="46">方式</td>
<td><input type="radio" name="radio" id="radio" value="radio" />
<label for="radio"></label>
上门取宠
<input name="radio" type="radio" id="role2" value="role" />
<label for="role2"></label>
自己送店</td>
</tr>
<tr class="center">
<td height="52" colspan="2">
<input type="submit" name="button" id="button" value="提交" onclick="window.location=('支付.html');"/>
<input type="submit" name="button2" id="button2" value="取消" onclick="window.location=('预约成功.html');" />
</tr>
</table>
<p class="a1"> </p>
</body>
</html>
2.图示
5.物流页面
1.源码
<!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">
.zi {
font-family: "方正舒体";
color: #F00;
background-image: none;
}
a:link {
color: #F00;
font-size: xx-large;
background-image: url(%E5%9B%BE%E7%89%87%E6%96%B0/%E8%83%8C%E6%99%AF2.jpeg);
text-decoration: none;
}
a:visited {
color: #F00;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
body {
background-image: url(%E8%83%8C%E6%99%AF.png);
background-color: #7092BE;
}
.l {
font-size: 50px;
}
a {
font-size: 16px;
}
body,td,th {
font-size: 16px;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
font-size: 16px;
font-family: "方正舒体";
background-image: url(%E5%9B%BE%E7%89%87%E6%96%B0/%E8%83%8C%E6%99%AF2.jpeg);
}
.STYLE1 {font-family: "方正舒体"; color: #000000; background-image: none; }
.STYLE2 {color: #000000}
</style>
</head>
<body>
<center>
<table width="480" border="0" align="center">
<tr>
<td width="480"><img src="../大作业用图/返回.jfif" width="54" height="55" /><a href="主页.html">首页</a></td>
</tr>
</table>
<p><img src="../大作业用图/宠物托运.jpeg" width="486" height="283" /></p>
<p><img src="../大作业用图/宠物坐车.jfif" width="493" height="317" /></p>
<p><strong>宠物快递</strong></p>
<table width="480" height="278" border="0" align="center">
<tr bgcolor="#FFFFFF">
<td width="240" height="135" align="center" valign="middle" bgcolor="#99CCFF" class="zi"><p><a href="../学校页面/main.html"></a><img src="../大作业用图/猫.jfif" width="307" height="205" /></p>
<p><a href="立即下单.html">立即下单</a><a href="../郑晓茹 我的学习模块/我的学习主页面.html" class="STYLE1"></a></p></td>
<td width="244" align="center" valign="middle" bgcolor="#99CCFF" class="zi"><p><a href="../学校页面/main.html"></a><img src="../大作业用图/狗.jpg" width="288" height="212" /></p>
<p><a href="历史订单.html">历史订单</a><a href="../学校页面/main.html"></a></p></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="135" align="center" valign="middle" bgcolor="#99CCFF" class="zi"><p><a href="../花花/我12.html"></a>
<map name="Map" id="Map">
<area shape="circle" coords="88,-74,78" href="#" />
</map>
<img src="../大作业用图/仓鼠.jpg" width="304" height="196" /></p>
<p><a href="客服热线.html">客服热线</a><a href="shopwenju.html"></a></p></td>
<td align="center" valign="middle" bgcolor="#99CCFF" class="zi"><p><a href="../花花/我12.html"></a><img src="../大作业用图/兔子.jfif" width="285" height="200" /></p>
<p><a href="使用帮助.html">使用帮助</a><a href="../花花/我12.html" class="STYLE2"></a></p></td>
</tr>
</table>
</center>
</body>
</html>
2.图示
更多页面和页面源码就不一一展示了，如果感兴趣的话可以访问这个链接宠物物流项目源码💙
