到目前为止,我有一个简单的网站,但有两个问题。我已经用百分比做了所有事情,因为该网站可能会在高清电视上播放,我希望它们可以很好地扩展。缩放与图像一起工作,但id也喜欢缩放导航栏的背景和文字,以免它看起来很小。如何在调整大小时调整导航栏
第二个问题是当网站被挤压时底部图像覆盖导航栏并且不会在导航栏元素下面流动。 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%;
}
我没有得到你的用户名的答案,但如果你指的是艾伦克拉布特里的帖子,它没有。我非常感谢任何帮助,但是当我重新调整窗口大小(在Chrome和Firefox中)时,#maincontent img仍与导航栏菜单重叠。任何想法我的互联网朋友? – user2093601 2013-02-24 04:19:45