时光商店下载网页设计
第一次写开发过程 = = （并不知道应该怎么写）
写在前面
如果想成为一个码农，肯定要有良好的代码习惯以及文件的规范存放，以便于以后的查看。
网页的设计，主要由三部分构成，结构（html）、样式（css）、行为（JavaScript）
开发前先建立css文件夹，js文件夹，images文件夹（用于存放网页开发用到的图片资源）
以前刚接触网页设计时，并没有这些良好的习惯，图片什么的js，css全扔在一起，很不便于复查
所以在这里说一下，给像我一样的网页开发菜鸟一个提醒
同样的代码的规范也很重要，每个主要div模块的开始与结束最好做上注释，这样对于以后的代码的检查非常方便，特别是当你的代码越写越多的时候。
最后一点，id或者class等的命名最好是有意义的英文单词，英语不好的可以打上注释，看多几遍就记住了，也方便复查
= = 之前的我喜欢用W、S等随意命名，一旦代码多了，看到这个W的Css样式也就想不起来这个w是干嘛的
写了这么多废话，实在不好意思
——致刚进入网页开发的小伙伴们
时光商店app
网页的设计，主要由三部分构成，结构（html）、样式（css）、行为（JavaScript）
第一至第三天：结构的设计
相对于css与js，网页的结构才是基础与核心。打好地基尤为重要。
所以这花了我很多天去网上找网页设计的模板，去画设计草图。上课的时候也在构思，也在画图纸。也问朋友这样子丑不丑。
当确定网页的基本结构 就可以开始进行div的构建，并进行命名。
首页home——服务service——特点character——介绍层floor——下载区download——关于我们company——产品开发设计design——页脚foot
第四天至第五天：首页设计
首页home
首页设计背景图片尤为重要，因为可以用于展示app（背景图片尚未确定，随便p了一张，比较丑的，希望后期制作的时候这款app的欢迎页有人设计出来后，便可以将它加入首页的背景图片里）
当时设计了这两款（师兄看那两款好看？？）第二款是参照网页模板的
两款home的设置基本相似
具体css设置不详述。
第五至六天：服务模块设计
当时也是设计了两种（第一种 因为当时看了约单的网页页面，受了影响，设计的全是大图片当背景 其实全是大图片当背景 在网页开发中 用不好容易变丑 变丑 变丑 有木有= =特别是当图片选择不当时，一股违和感，怎么换都没感觉。有一阵子一直在找背景 ，换背景，一直在测试= =有点崩溃）
最后选择了第二种
两款结构的设置差不多
都是四格格式
首先一个大的div Service ，css附上背景
再一个container div来控制内容的居中显示（container div在每个div的设计中都会用到，可以用于控制内容与整个大背景的位置）
接着是四个子div，具有图片logo，标题h3，段落p，详细的css不赘述
第六天：特点character
采用三个图标加上简洁的文字概括这款app的的特点
简洁的图标加上文字概括其实是更有利于访问者获取信息的
第七天：介绍层floor
介绍层floor用于详细介绍这款app的具体功能，目前只有三层，在以后的深入探讨中可以加入需要的内容
介绍层的格式 采用左图右字——左字右图——左图右字——……比较友好的设计
（在网页设计中经常会看到这一种，左图右字，上图下字之类的，比较方便，有木有。而且代码可以重复使用，有木有。）
只需设计一个大的div里面嵌套左右两个div。进行css控制即可。
<body> <!-- 首页home --> <div class="home"> <div class="container"> <div class="home-right"> <div class="logo"> <a href="index.html">时光商店 App <img src="images/logo.png" ></a> </div> <div class="home-introduction"> <p><br>校园互动服务社交软件<br> 随时随地完成自己的时光交易<br> 集创意，健康理念，便捷，针对性强，大众化于一身 </p> <a href="#Down">下载</a> </div> </div> <div class="clearfix"></div> </div> </div> <!-- //首页home --> <!-- 服务service --> <div class="service"> <div class="container"> <div class="bottom-grids"> <div class="col-md-6 bottom-grid"> <div class="bottom-left"> <img src="images/heart.png"> </div> <div class="bottom-right"> <h3>发布需求</h3> <p>可以发布属于自己的时光需求，即创建一张时光单，在这里，你可以选择完成时光单的时间，地点，用户要求。</p> </div> <div class="clearfix"></div> </div> <div class="col-md-6 bottom-grid"> <div class="bottom-left"> <img src="images/nav.png"> </div> <div class="bottom-right"> <h3 style="color:18d2ff;">定位</h3> <p>时光商店是基于地理位置服务与提供一定时间服务买卖交换功能。用户能够搜索用户位置附近其他用户互动信息，可看到附近其他用户销售的时光单、评论等信息。</p> </div> <div class="clearfix"></div> </div> <div class="col-md-6 bottom-grid"> <div class="bottom-left"> <img src="images/people.png"> </div> <div class="bottom-right"> <h3>互动交流</h3> <p>提供双向互动服务。用户可在平台上进行互动交流。</p> </div> <div class="clearfix"></div> </div> <div class="col-md-6 bottom-grid"> <div class="bottom-left"> <img src="images/search.png"> </div> <div class="bottom-right"> <h3>时光币</h3> <p>能持有“时光商店”时光币，在时光商店进行消费和享受服务，同时可以通过接受别其他用户的订单赚取时光币，金币可兑换成人民币提现 。</p> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //服务service --> <!-- 特点character --> <div class="character"> <div class="container"> <div class="character-grids"> <div class="col-md-4 character-grid"> <div class="character-one"></div> <p>轻松交易</p> </div> <div class="col-md-4 character-grid"> <div class="character-two"></div> <p>个性设计</p> </div> <div class="col-md-4 character-grid"> <div class="character-three"></div> <p>技术支持</p> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //特点character --> <!-- 介绍层floor_1 --> <div class="floor"> <div class="container"> <div class="floor-grids"> <div class="col-md-6 floor-grid"> <img src="images/laptop2.png" alt=""/> </div> <div class="col-md-6 floor-grid-right"> <h3>产品简介</h3> <p>时光商店是一款以促成闲散时间的互换与买卖为出发点，贯彻“点时成金”的设计理念，全力打造时间流通货币式的大数据时代前沿品牌，旨在指引大学生通过时间互动买卖找到自我价值的科学定位，营造大学校园健康生活交际圈的互动服务社交软件。</p> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //介绍层floor_1--> <!-- 介绍层floor_2 --> <div class="floor_2"> <div class="container"> <div class="floor_2-grids"> <div class="col-md-6 floor_2-grid-right"> <h3>时光交易</h3> <p>提供双向互动服务。即大学生可作为“时光主”购买其他大学生即“时光仆”在时光机平台上提供的时间段服务；大学生也可作为“时光仆”向其他大学生即“时光主”出售自己的时间段服务；大学生可以根据自身的需要进行时间与时间的交换。服务范围非常广，包括技能服务，代拿服务，知识服务等大学生日常需求。 </p> </div> <div class="col-md-6 floor_2-grid"> <img src="images/laptop1.png" alt=""/> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //介绍层floor_2 --> <!-- 介绍层floor_3 --> <div class="floor"> <div class="container"> <div class="floor-grids"> <div class="col-md-6 floor-grid"> <img src="images/5.png" alt=""> </div> <div class="col-md-6 floor-grid-right"> <h3>发单与接单</h3> <p>只需一键点击，便可发布自己的需求；只需一键点击，便可查看时光单列表，根据自己的意向进行接单。操作轻松简捷。</p> </div> <div class="clearfix"></div> </div> </div> </div><br><br><br> <!-- //介绍层floor_3 --> <!-- 表格table --> <div class="table"> <div class="container"> <div class="table-grids"> <div class="col-md-4 table-grid"> <div class="table-text-info"> <div class="basic-plan"> <h3>交友</h3> <p><label></label><span></span></p> </div> <ul> <li>一起读书</li> <li>一起运动</li> <li>一起吃饭</li> <li>发布时光单</li> <li>让生活不再单调</li> </ul> <div class="started"><a href="#">SIGN UP</a></div> </div> </div> <div class="col-md-4 table-grid"> <div class="table-text-info"> <div class="basic-plan"> <h3>生活</h3> <p><label></label> <span> </span></p> </div> <ul> <li>没时间拿快递？</li> <li>需要人代课？</li> <li>行李太重拿不动？</li> <li>发布时光单</li> <li>解决一切烦恼</li> </ul> <div class="started"><a href="#">SIGN UP</a></div> </div> </div> <div class="col-md-4 table-grid"> <div class="table-text-info"> <div class="basic-plan"> <h3>学习</h3> <p><label></label> <span> </span></p> </div> <ul> <li>又到考试月？</li> <li>想学习新知识？</li> <li>想练得新技能？</li> <li>发布时光单</li> <li>寻找良师益友</li> </ul> <div class="started"><a href="#">SIGN UP</a></div> </div> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //表格table --> <!-- 下载download --> <a name="Down"> <div class="download"> <div class="container"> <center><h3>时光商店APP，校园必备软件</h3></center> <center><div class="perfect-buttons"> <a href="#" class="bor">Apple Download</a> <a href="#" class="red">Android Download</a> </div></center> </div> </div> </a> <!-- // 下载download --> <!-- 公司company --> <div class="company"> <div class="container"> <div class="perfect-grids"> <div class="col-md-6 perfect-grid"> <h3>公司简介</h3> <p>伯爵科技是一间拥有高新技术的软件开发运维，提供信息服务的公司。一直秉承“一切以用户价值为依归”的经营理念，为用户提供稳定优质的信息交换服务，始终处于稳健发展的状态。 </p> <a href="single.html">更多</a> </div> <div class="col-md-6 perfect-grid"> <h3>公司愿景</h3> <p> 通过互联网服务提升人类生活品质是伯爵的使命。目前，伯爵科技把为用户提供无烦恼生活方式作为战略目标。提供互联网信息服务，网络广告服务。通过“时光商店”时间经济交易，中国领先的创新式网络平台，满足互联网用户沟通、时间互换等方面的需求。</p> <a href="single.html">更多</a> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //公司company --> <!-- 产品开发设计design --> <div class="design"> <div class="container"> <div class="design-grids"> <div class="col-md-4 design-grid"> <img src="images/111.jpg" alt=""/> <div class="design-text"> <h3>产品设计</h3> <p>该产品由本公司自主设计开发，时光商店设计开发致力于为海大学生提供最优质便捷的服务平台，并与用户保持一定的互动，根据用户体验反馈，逐步改进完善相关服务，从而达到为客户提供满意的服务的目的。</p> </div> </div> <div class="col-md-4 design-grid"> <img src="images/222.jpg" alt=""/> <div class="design-text"> <h3>产品开发</h3> <p>采用瀑布流软件开发法，建立在软件开发平台Eclipse，采用当代最流行程序语言Java和react native.js协作开发。其中，软件产品又嵌入本公司自定义协议以及数据分析策略，敏感词过滤策略，数据库安全策略，高并发与多线程控制策略，由本公司技术部门专门负责开发维护，保障该产品拥有健壮性，鲁棒性，可拓展性，二次开发升级性。</p> </div> </div> <div class="col-md-4 design-grid"> <img src="images/333.jpg" alt=""/> <div class="design-text"> <h3>让它成为高校生活的一部分</h3> <p>我们的市场定位主要为年轻消费人群，并且把初期目标定位为高校学生市场，并利用大学生群体对于“时光商店”软件消费的依赖性逐步开拓校外市场。而且，目前在高校学生市场中没有一款类似的软件平台，合适这款软件的投放发行，开展了一个新的机遇。 </p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //产品开发设计design --> <!-- 页脚上footer-top --> <div class="footer-top"> <div class="container"> <div class="footer-grids"> <div class="col-md-6 footer-grid"> <a href="index.html">时光商店 App</a> <p> 时光商店是一款信息服务交流交易平台应用。为用户提供查询附近用户互动信息，需求信息，交友信息等。该产品是基于地理位置服务与提供一定时间服务买卖交换功能。用户通过手机时光商店软件，能够搜索用户位置附近其他用户互动信息，可看到附近其他用户销售的时光单、评论等信息，并能持有“时光商店”时光币，在时光商店进行消费和享受服务，同时可以通过接受别其他用户的订单赚取时光币，金币可兑换成人民币提现 。在交易后，用户可以获取适当经验值，随着经验值的增加，可以提升用户的交易等级，这是一种创新性，革命性的商业，游戏，社交，交易模式！</p> </div> <div class="col-md-6 footer-grid"> <img src="images/phone.png" width="316" height="377" border="0" alt=""> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //页脚上footer-top--> <!-- 页脚footer --> <div class="footer"> <div class="container"> <p>Copyright © 广东海洋大学伯爵科技团队</p> </div> </div> <!-- //页脚footer --> </body>
</body>