0

首先，请不要讨厌...我在 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 &#11; |</a> 
        <a href="#"> &#11; Hardstyle &#11; |</a>
        <a href="#"> &#11; Glitch Hop &#11; |</a> 
        <a href="#"> &#11; 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>
4

1 回答 1

0

如果您不进行一些响应，则需要在 HTML 上强制执行宽度。我建议您编写 HTML/CSS，期望视口大小约为 1280 像素。

于 2013-04-23T20:21:48.430 回答