时光商店下载网页设计
来源:互联网 发布:淘宝运营学起来难吗 编辑:程序博客网 时间:2024/04/28 11:04
第一次写开发过程 = = (并不知道应该怎么写)
写在前面
如果想成为一个码农,肯定要有良好的代码习惯以及文件的规范存放,以便于以后的查看。
网页的设计,主要由三部分构成,结构(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设置不详述。
第五至六天:服务模块设计
第六天:特点character
第七天:介绍层floor
<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>
- 时光商店下载网页设计
- 网页设计作业下载
- 时光老人的飞鸽传书下载
- 时光轴的设计理念
- 电子商店设计和搭建
- 电子商店设计和搭建
- 网页中时光轴的简单实现
- 网页设计作业成品下载Dreamweaver网页FrontPage网页html静态
- 时光
- 时光
- 时光
- PS设计网页下载使用960栅格系统设计简洁网页
- 小米商店下载破10亿
- 手机google商店不能下载app
- Chrome商店Crx离线安装包下载
- 仿苹果商店圆形下载进度条
- Unity商店下载的文件保存路径
- Chrome无法访问google商店下载插件
- CodeForces 651B Beautiful Paintings
- 山东省第一届ACM大学生程序设计竞赛(原题) Ivan comes again!
- gtk 开发实践第三篇
- 用递归逆序一个单链表
- Hive分析窗口函数之CUME_DIST和PERCENT_RANK
- 时光商店下载网页设计
- 总结:如何驱动DS18B20温度传感器
- 前端插件
- 【转载】MFC的程序执行顺序
- CodeForces 651 A Joysticks
- iptables参考命令
- 【VK Cup 2016 - Round 1 (Div 2 Edition)A】【水题 暴力】Bear and Reverse Radewoosh 做题由易到难分高有难到易分高
- Hive分析窗口函数之LAG,LEAD,FIRST_VALUE和LAST_VALUE
- HNACM(七)B.海岛争霸