H5、CSS3、Mui开发实例-创新互联

前言

为汝南等地区用户提供了全套网页设计制作服务,及汝南网站建设行业解决方案。主营业务为网站设计制作、做网站、汝南网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

    因进度需要,所以本人从一个服务端、架构暂时变成了一个前端开发者!

对于前端的理解

    所谓“万变不离其宗”,就是这样一个道理,写惯了服务端,当接触前端以前总觉得很难,但是当我真正开始写的时候,发觉一如既往的简单,就是简单的jquery和html交互。

使用到的技术

html5、css3、mui

首页效果如下

H5、CSS3、Mui开发实例

    用到的技术点如下:

        1、最上面是一个轮播图


	  
	    
	    
	      
	        
	      
	    
                                     
                                     
                                     
                                                                                                   

        2、接着是九宫格布局


		
		
		    
		        
		        论坛
		    
		
		
		    
		        5
		        招聘
		    
		
		
		    
		        
		        资讯
		    
		
		
		    
		        
		        培训
		    
		
		
		    
		        
		        认证
		    
		
		
		    
		        
		        企业
		    
		
	
	

     3、接着是3个列表


		
			

论坛

更多                                   Item 1                                                              Item 2                                                              Item 3                                                              Item 2                                                              Item 3                            

     4、底部菜单


	  	
			
			首页
		
		
			
			消息
		
		
			
			我的
		
	

        以上就是整个首页的布局效果及代码,因版权只放出部分代码。

        下面放出几张内容效果图:

H5、CSS3、Mui开发实例

H5、CSS3、Mui开发实例

H5、CSS3、Mui开发实例

H5、CSS3、Mui开发实例

遇到的难点

虽然整个过程觉得比较简单,但是还是遇到了一些问题,分享出来给大家借鉴:

        1、视频播放、因为要兼容Android和ios所以做的时候费了很大的劲。最后还是决定使用H5的标签来做

        2、音乐播放、同样要兼容2种类型的设备,所以无奈自己写了一个Audio,效果如下

    H5、CSS3、Mui开发实例

        代码如下:


			
			
			
			
				
			
			
			
				择天记.mp3

0:00 5:00

        3、文档的在线预览,原意是想着实现在线预览pdf、txt、excel、doc等文件,但最后实现下来发现比较困难,加之时间紧迫,所以采用下载后调用本地阅读器阅读的方式,效果如下:

H5、CSS3、Mui开发实例

        进来后判断本地有木有此文件,没有的话按钮显示“下载(文件大小)”,点击后去下载,下载完成后按钮显示切换为“阅读全文”,点击调用本地阅读器,同样,本地有此文件的话,按钮直接显示“阅读全文”。

结束语

    踏上程序员之路,不管什么技术,或多或少都得接触一点,“万变不离其宗”,所有的东西原理都是一样的,生活中很多事情,不要担心、不要害怕你不会做,只要你愿意尝试。一切都会变的很简单!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前名称:H5、CSS3、Mui开发实例-创新互联
新闻来源:http://hbruida.cn/article/pggps.html