html - 调整浏览器大小或放大/缩小时的元素位置

Question

我是 HTML/CSS 的新手，即使在浏览器放大/缩小或浏览器调整大小时，我仍然不知道在其位置上维护元素的一些重要属性。

我设法让一些图像固定在它们的位置上，但在浏览器调整大小时会变形。

这是我到目前为止的工作:

HTML

主页.php

p.copyright {
  font-weight: bold;
  text-align: center;
  font-style: regular;
}

.clear {
    clear: both;
}

#header {
  display: block;
  width: 80%;
  top: 0;
  z-index: 1;
  text-align: center;
  position: fixed;
  overflow: hidden;
  margin-left:10%;
}

#footer {
  width: 80%;
  position:fixed;
  display: block;
  bottom: 0px;
  overflow: hidden;
  margin-left:10%;
}


#logo {
  position: relative;
  text-align: left;
  margin-left: 0;
  float: left;
  height: 95px;
  width:300px;
}

#navcontainer {
  display: block;
  margin-right:0;
  float: right;
  position: relative;
 }
#textbox {
  position: relative;
  float: right;
  height: 95px;
  width:300px;

}

#htimg, #bb-sb {
  position: relative;
}

#navcontainer ul {
  padding:0px
  list-style-type: none;
  text-align: center;
}

#navcontainer ul { 
  list-style-type: none; 
}

#navcontainer ul li { 
  display: inline;
}

#navcontainer ul li a:hover {
  color: red;
  background-color: #;
}

我完全意识到我的代码非常困惑(而且我猜是不一致的)。我还注意到浏览器的行为不一样。我应该采取什么解决方案？

Answer 1

解决方法是学习 Twitter Bootstrap:http://twitter.github.io/bootstrap/

这是一组 CSS 库，可让您的网站“响应式”，这意味着它基本上可以根据浏览器大小调整大小和移动内容。

尝试调整它的大小，您会看到不同之处:http://twitter.github.io/bootstrap/examples/hero.html

如果像您所说的那样，您对 CSS/HTML 的了解很差，那么逐个手工完成会让您发疯。