通过上节我们提到的一些样式属性,我们可以对一些简单页面进行美化加工,使用户得到更好的体验。
现在已经做好了 放毒:
表面上并没有独特之处,但是细节会是用户有更加好的操作体验。
基础上。中间的框上下左右居中。左右宽度随页面宽度变化,但是他又mini-width,缩小到一定程度,就会为固定值。使其更加美观
鼠标点击输入框会有阴影:(并且有首行缩进2个文字的功能)
当鼠标停留在finish上时,边框也会发生变化,更有操作感觉:
鼠标未在上面停留:
不多说了,某些小伙伴已经等不及了,直接放代码
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<style>
.body{
width:100%;
height:100%;
background-image: url(1.jpg);
background-repeat:no-repeat;
background-size :cover;
background-position: center top;
overflow-x:hidden;
display:block;
padding-bottom:50px;
opacity:0.9;
filter:alpha(opacity=90);
position:relative;
}
.mid{
width:30%;
min-width: 400px;
height:450px;
margin:0 auto;
background-color:white;
padding-bottom:50px;
opacity:0.9;
filter:alpha(opacity=90);
position:relative;
}
.mida{
width:100%;
height:60px;
margin-left:0px;
background-color:#438eb9;
text-align:center;
line-height:60px;
}
.midb{
width:100%;
height:50px;
margin-left:0px;
text-align:center;
line-height:60px;
margin-top:10px;
}
.input_1{
width:80%;
height:30px;
margin-left:10%;
text-indent:2em;
line-height:40px;
margin-top:0px;
}
input:focus{
outline:none;
border:1px solid #4589ae;
box-shadow:0px 0px 3px #000 inset;
}
.midc{
width:80%;
height:35px;
margin-left:10%;
margin-top:10px;
background-color:4589ae;
text-align:center;
line-height:35px;
margin-top:40px;
cursor:pointer;
}
#button_a:hover{
outline:none;
border:1px solid #4589ae;
box-shadow:0px 0px 3px #111 inset;
}
</style>
</head>
<body style="margin:0 auto">
<div class="body">
<div class="mid">
<div class="mida">
<font size="4" color="white"><b>Plaese Enter Your New Password</b></font>
</div>
<div class="midb">
<font size="4" color="4589ae" weight="500">Your Account</font>
</div>
<input class="input_1" "type="text">
<div class="midb">
<font size="4" color="4589ae">New Password</font>
</div>
<input class="input_1" "type="text">
<div class="midb">
<font size="4" color="4589ae">Confirm Your New Password</font>
</div>
<input class="input_1" "type="text">
<div class="midc" id="button_a" type="button">
<font size="2" color="white">Finish</font>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$(window).on('resize load',function(){
var win_height = $(window).height();
var whole_height = $(".mid").height();
$(".mid").css('top',win_height/2 - whole_height/2 - 40 + 'px')
})
})
</script>
</html>