CSS+JS+JQuery 实现定位设计ui-h5 页面

 

一个ui-h5页面通常包含两种资源，静态资源和动态资源。静态资源指的是固定不动的元素，比如字体，背景颜色，图标，图片等，动态资源指音频，视频，图片轮播图等。H5作为网页的骨架，其标签可以实现基本的页面形态，JS，Jquery可以辅助实现d窗提示，表单信息校验，提交，图片切换等功能

接下来我们实现一个h5的页面设计和表单信息校验提交后台

首先引入boostrap的在线css文件，该文件里封装了很多样式，只要引用他的标签就可以实现。

以下是基本的HTML网页代码

	欢迎使用中移在线管理系统 
	
			
				
		
		
			
				登录
				

			
		
		
	

给他一个H2标签，css设置颜色大小，像素可以根据需要增加

在字体下方插入图片，并控制他的宽度和高度

		

.divcss4 img{
	width:250px; height:250px
}

 

表单样式的实现可以用div盒子模型，具体Class标签参考boostrap的官网

 接下来我们用JavaScript实现表单的校验和提交，如图所示

 

 

通过用户名和密码的Id属性，来获取value值，也可以通过name来获取

var name=document.getElementById("user");
var password = document.getElementById("pwd");

关于是否拿到value，可以用alert()来检测一下

 

确定都可以拿到后， 在表单下方添加提示信息区

然后通过Id获取到他，通过对用户名和密码区的length长度来判断是否为空，如果为空，向span里写入提示信息，同时return一个false，阻止表单提交

 

 校验用户名和密码是否匹配，可以用Ajax来实现