how2j.cn


步骤 1 :

前端页面需求列表清单

绿色表示展示的需求
红色表示与服务器有交互的需求
<!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <style> div.knowledge{ font-size:1.2em; culor:#000; margin:10px; margin-left:20px; font-weight:buld; display:list-item; } li.function{ text-decoration:underline; } li{ font-size:0.9em; } </style> <script> $(function(){ $("li.step").addClass("text-success"); $("li.function").addClass("text-danger"); }) </script> <ol> <div class='knowledge'>首页</div> <ul> <li class='step'>在横向导航栏上提供4个分类连接</li> <li class='step'>在纵向导航栏上提供全部17个分类连接</li> <li class='step'>当鼠标移动到某一个纵向分类连接的时候,显示这个分类下的推荐商品</li> <li class='step'>按照每种分类,显示5个商品的方式显示所有17种分类</li> </ul> <div class='knowledge'>产品页</div> <ul> <li class='step'>显示分辨率为950x100的当前商品对应的分类图片</li> <li class='step'>显示本商品的5个单独图片</li> <li class='step'>商品的基本信息,如标题,小标题,加个,销量,评价数量,库存等</li> <li class='step'>商品详情</li> <li class='step'>评价信息</li> <li class='step'>5张商品详细图片</li> <li class='function'>立即购买</li> <li class='function'>加入购物车</li> </ul> <div class='knowledge'>分类页</div> <ul> <li class='step'>显示分辨率为950x100的当前分类图片</li> <li class='step'>显示本分类下的所有产品</li> <li class='function'>分类页排序</li> </ul> <div class='knowledge'>搜索结果页</div> <ul> <li class='step'>显示满足查询条件的商品</li> </ul> <div class='knowledge'>购物车查看页</div> <ul> <li class='step'>在购物车中显示订单项</li> <li class='function'>调整订单项数量</li> <li class='function'>删除订单项</li> </ul> <div class='knowledge'>结算页</div> <ul> <li class='step'>在结算页面显示被选中的订单项</li> <li class='function'>生成订单</li> </ul> <div class='knowledge'>确认支付页</div> <ul> <li class='step'>确认支付页面显示本次订单的金额总数</li> <li class='function'>确认付款</li> </ul> <div class='knowledge'>支付成功页</div> <ul> <li class='step'>付款成功时,显示本次付款金额</li> </ul> <div class='knowledge'>我的订单页</div> <ul> <li class='step'>显示所有订单,以及对应的订单项</li> </ul> <div class='knowledge'>确认收货页</div> <ul> <li class='step'>显示订单项内容</li> <li class='step'>显示订单信息,收货人地址等</li> <li class='function'>确认收货</li> </ul> <div class='knowledge'>评价页</div> <ul> <li class='step'>显示要评价的商品信息,商品当前的总评价数</li> <li class='step'>评价成功后,显示当前商品所有的评价信息</li> <li class='function'>提交评价信息</li> </ul> <div class='knowledge'>页头信息展示</div> <ul> <li class='step'>未登录状态</li> <li class='step'>已登录状态</li> <li class='function'>登录</li> <li class='function'>注册</li> <li class='function'>退出</li> </ul> <div class='knowledge'>所有页面</div> <ul> <li class='function'>搜索</li> </ul> </div> </ol>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
关于 实践项目-天猫整站Springboot-前台需求列表 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图