当我重新调整窗口大小时,我的代码会移动

时间:2015-12-13 01:09:59

标签: html css web

当我重新调整浏览器窗口的大小时,我的代码会移动。有什么方法可以阻止它移动?

下面是我为我的网站制作的一个页面的示例。请帮助!

<html>
    <head>
        <title> My work! </title>
        <style>

            body{
                background-image: url(back.jpg);
                background-size: 900px 1100px;
                background-attachment: fixed;
            }

            #Title {
                color: white;
                font-size: 100px;
                position: relative;
                top: 70px;
                left: 100px;
                width: 500px;
                padding: 10px;
                background-color: rgb(139,69,41);
                text-align: center;
            }

            .homemenu {
                background-color: rgb(139,69,41);
                width: 60px;
                height: 100px;
                position: absolute; 
                border-radius: 10px 10px 0px 0px;
                color: white;
                padding: 7px 10px 18px;
                text-align: center;
                top: 356px;
            }

            .homemenu:hover{
                top: 326px;
            }

            p{
                position: relative;
                left: 10px;
                margin-top: 40px;
                margin-left: 20px;
            }

            #Linkbox{
                position: relative;
                left: 50px;
                top: 0px;
                padding: 10px;
                margin: 0px 180px 100px 50px;
                background-color: rgb(255,210,120);
                color: rgb(139,69,41);
            }

            ul{
                margin-left: 60px;
                font-weight: bold;
            }

            #Logo{
                color: white;
                font-size: 100px;
                position: relative;
                top: 20px;
                left: 200px;
                width: 1500px;
                padding: 10px;
                background-color: rgb(139,69,41);
                text-align: center;
            }

            .pleb{
                position: relative;
                height: 100px;
                width: 100px;
                top: 10px;
            }

        </style>
    </head>

    <body>

        <div id ="Logo"> <img src = "pleb.jpg" class = "pleb"/><span> Miguel's Final Project </span> <img src = "pleb.jpg" class = "pleb"/></div>           
        <div class = "homemenu" style = "left: 1200px;"> <a href= "final project miguel home.html"> Home </a></div>
        <div class = "homemenu" style = "left: 1300px;"> <a href= "final project miguel about.html"> About </a></div>
        <div class = "homemenu" style = "left: 1400px;"> <a href= "final project miguel pic gal.html"> Picture Gallery </a></div>
        <div class = "homemenu" style = "left: 1500px;"> <a href= "final project miguel video.html"> My Favourite Video! </a></div>
        <div class = "homemenu" style = "left: 1600px;"> <a href= "final project miguel mywork.html"> My Work. </a> </div>
        <h1 id = "Title"> My Work! </h1>

        <div id = "Linkbox">
            <p id = "worktalk">
                The following are examples of some of the work I've done over this first semester. It includes assignments, </br>
                labs, in class exercises and just me messing around with skills learnt in lesson. Choose one and take a look for yourself!
            </p>
            </br></br></br>
            <ul> <label> My work list: </label></br></br>
                <a href = "Assignment3/Storytime linkto.html" title = "Story lab"> Make a Story! </a></br></br></br>
                <a href = "Week 1 HW/RadSitemainproject.html" title = "First website!"> Rad Site! </a></br></br></br>
                <a href = "Calculator/Cal main project miguel.html" title = "Trying out functions"> Calculator </a></br></br></br>
                <a href = "Assignment 1/main project rainbow.html" title = "Single rainbows, not double...."> Rainbow Website </a></br></br></br>
            </ul>
        </div>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

很难想象“我的代码移动”是什么意思,但你有一个细节肯定会引起至少一部分的移动:

.homemenu {
…
top: 356px; 
}
.homemenu:hover {
 top: 326px; 
}

当您将鼠标悬停在其中任何一个上时,这会导致所有您的菜单条目向上移动30px。此外,他们绝对定位,这不是一个好主意......