html5综合作业,老师 html5网页布局的作业我有些问题

我的笔记本是1368X768的分辨率

所以在我做完作业以后 在我的显示器上看着是和作业要求的网页差不多的

到了大的分辨率的显示器上就不一样了

那怎么做可以即在我的电脑上等比例显示 在别人的电脑上也可以等比例显示呢

还有我下面这段代码中 footer区 按照老师批改的结果做 会上移

*{

margin:0;

padding:0;

font-family: " Microsoft YaHei UI"

}

.header{

width: 100%;

height: 80px;

background: #07cbc9;

position: fixed;

top:0;

z-index: 99;

}

.header,.logo{

float: left;

}

.header .logo img{

padding-left: 77px;

padding-top: 16px;

}

.header .tnov{

float: right;

padding-left:480px;

}

.header .tnov ul li{

float: left;

list-style: none;

height: 80px;

font-size: 15px;

line-height: 80px;

text-align: center;

padding:0 10px 0 10px;

}

.header .tnov ul li:hover{

background: #cccccc;

}

.header .tnov ul a{

text-decoration: none;

color: #fff;

}

.clear{

clear: both;

}

.user{

width: 100%;

position: relative;

background:#000000;

background-color: transparent;

margin-top: 80px;

}

.user .banner img{

width:100%;

padding:0;

margin:0;

}

.user .login{

position:absolute;

left:50%;

top:100px;

margin-left:-254.5px;

z-index: 10;

}

.user .login input{

border:2px white solid;

width:505px;

height: 39px;

margin-bottom: 20px;

background:rgba(0,0,0,0.5);

color: #ffffff;

background-color:transparent;

}

.user .login textarea{

border:2px white solid;

width:505px;

background:rgba(0,0,0,0.5);

color: #ffffff;

}

.user .login .special{

width:123px;

height: 43px;

text-align: center;

margin-left: 170px;

margin-top: 20px;

}

.user .login input:hover,.user .login textarea:hover{

border:2px #07cbc9 solid;

}

.user .login .special:hover{

border:none;

background:#07cbc9;

}

.atop .title{

width: 100%;

height: 100px;

line-height: 100px;

font-size: 35px;

font-weight: bold;

text-align: center;

margin-bottom: -10px;

}

.atop hr{

width: 50px;

height: 2px;

background:#07cbc9;

/*margin-left: 662px;

padding-top: -20px;*/

margin:0 auto;

border:none;

}

.atop .world{

width: 100%;

text-align:center;

color: #798dc0;

padding-top: 10px;

line-height: 1.5em;

margin-bottom: 40px;

}

.agroup{

width: 100%;

position: relative;

}

.agroup .aleft .des{

width: 307px;

height: 204px;

font-size: 15px;

font-weight: 500;

line-height: 1.5em;

border: 1px #c5c5c5 solid;

background: rgba(255,255,255,0.5);

padding:40px 25px 0px 15px;

}

.agroup .aleft,.agroup .aright{

float: left;

}

.agroup .aleft{

position: absolute;

left: 160px;

bottom:50px;

}

.agroup .amiddle{

width: 568px;

height:380px;

margin: 0 auto;

position: relative;

}

.agroup .aright{

position: absolute;

right:120px;

top: 0;

text-align: center;

}

.agroup .aleft .title{

font-size: 25px;

}

.agroup .aleft input{

width: 102px;

height: 45px;

border: none;

background: #000000;

color: #fff;

margin-top: 20px;

}

.agroup .aleft input:hover{

background:transparent;

border:1px #000000 solid;

color: #000;

}

.agroup .amiddle img{

position: absolute;

width: 568px;

height: 380px;

margin-left:50%;

left:-284px;

}

.aright .artop,.aright .arbottom{

width: 238px;

height: 144px;

border: 1px #07cbc9 solid;

margin-bottom: 20px;

}

.aright .special1{

line-height: 72px;

font-size: 50px;

font-weight: bold;

}

.aright .special2{

font-size: 16px;

line-height: 72px;

font-weight: 500;

}

.aright hr{

width: 40px;

height: 1px;

background:#07cbc9;

margin-left:100px;

}

.about .apwgroup{

width: 100%;

float: left;

margin-top: 60px;

}

.apwgroup .apwpicture,.apwgroup .apwworld{

width:25%;

height: 336px;

color: #fff;

background: #07cbc9;

float: left;

}

.apwgroup .apwpicture img{

width:337px;

height:336px;

}

.apwworld .apwworldson{

width: 100%;

}

.apwworld .apwworldson span{

display: block;

font-size: 25px;

margin:15px;

}

.apwworld .apwworldson div{

font-size: 16px;

margin:15px;

}

.apwworld .apwworldson .special{

font-size: 12px;

margin:15px;

}

.apwworld .apwworldson input{

width: 80px;

height: 40px;

border: none;

background: #000000;

color: #fff;

margin-top: 20px;

margin-left: 20px;

}

.apwworld .apwworldson input:hover{

background:transparent;

border:1px #000000 solid;

color: #000;

}

.gallery{

position: relative;

width: 1180px;

margin:0 auto;

}

.gallery .gpwgroup {

/*width: 1140px;

height: 620px;

margin:0 auto;*/

position: absolute;

overflow: hidden;

}

.gpwgroup,.gpwgroup .gpwgroupson{

float:left;

margin:10px;

}

.gpwgroupson dt img{

width:360px;

height: 240px;

display: block;

}

.gpwgroupson dd span{

display: block;

width: 350px;

height:64px;

font-size: 14px;

line-height: 64px;

color:#fff;

background: #000000;

/*position: relative;

top: -4px;*/

padding-left: 10px;

}

.footer{

width: 100%;

height: 80px;

color: #fff;

background: #07cbc9;

text-align: center;

font-size: 16px;

line-height: 80px;

/*position: relative;

bottom:-715px;*/

margin-top:80px;

}

为什么会这样呢