H5、CSS3、Mui开发实例-创新互联-古蔺大橙子建站
RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
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://scgulin.cn/article/pggps.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区大橙子信息咨询工作室
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.scgulin.cn

公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

网站备案号：蜀ICP备2022028542号-27

古蔺大橙子建站 古蔺网站建设 古蔺网站设计 古蔺网站制作 成都做网站