HUI教程：用户登录页面设计

今天为大家分享网页的设计教程。现在很多网站都有用户的注册登录，所以菠菜园的教程也从最简单的用户登录页面开始。首先我们需要去HUI官网下载对应的CSS和JS文件。用别人的框架一个最大的好处就是可以为项目节约很多的时间。

当然了，我们在挑选开发框架的时候首先是自己认为好用。只有自己觉得好用的框架开发起项目来才能得心应手。同时一个优秀的开发框架一方面反映在执行效率上，一方面反应在社区的活跃度上。

由于今晚PS出了点状况，所以效果图就不发了，下面这个源码是完全仿照QQ的用户登录界面写的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/hui.css" />
</head>
<body style="background:#F8F8F8;">
<div id="HUI_Header">
<h1>用户登录</h1>
<div id="HUI_Back"></div>
</div>
<div class="HUI_Wrap" style="background:#FFFFFF; padding-bottom:18px;">
<div class="HUI_Inputs" id="form1" style="padding-top:28px;">
<div class="HUI_Input">
<label>手  机  号</label>
<input type="text" class="HUI_Input_Clear" value="" id="phone" checkType="phone" checkMsg="手机号输入有误" />
</div>
<div class="HUI_Input">
<label>登陆密码</label>
<input type="password" class="HUI_Input_Pwd" id="pwd" value="" checkType="string" checkData="6,20" checkMsg="密码应该为 6-20个字符" />
</div>
</div>
<div style="padding:10px;text-align: center;">
<button class="HUI_Button" style="width: 100%;" onclick="submitNow()">登陆</button>
</div>
<div class="HUI_Text" style="margin:0px 10px;">
<a href="forget.html"><span class="HUI_FL" style="color:#3283FA;">忘记密码？</span></a>
<a href="regeister.html"><span class="HUI_FR" style="color:#3283FA;">新用户注册</span></a>
</div>
</div>
<script type="text/javascript" src="js/hui.js"></script>
<script type="text/javascript" src="js/huiForm.js"></script>
<script>
hui.formInit();
function submitNow(){
if(huiFormCheck('#form1')){
hui.alert('模拟提交');
}
}
</script>
</body>
</html>