Question

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

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

这是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>

这是css：

    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%;
    }

Answer 1

要阻止图片流入其他元素，请使用clear:both上的#maincontent img

编辑：这里可以找到一篇很好的文章，其中提出了其他方法。 http://quirksmode.org/css/clearing.html

Edit2：这只适用于浮动元素，我刚刚注意到你没有使用浮动元素。请参阅下面的评论

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

1 个答案: