1.背景 background:color ,image(position、repeat、size、attachment、all-range),
background:#fff url(' ') [ top left] [repeat: no-repeat、cover、] [attachment:fixed]
2.透明度 opacity:0.8
filter:alpha(opcity=80)
3. input框缩进 padding-left:
text-indent:
4. outline:none; 小蓝框
input:focus{ box-shadow:0 0 3px #000 inset;}
5. 伪类 :hover{ }
a:hover .bt1:hover
6.鼠标样式 cursor:pointer
7.html css 结构层次合理 同一功能尽量使用统一样式
8.min-width min-height
9.绝对定位 相对定位
10.流式页面
效果图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="../新项目/js/usual.js"></script>
<meta charset="UTF-8">
<title>UI图</title>
<style>
html,body{
width:100%;
height:100%
}
body{
margin:0;
padding:0;
background-size: 100%;
}
.container{
position:relative;
width:100%;
height:100%;
background:#4589ae;
background-image:url(../images/1019.jpg);
background-repeat:no-repeat;
background-size:cover;
}
.tu{
width:30%;
height:60%;
text-align:center;
position:absolute;
opacity:0.9;
filter:alpha(opacity=90);
min-width:300px;
min-height:400px;
}
.title{
width:100%;
height:15%;
font-size:100%;
font-weight:900;
color:white;
background-color:#4589ae;
}
.cont{
width:100%;
height:82%;
font-size:100%;
color:#649cf1;
font-weight:900;
background-color:white;
}
.cont input{
text-indent:2%;
margin:2% 0;
width:80%;
height:8%;
outline:none;
min-width:30px;
min-height:14px;
border:1px solid #649cf1;
}
.cont input:focus{
box-shadow:0 0 3px 2px #649cf1 inset;
}
.cont button{
height:8%;
width:80%;
background-color:#649cf1;
border:none;
outline:none;
}
.cont button:hover{
cursor:pointer;
}
.bt_span{
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="tu">
<div class="title">
<div style="width:100%;height:30%;"></div>
<span>Please Enter Your New Password</span>
</div>
<div class="cont">
<div style="width:100%;height:5%;"></div>
<span>Your Account</span>
<input />
<div style="width:100%;height:13%;"></div>
<span>New Password</span>
<input />
<div style="width:100%;height:5%;"></div>
<span>Confirm Your New Password</span>
<input />
<div style="width:100%;height:5%;"></div>
<button><span class="bt_span">Finish</span></button>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var scwidth=$(window).width();
var scheight=$(window).height();
var scwidth1=$('.tu').width();
var scheight1=$('.tu').height();
var endwidth=(scwidth-scwidth1)/2;
var endheight=(scheight-scheight1)/2;
$('.tu').css({
'top':endheight+'px',
'left':endwidth+'px'
});
});
$(window).resize(function(){
var scwidth=$(window).width();
var scheight=$(window).height();
var scwidth1=$('.tu').width();
var scheight1=$('.tu').height();
var endwidth=(scwidth-scwidth1)/2;
var endheight=(scheight-scheight1)/2;
$('.tu').css({
'top':endheight+'px',
'left':endwidth+'px',
});
});
</script>
</body>
</html>