Html 如何在调整导航栏大小时缩放导航栏_Html_Css

Html 如何在调整导航栏大小时缩放导航栏

html css

Html 如何在调整导航栏大小时缩放导航栏,html,css,Html,Css,我有一个简单的网站到目前为止，但有两个问题。我已经用百分比做了所有的事情，因为这个网站可能会出现在高清电视上，我希望它们能够很好地扩展。缩放可以处理图像，但我也喜欢缩放导航栏背景和文本，这样它就不会看起来很小第二个问题是，当站点被压扁时，底部图像覆盖导航栏，不会在导航栏元素下流动。我很喜欢这个功能，因为它可以很好地扩展到智能手机上以下是html： <!DOCTYPE html> <html lang="en"> <head> <m

我有一个简单的网站到目前为止，但有两个问题。我已经用百分比做了所有的事情，因为这个网站可能会出现在高清电视上，我希望它们能够很好地扩展。缩放可以处理图像，但我也喜欢缩放导航栏背景和文本，这样它就不会看起来很小

第二个问题是，当站点被压扁时，底部图像覆盖导航栏，不会在导航栏元素下流动。我很喜欢这个功能，因为它可以很好地扩展到智能手机上

以下是html：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="headish.css">
    <title>New Site</title>
  </head>
  <body>
    <div id="container">
        <div id="tophead">
            <img src="images/logo.png" alt="logo" />    
            <ul>
                <li><a href="#" title="About Us">About Us</a></li>
                <li><a href="#" title="Biographies">Biographies</a></li>
                <li><a href="#" title="Services">Services</a></li>
                <li><a href="#" title="Careers">Careers</a></li>
                <li><a href="#" title="Contact">Contact</a></li>
            </ul>
        </div>
        <div id="maincont">
          <img src="images/second.png" alt="image">
        </div>
    </div>
    </div>
  </body>
</html>

要阻止图像流入其他元素，请在

#main content img上使用clear:both

编辑：在这里可以找到一篇关于它的好文章，其中建议了其他方法
Edit2：这只适用于浮动元素，我刚刚注意到你没有使用浮动。请看下面我的评论
我没有从你的用户名中得到答案，但如果你是指艾伦·克拉布特里的帖子，它没有。我非常感谢任何帮助，但当我重新调整窗口大小（在chrome和firefox中）时，#maincontent img仍然与导航栏菜单重叠。我的网友有什么想法吗？谢谢你的帮助，但效果不太好。屏幕最小化时，图像与导航栏重叠。还有其他想法吗？您只需要对#容器
进行样式化-也不要包括html、正文
。您也不需要清除：我在前面的回答中提到的两个。
    html, body, #container {
    height: 100%;
    width: 100%;
    margin: 0;
    position: relative;

}

#tophead {
    height: 20%;
    width: 80%;
    margin: auto;
    text-align: center;

}

#tophead img {
    height: 100%;
    width: auto%;

}
#tophead ul {
    list-style: none;
    display: inline-block;
    font-size: 0;


}
#tophead li {
    display: inline-block;

    }
#tophead a {
  background: #2dbaf0;
  color: #fff;
  display: block;
  font-size: 16px;
  font-family: "arial";
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-transform: uppercase;
  text-decoration: none;

}
#tophead a:hover {
  background: #f8a52b;
  color: #fff;
  -webkit-transition-property: background;
  -webkit-transition-duration: .2s;
  -webkit-transition-timing-function: linear;
}
#tophead li:first-child a {
  border-left: none;
  border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
  border-right: none;
  border-radius: 0 5px 5px 0;
}
#maincont {
    padding-left: 10%;

    }
#maincont img{
    border-radius: 7%;
    width: 30%;
    }