【PC页面设计项目】宠物物流页面设计(源码+图示）
2024-06-28 09:31:38
文章目录
- 页面之间联系
- 功能简介
- 业务流程图
- 1.体检业务流程图
- 2.物流业务流程图
- 用例图分析
- 页面源码及效果展示
- 1.登录页面
- 1.源码
- 2.图示
- 2.注册界面
- 1.源码
- 2.图示
- 3.首页界面
- 1.源码
- 2.图示
- 4.体检预约
- 1.源码
- 2.图示
- 5.物流页面
- 1.源码
- 2.图示
入口是登录界面
页面之间联系
功能简介
业务流程图
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.图示
更多页面和页面源码就不一一展示了，如果感兴趣的话可以访问这个链接宠物物流项目源码
【PC页面设计项目】宠物物流页面设计(源码+图示）相关推荐
- HTML+CSS期末大作业——中华传统文化题材学生网页设计成品(6页面) 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- HTML+CSS期末大作业——中华传统文化题材学生网页设计成品(6页面) 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML+CSS期末大作业--中华传统文化题材学生网页设计成品(6页面) 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人. 美食. 公司. ...
- H5类似易企秀/编辑器/页面制作/开发/生成工具/软件/源码/授权
代码地址如下: http://www.demodashi.com/demo/14960.html 项目简介 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具 ...
- java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw
java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B/S架构 开 ...
- java毕业生设计宠物美容网站计算机源码+系统+mysql+调试部署+lw
java毕业生设计宠物美容网站计算机源码+系统+mysql+调试部署+lw java毕业生设计宠物美容网站计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B/S架构 开发语言: ...
- 期末作业成品代码——绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:餐饮美食网站设计--绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设 ...
- HTML5期末大作业：动漫网站设计——灌篮高手(4页)HTML+CSS 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
- 期末作业成品代码——威海影视(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:影视网站设计--威海影视(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 ...
- HTML5期末大作业：个人网站设计——彭于晏明星(15页)带特效 带登录 带轮播 带音乐 HTML+CSS+JavaScript 大学生毕设网页设计源码HTML (1)
HTML5期末大作业:个人网站设计--彭于晏明星(15页)带特效带登录带轮播带音乐 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 ...
- HTML5期末大作业：关于餐饮美食网站设计——香港美食介绍(8页) HTML+CSS+JavaScript 大学生毕设网页设计源码HTML 实训大作业HTML
HTML5期末大作业:关于餐饮美食网站设计--香港美食介绍(8页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设 ...
最新文章
- 学会这些Python美图技巧，就等女朋友夸我了
- 在domain中验证cron表达式
- 为Mac OS X添加用Firefox搜索服务
- 开发指南专题九：JEECG微云快速开发平台-表单校验组件ValidForm
- Python Excel教程之如何将多个 excel 文件合并为一个文件（教程含源码）
- 计算机毕业设计参考文献
- 问界M7开启交付 邹市明成精英车主
- ubuntu16.04设置自启动wifi热点
- Mac上如何测试IE浏览器兼容性－虚拟机解决方案
- PPT文件不能编辑怎么办？
- windows embed sapi php,19.1 嵌入式SAPI
- TiDB监控pd面板显示：Region Health: empty-regin-count很多，怎么回收empty-regin？
- Kubernetes secret使用详解
- DOS命令批处理 及 硬盘修复
- RuntimeError: CUDA out of memory. Tried to allocate 6.38 GiB (GPU 0； 10.76 GiB total capacity； 708.0
- 计算机什么专业可以自学考试,自学考试，计算机专业哪个专业好？
- 一些值得关注的云计算资源
- XML 解析器之一 ：MSXML使用教程(转)
- android gif 白边,gif描边泛白问题－关于OS端/iOS端QQ表情白边处理方案
- Thread.yield()详解