Question

每当我将其重新调整为任何宽度长度时，我的网页看起来都很尴尬。只是看看它，它在标题部分混乱，我不知道如何解决它。请帮助我，这是我的第一个网站，我开始通过这些简单的事情得到一点点。

我不知道如何演示它，但我只是说个人会话和联系人按钮，当调整大小超过某个点时最终会在标题下面而不是嵌入标题中，导致它干扰内容区域。谢谢！

标题代码：

<header>
        <div id="logo"><img src="images/logo.png"></div>
        <nav>
            <ul>
                <li><a href="index.html"><img src="images/Home.jpg" onmouseover="this.src='images/Home2.jpg'"  onmouseout="this.src='images/Home.jpg'"></a></li>
                <li><a href="about.html"><img src="images/About.jpg" onmouseover="this.src='images/About2.jpg'"  onmouseout="this.src='images/About.jpg'"></a></li>
                <li><a href="plans.html"><img src="images/Plans.jpg" onmouseover="this.src='images/Plans2.jpg'"  onmouseout="this.src='images/Plans.jpg'"></a></li>
                <li><a href="nutrition.html"><img src="images/Nutrition.jpg" onmouseover="this.src='images/Nutrition2.jpg'"  onmouseout="this.src='images/Nutrition.jpg'"></a></li>
                <li><a href="personal-sessions.html"><img src="images/Personal-Sessions.jpg" onmouseover="this.src='images/Personal-Sessions2.jpg'"  onmouseout="this.src='images/Personal-Sessions.jpg'"></a></li>
                <li><a href="contact.html"><img src="images/Contact.jpg" onmouseover="this.src='images/Contact2.jpg'"  onmouseout="this.src='images/Contact.jpg'"></a></li>
            </ul>
        </nav>
    </header>

header{
height: 100px;
width: 100%;
margin: 0;
background-color: black;
border-bottom: solid white;
box-shadow: 0 5px 30px #888888;
}

#logo{
background-image: url("images/logo.png");
float: left;
height: 100px;
color: white;
margin: 0;
margin-left: 40px;
padding: 14px 100px 0 115px;
}

Answer 1

阅读this 为了让您的网站更加混乱，请使用％表示宽度，有时也表示高度，而不是像素。

Answer 2

您必须添加视口元标记并使您的网站响应

<meta name="viewport" content="width=device-width, initial-scale=1.0">

重新调整大小时，我的网页会混乱

2 个答案: