MyException - 我的异常网
当前位置:我的异常网» 网页设计 » 年光商店下载网页设计

年光商店下载网页设计

www.MyException.Cn  网友分享于:2013-04-10  浏览:0次
时光商店下载网页设计

第一次写开发过程  =  =  (并不知道应该怎么写)


写在前面

如果想成为一个码农,肯定要有良好的代码习惯以及文件的规范存放,以便于以后的查看。

网页的设计,主要由三部分构成,结构(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 &copy; 广东海洋大学伯爵科技团队</p>
	</div>
</div>
<!-- //页脚footer -->


</body>



</body>



文章评论

看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员必看的十大电影
程序员必看的十大电影
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
旅行,写作,编程
旅行,写作,编程
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
为什么程序员都是夜猫子
为什么程序员都是夜猫子
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
鲜为人知的编程真相
鲜为人知的编程真相
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员和编码员之间的区别
程序员和编码员之间的区别
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员的鄙视链
程序员的鄙视链
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
总结2014中国互联网十大段子
总结2014中国互联网十大段子
一个程序员的时间管理
一个程序员的时间管理
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员都该阅读的书
程序员都该阅读的书
Java程序员必看电影
Java程序员必看电影
每天工作4小时的程序员
每天工作4小时的程序员
如何成为一名黑客
如何成为一名黑客
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
我是如何打败拖延症的
我是如何打败拖延症的
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我的丈夫是个程序员
我的丈夫是个程序员
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
代码女神横空出世
代码女神横空出世
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
老程序员的下场
老程序员的下场
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
编程语言是女人
编程语言是女人
中美印日四国程序员比较
中美印日四国程序员比较
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员应该关注的一些事儿
程序员应该关注的一些事儿
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
 程序员的样子
程序员的样子
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有