JavaScript+ JQuery+Bootstrap 实现定位设计ui-h5页面

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

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

 

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

以下是基本的HTML网页代码

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

		
	
		
		
		
		

			

				
登录
				

					

						 
						 
					
					

						 
						 
					
					
					

						
 
					
					
						登录
					
					
				

			
		
		
	

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

h2 {
	padding: 5px;
	border-bottom: 1px solid #ddd;
	color: deepskyblue;	
}

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

		

.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来实现