今天学习了一个网页UI设计，虽然之前写过好几个网页了，但是今天的练习项目依旧让我受益匪浅。
项目静态效果：
项目代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
body{
background-image:url("back.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
height:100%;
}
.center{
position:fixed;
width:25%;
height:54%;
top:23%;
left:35%;
background-color:white;
opacity:0.9;
font-size:16px;
min-width:267px;
min-height:313px;
}
.enter{
height:10%;
background-color:rgb(69,137,174);
opacity:0.8;
}
.enter_word{
position:relative;
text-align: center;
color:#fff;
font-weight:bold;
top:30%;
}
.in_text{
padding:7% 10% 0 10%;
}
.al_word{
text-align: center;
color:rgb(0,128,255);
padding-bottom:4%;
font-weight:bold;
}
input{
width:100%;
height:27px;
text-indent:2%;
border:1px solid rgb(0,128,255);
}
input:focus{
outline: none;
border:1px solid #4589ae;
box-shadow:0px 0px 5px rgb(0,128,255);
}
.pass{
margin-top:20%;
}
.sub{
color:#fff;
background-color:rgb(0,128,255);
font-weight:bold;
width:100%;
height:8%;
margin-top:4%;
border:none;
}
.sub:hover{
cursor:pointer;
box-shadow:0px 0px 7px rgb(0,128,255);
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="center" id="center">
<div class="enter">
<div class="enter_word">Please Enter Your New Password</div>
</div>
<div class="in_text">
<div class="al_word">Your Account</div>
<div><input type="text"/></div>
</div>
<div class="in_text" style="margin-top:3%">
<div class="al_word">Your Password</div>
<div><input type="text"/></div>
</div>
<div class="in_text">
<div class="al_word">Confirm Your New Password</div>
<div><input type="text"/></div>
</div>
<div class="in_text">
<button type="submit" class="sub" >submit</button>
</div>
</div>
</body>
<script type="text/javascript">
var html = document.documentElement;
function fontS(){
var hW = html.offsetWidth;
var hS = hW / 120;
$(".center").css("font-size",hS + "px");
}
// 当窗口大小改变时执行函数
window.onresize = function(){
fontS();
var Width2 = document.body.clientWidth;
var Height2 = document.body.clientHeight;
var main = document.getElementById('center');
// 第一种方式
var mainHeight = main.offsetHeight;
var mainWidth=main.offsetWidth;
var change_H=Height2/2-mainHeight/2;
var change_W=Width2/2-mainWidth/2;
$(".center").css({"top":change_H+"px","left":change_W+"px"});
}
</script>
</html>这里说下几个要点：
1.注册的那个div（以下称为div_1）要随着页面缩放跟着改变，所以一些东西要用百分比表示。我们往往是横向缩放的时候会改变布局，所以我们一般也只需要将width等设为百分比，而高度可以固定死。（这里不考虑做手机端的网页，因为做手机端的网页有专门的东西根据情况自动调整）
2.div_1因为是注册使用，所以即使缩小也要有一个最小的宽度和高度保证用户可以正常输入。
3.我想将div_1一直处于页面中间。最开始我采用的是position:relative加top等定位处于最中间。（absolute有时候会影响到其他地方布局）这样最开始页面缩放的时候依旧可以处于正中间,可是当div_1缩小到最小时，这时再进一步缩小，div_1便不会在页面中间了。因此我们的top等像素应该可以根据div_1的大小对应改变，top应该等于浏览器高度的一般减去div_1高度的一半。
方法为上方的window.onresize方法。
4.有关联的元素应该保持的距离要近一点。比如Your Account和下面的输入框两个关联程度强，所以近一点。而输入密码和确认密码的关联程度强于输入账号的，所以他们两个之间的距离要小于他们和输入账号div之间的距离。
5.有关联程度的元素可以颜色一致。但是鼠标点击input框时，会有聚焦改变样式事件，我们这里使用outline去除本身聚焦事件，添加我们聚焦时想要改变的css样式。
6.button按钮与他们没有关系，可以远一点。但要去除button本身边框（一般不好看），鼠标放置在其上时，有小手指形状。
7.input框中的内容如果顶格不美观，所以用text-indent属性缩进。
8.Your Account这种文字要醒目点，加粗。
9.字体要随着浏览器大小发生变化，上面的fontS()方法