网上书城

技术2022-07-11 114

网上书城

需求分析界面设计总结：

需求分析

界面设计

登录界面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录界面</title> <link rel="stylesheet" type="text/css" href="bootstrap-4.4.1/css/bootstrap.min.css" /> <style> .form-signin{ position: relative; width: 400px; top: 100px; left: 50%; margin-left: -200px; } </style> </head> <body> <form class="form-signin" action="" method="post"> <div class="text-center mb-4"> <img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">登录界面</h1> </div> <div class="form-label-group"> <input type="text" id="name" name="name" class="form-control" placeholder="请输入用户名" required autofocus> </div> <div class="form-label-group"> <input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" required> </div> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button> <p class="mt-5 mb-3 text-muted text-center">© 2017-2020</p> </form> <script src="bootstrap-4.4.1/css/bootstrap.min.js"></script> </body> </html>

注册界面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册界面</title> <link rel="stylesheet" type="text/css" href="bootstrap-4.4.1/css/bootstrap.min.css" /> <style> .form-signin{ position: relative; width: 400px; top: 100px; left: 50%; margin-left: -200px; } </style> </head> <body> <form class="form-signin" action="" method="post"> <div class="text-center mb-4"> <img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">用户注册</h1> </div> <div class="form-label-group"> <input type="text" id="name" name="name" class="form-control" placeholder="请输入用户名" required autofocus> </div> <div class="form-label-group"> <input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" required> </div> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button> <p class="mt-5 mb-3 text-muted text-center">© 2017-2020</p> </form> <script src="bootstrap-4.4.1/css/bootstrap.min.js"></script> </body> </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> <title>飞凡网上书店</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> </head> <body>  <div id="top_div"> <p class="left">您好，欢迎来到飞凡网上书店！</p> <p class="right"><a href="#">登陆</a> | <a href="#">注册</a> | <a href="#">我的购物车</a> | <a href="#">网站首页</a></p> <div class="fixed"></div> </div> <div id="header_div"> <div id="search">  <form id="form"> <table width="413" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <input type="text" name="" value="" id="input"> </td> <td> <input type="image" name="imageField" src="images/btn_search.png" /> </td> </tr> </table> </form> </div> </div>  <div id="nav"> <ul id="menu"></ul> </div>    <div class="w960 mt10"> <div class="side left"> <h3>图书分类</h3> <ul class="classify bgf7e4e4 bdf7e4e4"> <li> <a href="#">文艺</a></li> <li> <a href="#">小说</a></li> <li> <a href="#">青春</a></li> <li> <a href="#">童书</a></li> <li> <a href="#">励志/成功</a></li> <li> <a href="#">生活</a></li> <li> <a href="#">人文社科</a></li> <li> <a href="#">经管</a></li> <li> <a href="#">科技</a></li> <li> <a href="#">教育</a></li> <li> <a href="#">工具书</a></li> <li> <a href="#">期刊</a></li> <div class="fixed"></div> </ul> </div> <div class="w740 right"> <div class="order02 pb10"> <dl class="findbook"> <dt class="left"><img src="imgs/1.png" /></dt> <dd class="right"> <h4>冷间谍</h4> <p><strong>作者：</strong>亨宁曼凯尔</p> <p><strong>价格：</strong>￥28.50</p> <p><strong>出版社：</strong>江苏文艺出版社</p> <p><strong>书籍简介：</strong>东野圭吾最钦佩的欧洲犯罪小说大师力作。把“哈利波特”拉下畅销榜榜首的侦探小说。最匪夷所思的历史真相、最错综复杂的政治斗争、最神秘莫测的间谍形象，最完美的罪犯与最完美的犯罪，结局你永远猜不到</p> <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p> </dd> <div class="fixed"></div> </dl> <dl class="findbook"> <dt class="left"><img src="imgs/2.png" /></dt> <dd class="right"> <h4>第一商会</h4> <p><strong>作者：</strong>寒川子</p> <p><strong>价格：</strong>￥24.80</p> <p><strong>出版社：</strong>北京联合出版公司</p> <p><strong>书籍简介：</strong>超级畅销书作家寒川子创作历时三年全新力作！讲述财富与权力“离不开，靠不住”的明暗法则</p> <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p> </dd> <div class="fixed"></div> </dl> <dl class="findbook"> <dt class="left"><img src="imgs/3.png" /></dt> <dd class="right"> <h4>狂人摄影日记</h4> <p><strong>作者：</strong>阿刘</p> <p><strong>价格：</strong>￥115.30</p> <p><strong>出版社：</strong>电子工业出版社</p> <p><strong>书籍简介：</strong>风光大师段岳衡作序，凯斯.沃克尔、罗伊.莱姆赛、大卫.迪尔邦、佐尔坦.坎威尔、云漫、吴海辰、范朝亮、张焰八位中外摄影名家联名推荐</p> <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p> </dd> <div class="fixed"></div> </dl> <dl class="findbook"> <dt class="left"><img src="imgs/4.png" /></dt> <dd class="right"> <h4>伊文思与纪录电影</h4> <p><strong>作者：</strong>孙红云(译)</p> <p><strong>价格：</strong>￥39.60</p> <p><strong>出版社：</strong>吉林出版集团有限责任公司</p> <p><strong>书籍简介：</strong>本书收录了世界各国著名学者（如比尔·尼克斯等）和伊文思研究专家（如吴沃·托马斯等）从社会、审美等方面研究伊文思纪录电影的15篇文章。文章的研究范围从伊文思创作的第一阶段“电影诗人”时期的《桥》、《雨》一直到封镜之作《风的故事》。书中还收入伊文思1931—1963年间写作的9篇文章，这些论文在欧洲也属于首次整理发表。本书还附录了伊文思的生平与创作年表等资料</p> <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p> </dd> <div class="fixed"></div> </dl> <dl class="findbook"> <dt class="left"><img src="imgs/5.png" /></dt> <dd class="right"> <h4>Python自动化运维</h4> <p><strong>作者：</strong>刘天斯</p> <p><strong>价格：</strong>￥58.60</p> <p><strong>出版社：</strong>刘天斯</p> <p><strong>书籍简介：</strong>中国运维领域偶像级专家、腾讯高级系统工程师在天涯社区和腾讯近10年运维实践的经验和智慧结晶不仅详尽介绍了服务监控、数据报表、系统安全等基础模块，而且深入讲解了自动化操作、系统管理、配置管理、集群管理及大数据应用等高级功能，包含4个完整的综合案例</p> <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p> </dd> <div class="fixed"></div> </dl> </div>  <div style="text-align: right;"> 每页 5 行共 9 行第 1 页共 2 页 <a href='javascript:gotoPage(1)'>首页</a> <a href='javascript:gotoPage(1)'>上一页</a> <a href='javascript:gotoPage(2)'>下一页</a> <a href='javascript:gotoPage(2)'>尾页</a> 页数 <input type='text' id='pageNumber' style='width:20px;' /> <a href='javascript:jumpPage()'>GO</a> </div>  </div> <div class="fixed"></div> </div>    <div id="footer_wrap"> <p>Copyright ©2014 飞凡教育，版权所有</p> </div>  </body> </html>

购物车界面

总结：

这些只是前段样式，后续会把后面的实现代码显示出来

Processed: 0.017, SQL: 9