Question

正如标题中提到的，我正在为学校制作一个网站，并且通过创建它的一部分，我发现当我在具有不同分辨率的屏幕上显示页面时，我网站上的元素没有正确排列。我对html / css相当新，并坚持如何解决这个问题。任何建议或帮助将不胜感激。

这是我的html文件的正文部分：

        <a href='index.html'>
        <img src="Images\Logo\Logopng.png" alt="Explore Germany"/> 
        </a> <!-- Inserting Logo at top of page -->
            <div id="whitespace">
            <a> <img  id="twitt" src="Images\images\twitter_web.png"> </a>
            <a> <img  id="email" src="Images\images\email_web.png"> </a>
            </div>
            <nav>
                <div id="top" class = "line black"></div>  <!-- This is the black line just above the links at top of page -->
                <ul>            <!-- A list with links to external pages for my header -->
                <li><a id="menu" href="why.html">Why Germany?</a></li>   
                <li><a id="menu" href="where.html">Where In Germany?</a></li>
                <li><a id="menu" href="language.html">German Language</a></li> 
                <li><div  class="box grey"></div></li>
                </ul>
                <div id="bottom" class = "line black"></div>     <!-- This is the black line just below the links at top of page -->
            </nav>

    </header>

    <img id="map" src="Images\images\Map.png">

    <img class="Icon" id="Hamburg" src="Images\images\Icon.png">  <div id="Hamburg_Name">Hamburg</div>
    <img class="Icon" id="Berlin" src="Images\images\Icon.png">    <div id="Berlin_Name">Berlin</div>
    <img class="Icon" id="Dresden" src="Images\images\Icon.png">    <div id="Dresden_Name">Dresden</div>
    <img class="Icon" id="Dusseldorf" src="Images\images\Icon.png"> <div id="Dusseldorf_Name">Dusseldorf</div>
    <img class="Icon" id="Cologne" src="Images\images\Icon.png">    <div id="Cologne_Name">Cologne</div>
    <img class="Icon" id="Frankfurt" src="Images\images\Icon.png">  <div id="Frankfurt_Name">Frankfurt</div>
    <img class="Icon" id="Munich" src="Images\images\Icon.png">     <div id="Munich_Name">Munich</div>


    <div id="info">
        <div id="name">Click on an Icon on the<br> map to learn more about that city</div>
        <div id="info1"></div>
        <img src="" id="cityImg">
        <div id="head"></div>
        <div id="info2"></div>
    </div>



            <div id="foot" class="footer black"> <!-- This is for the black box at the bottom which is the footer -->
                <nav>
                    <ul>
                        <li><a id="wfooter" href="index.html">Home</a></li>          <!-- This is a list of the links and lines in the footer -->
                        <li><a id="wfooter" href="why.html">Why Germany</a></li>
                        <li><a id="wfooter" href="where.html">Where In Germany</a></li>
                        <li><a id="wfooter" href="language.html">German Language</a></li>
                        <li><a id="wfooter2"><i>@Copyright Jack Ryan 2017 Contact: jryan@student.christscollege.com<i></a></li>
                    </ul>
            </nav>

        </div>






</body>

这是我的css文件：

body {
    width: 800px;
    height:1200px;
    margin:0 auto;
    vertical-align: middle;
    height:100%;

}

p {
    font-size: 15%
    font:;  
}

header img {
    vertical-align: middle;
    margin-left: 350px;
    margin-top:15px;
    max-height: 100px;
    max-width:100px;
}

#gate {
    max-width: 800px;
    margin-left: 0px;
    position:relative;
    bottom:16px;

}


html {
    width:100%;
    height:100%;
    background-color:black;
}   

ul {
    list-style-type:none;
    margin-left:-40px;
    padding: none;
    overflow: hidden;

}



#menu {
    margin-left:93px;
    max-width: 800px;
    float:left;
    display: block;
    padding:12px;
    background-color:#dddddd;
    text-align: center;
    text-decoration: none;
    font-family: "Proxima Nova";
    color:black;
    margin-top:0px;
}
#menu:hover {
    background-color: #cccccc;
}

.box {
    width:800px;
    height: 40px;
}
.grey {
    background:#dddddd;
}

.line {
    width:800px;
    height:2px;
}

.black {
    background:#000000;
}

#top {
    position:relative;
    bottom:-18px;
}

#bottom {
    position:relative;
    bottom:16px;
}

.back {
    width:800px;
    height:1225px;

}

.backwhere {
    width:800px;
    height:935px;

}

.darkgrey {
    background:#fefdfd;
}

.side  {
    position:absolute;
    width:10px;
    height:10px;
}

.footer {
    width:775px;
    height:150px;
    margin-left:12.5px;
    border-radius:12.5px;
}

#body {
    width:775px;
    margin-left:12.5px;

}

#footer {
    display: block;
    text-decoration:none;
    font-family:"Proxima Nova";
    position:relative;
    padding:5px;
    top:10px;
    color:white;
    margin-left:5px;
}

#footer2 {
    display: block;
    text-decoration:none;
    font-family:"Proxima Nova";
    position:relative;
    color:white;
    margin-left:15px;
    margin-top:20px;

}

#footer:hover {
    color:lightgray;
}

