界面"/>
CSS+JS+JQuery 实现定位设计APP界面
一个ui-h5页面通常包含两种资源，静态资源和动态资源。静态资源指的是固定不动的元素，比如字体，背景颜色，图标，图片等，动态资源指音频，视频，图片轮播图等。H5作为网页的骨架，其标签可以实现基本的页面形态，JS，Jquery可以辅助实现弹窗提示，表单信息校验，提交，图片切换等功能
接下来我们实现一个h5的页面设计和表单信息校验提交后台
首先引入boostrap的在线css文件，该文件里封装了很多样式，只要引用他的标签就可以实现。
<link rel='stylesheet'href='.3.4/css/bootstrap.min.css'>以下是基本的HTML网页代码
<body><div class="col"><h2>欢迎使用中移在线管理系统 </h2></div><div class="row" style="margin: 120px;"><div class="col-md-6"> <div class="divcss4"><img alt="center" src="image/12.jpg" ></div> </div><div class="col-md-6" style="border-right: 1px solid #ddd;"><div class="well col-md-10" style="width:450px"><h3>登录</h3><form method="post" action="Login" onsubmit="return submitForm();"><div class="input-group input-group-md"><span class="input-group-addon" id="sizing-addon1"> <iclass="glyphicon glyphicon-user" aria-hidden="true"></i></span> <input type="text" id="user" name="user_num" class="form-control"placeholder="用户名" onblur="pdName();"aria-describedby="sizing-addon1"></div><div class="input-group input-group-md"><span class="input-group-addon" id="sizing-addon1"> <iclass="glyphicon glyphicon-lock"></i></span> <input type="password" id="pwd" name="password"class="form-control" placeholder="密码" onblur="pdPwd();"aria-describedby="sizing-addon1"></div><ul><li><span id="passwordTitValue"> </span></li></ul><button style="float:right" type="submit" class="btn1" >登录</button></form></div></div></div>
</body>给他一个H2标签，css设置颜色大小，像素可以根据需要增加
在字体下方插入图片，并控制他的宽度和高度
<div class="divcss4"><img alt="center" src="image/12.jpg" ></div> .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()来检测一下
确定都可以拿到后， 在表单下方添加提示信息区
<ul><li><span id="passwordTitValue"> </span></li>
</ul>然后通过Id获取到他，通过对用户名和密码区的length长度来判断是否为空，如果为空，向span里写入提示信息，同时return一个false，阻止表单提交
校验用户名和密码是否匹配，可以用Ajax来实现.
更多推荐
CSS+JS+JQuery 实现定位设计APP界面
发布评论