Question

要了解如何制作不同类型的网站，有时只是为了好玩，我会找到很酷的网站并挑战自己制作它们。然而，我对网页设计还是一个新手，并且偶然发现了一个错误。我记得有一段时间修好它但不记得怎么回事。如果我重新调整页面大小，标题项会在屏幕上移动并最终落在彼此之下。

CSS：

max-width: 100%;
        overflow-x: hidden;
        margin:0;
        background-image: url("images\bg.png");
        background-width:100%;
    }

    #topbar{
        background-color: black;
        width: 100%;
        height: 122px;
        opacity: 0.5;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .logo{
        position:absolute; z-index: 100;
        padding-left:245px;
        padding-top:40px
    }

    #topmenu{
        position:absolute; z-index: 100;
        font-family: ‘Arial Narrow’, sans-serif;
        margin-left:67%;
        padding-top:15px;
    }

    #bigmenu{
        position:absolute; z-index: 100;
        font-family: 'Arial Narrow', sans-serf;
        margin-left:49%;
        margin-top:80px;
        text-decoration:none;
    }

    .big-link{
        text-decoration:none;
        padding-right:12px;
        padding-left:12px;
        padding-top:25px;
        padding-bottom:25px;
        color: #00CBFF;
        font-size:16px;
    }

    .big-link:hover{
        background-color:black;
        color:#91E5FA;
    }

    .clickable-link{
        text-decoration:none;
        margin:6px;
        color:#91E5FA;
        font-size:13px;
    }

    .clickable-link:hover{
        color:#00AAD2;
    }

    .headerback{
        position:absolute;rgba(0, 0, 0, 0.6) z-index: 1000;
        margin-right:300px;
    }

HTML：

    <div id="container">

<div id="top">

    <div class="logo">

    <a href="index.html"><img src="images\logo.png" /></a>

    </div>

        <div class="headerback">

            <img src="images\headerback.png" />

        </div>

        <div id="topmenu">
                <a href="#" class="clickable-link"><strong>Contact Us</strong></a>
                <a href="#" class="clickable-link"><strong>F.A.Q.</strong></a>
                <a href="#" class="clickable-link"><strong>Client Login</strong></a>
                <a href="#" class="clickable-link"><strong>Register</strong></a>
        </div>

        <div id="bigmenu">
                <a href="#" class="big-link"><strong>HOME</strong></a>
                <a href="#" class="big-link"><strong>MINECRAFT</strong></a>
                <a href="#" class="big-link"><strong>DOMAINS</strong></a>
                <a href="#" class="big-link"><strong>WEB HOSTING</strong></a>
                <a href="#" class="big-link"><strong>VIRTUAL SERVERS</strong></a>
        </div>

    <div id="topbar">

    </div>



</div>

</div>

任何帮助都将不胜感激 - 如果我遇到一个菜鸟，我很抱歉。顺便说一句，原始网站是https://www.ownagehosting.com/（我只是认为他们有一个非常酷的网站，javascript / jquery看起来很有趣）。

Answer 1

您需要为不同的屏幕指定不同的最大宽度值，这样您就可以控制分区内元素的大小

@media (max-width: 990px){
     /*set your element sizes for device that size*/
}

@media (max-width: 770px){
     /*set your element sizes for device that size*/
}

@media (max-width: 450px){
     /*set your element sizes for device that size*/
}

这只是一个示例，您可以指定所需的相关屏幕尺寸。

当窗口大小改变时，项目会移动

1 个答案: