首先,请不要讨厌……我在HTML方面有我的弱点,所以这是一个问题。
不管怎样…当我用另一个分辨率预览我的网站时…它变得不一样了,我找不到问题在哪里:(
我希望它总是像
https://imageshack.us/scaled/large/22/97049008.png下面是1440x900分辨率的显示器
https://imageshack.us/scaled/large/38/25030712.png这是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="icon.ico" type="image/ico" />
<title>
THU | TheHardUploader</title>
</head>
<style>
body{
margin: 0px auto;
background-image:url(aa.jpg);
background-position: center;
background-attachment:fixed;
background-repeat: no-repeat;
}
#main{
margin: 0px auto;
}
.banner{
height: 210px;
margin-top: 35px;
background-color: black;
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:”alpha(opacity=50)”;
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
.logo{
position: absolute;
margin-top: -280px;
margin-left: 350px;
}
.recordsbild{
float: left;
margin: auto;
margin-left: 500px;
position:absolute;
margin-top: -200px;
}
.line{
position:absolute;
height: 180px;
width: 10px;
background-color: white;
margin-top: -195px;
margin-left: 1200px;
}
.musikstil{
position:absolute;
font-family: "Arial Rounded MT Bold";
font-size: 20px;
margin-left: 670px;
margin-top:-50px;
}
.musikstil a{
text-decoration: none;
transition: opacity .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out;
-webkit-transition: opacity .35s ease-in-out;
color: white;
}
.musikstil a:hover{
opacity: 0.2;
}
.menu{
position:absolute;
width: 120px;
opacity: 1.0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
margin: auto;
margin-top: -190px;
margin-left: 1280px;
}
.menu a{
color: white;
font-family:"Arial Rounded MT Bold";
text-decoration:none;
font-size: 20px;
position:absolute;
transition: opacity .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out;
-webkit-transition: opacity .35s ease-in-out;
}
.dub{
color:white;
}
.hard{
color: #009cff;
}
.glitch{
color: #744eac;
}
.chill{
color: #bc0096;
}
.menulogos{
position:absolute;
margin-left: 1140px;
margin-top: -215px;
}
.shop{
margin-top: 10px;
}
.promoting{
margin-top: 45px;
}
.about{
margin-top: 37px;
}
.artists{
margin-top: 30px;
}
.release{
margin-top:20px;
}
.menu a:hover{
opacity: 0.2;
}
.bannerwrap{
}
<body>
<div id="main">
<div class="bannerwrap">
<div class="banner">
</div>
<div class="logo">
<img src="nylogo.png" />
</div>
<div class="recordsbild">
<img src="records.png" />
</div>
<div class="musikstil">
<a href="#"> Dubstep  |</a>
<a href="#">  Hardstyle  |</a>
<a href="#">  Glitch Hop  |</a>
<a href="#">  Chillstep</a>
</div>
<div class="line">
</div>
<div class="menulogos">
<img src="menulogo.png" />
</div>
<div class="menu">
<a href="#" class='contact'> Contact Us </a>
</br>
<a href="#" class='shop'> Shop </a>
</br>
<a href="#" class='release'> Releases </a>
</br>
<a href="#" class='artists'> Artists </a>
</br>
<a href="#" class='about'> About Us </a>
</br>
<a href="#" class='promoting'> Promoting </a>
</div>
</div>
</div>
</body>
</html>
如果您不添加一些响应性,则需要在HTML上强制宽度。我建议你编写的HTML/CSS期望viewport大小在1280px左右。