#twitt {
    position:relative;
    margin-left:750px;
    top:-125px;
}

#email {
    position:relative;
    margin-left:695px;
    top:-186px;
}

#whitespace {
    height:0px;
}

#map {
    position:absolute;
    left: 270px;
    margin-left:0px;
    max-height:85%;
    max-width:85%;
}

#hamburg {
    position:absolute;
    top:280px;
    left:480px;
}

#hamburg_name {
    position:absolute;
    top:280px;
    left:500px;
    font-family:"Proxima Nova";
}


#Berlin {
    position:absolute;
    top:350px;
    left:620px;
}

#Berlin_Name {
    position:absolute;
    top:350px;
    left:640px;
    font-family:"Proxima Nova";
}


#Dresden {
    position:absolute;
    top:425px;
    left:640px;
}

#Dresden_name {
    position:absolute;
    top:425px;
    left:660px;
    font-family:"Proxima Nova";

}


#Dusseldorf {
    position:absolute;
    top:435px;
    left:360px;
}

#Dusseldorf_name {
    position:absolute;
    top:435px;
    left:380px;
    font-family:"Proxima Nova";
}

#Cologne {
    position:absolute;
    top:460px;
    left:380px;
}

#Cologne_name {
    position:absolute;
    top:460px;
    left:400px;
    font-family:"Proxima Nova";
}


#Frankfurt {
    position:absolute;
    top:510px; 
    left:455px;
}


#Frankfurt_name {
    position:absolute;
    top:510px; 
    left:475px;
    font-family:"Proxima Nova";
}


#Munich {
    position:absolute;
    top:620px;
    left:550px;
}


#Munich_name {
    position:absolute;
    top:620px;
    left:570px;
    font-family:"Proxima Nova";
}

.Icon{
    height: 20px;
    width: 20px;
}

#info{
    position: absolute;
    top: 200px;
    left: 730px;
    background-color: #e6e6e6;
    height: 550px;
    width: 325px;
    border-radius:12.5px;
}

#Name {
    font-family:"Proxima Nova";
    font-size:25px;
    position: absolute;
    left:20px;
    top:10px;
}

#info1 {
    font-family:"Proxima Nova";
    font-size:15px;
    position:absolute;
    left:15px;
    top:40px;

}

#info2 {
    font-family:"Proxima Nova";
    font-size:15px;
    position:absolute;
    left:15px;
    top:320px;

}

#cityImg {
    position:absolute;
    top:120px;
    left:15px;
    max-width:300px;
    max-height:200px;

}
#head {
    font-family:"Proxima Nova";
    font-size:25px;
    position:absolute;
    left:15px;
    top:290px;

}

#foot {
position:absolute;
top:760px;
}

#wfooter {
    display: block;
    text-decoration:none;
    font-family:"Proxima Nova";
    position:relative;
    padding:5px;
    top:-5px;
    color:white;
    margin-left:5px;
}

#wfooter2 {
    display: block;
    text-decoration:none;
    font-family:"Proxima Nova";
    position:relative;
    color:white;
    margin-left:15px;
    margin-top:20px;
    top:-10px;
}

h1 {
    font-family: "Proxima Nova";
    color:black;
    position:absolute;
    font-weight:lighter;
    top:175px;
    left:300px;
    z-index:1;
}

h2 {
    font-family: "Proxima Nova";
    font-style:normal;
    color:black;
    font-weight:lighter;
    font-size:16px;
    position:absolute;
    top:220px;
    left:300px;
    max-width:700px;
    z-index:1; 

}


#Central_Why  {
    border-radius:15px;
    border:3px solid black;
    max-width:775px;
    position:absolute;
    top:300px;
    left:285px;
    z-index:0;
    border-color:black;
}

#Why_Body {
    position:absolute;
    font-family:"Proxima Nova";
    left:285px;
    top:630px;
    font-weight:lighter;

}


#Oktoberfest {
    position:absolute;
    font-family:"Proxima Nova";
    left:285px;
    top:690px;
    font-weight:lighter;

}

Answer 1

有一些解决方案。一个简单的问题就是@media查询。这些询问浏览器的大小，然后根据大小给出不同的说明

例如添加

@media screen and (min-width: 480px) {
    body {
    width: 600px;
    height:1000px;
   }
}

现在您的屏幕将根据屏幕尺寸加载不同的高度和宽度。你可以在这里阅读更多内容：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

以下是一组适用的尺寸：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

在使用屏幕上总是存在差异所以你必须建立预期，所以通过调整浏览器的大小来测试它，或者如果oyu使用这样的网站进行更多的网页设计：http://quirktools.com/screenfly/

另外，对于所有的downvotes我很抱歉。这里的社区并不是真正的新手友好。它是一个惊人的资源，但更多经验丰富（/半经验）的开发人员来支持彼此..我猜文化已经发展，所以它不会像一所学校的教学基础。

作为一个关闭多个帐户的人，因为我的问题我们没有得到很好的接受，我建议谷歌搜索一个论坛或专门为那些开始寻求建议和帮助的人群，有很多开发人员渴望帮助刚开始的人

我正在为一个学校项目建立一个网站，我遇到了不同分辨率定位网站元素的问题

1 个答案: