网页布局问题

我在网页布局上工作。我创建了这个。https://codepen.io/iamgonge/pen/paoxxb

我不明白为什么.container .left侧面和。右侧元素从浏览器的顶部而不是标头的顶部开始。布局不应该是标题 -> pection(英雄( ->(一个(吗？我认为这三个部门中的任何一个都将在标题下方，但事实并非如此。我在这里不了解什么艾米？

body {
  font-family: Verdana, Geneva, sans-serif;
  margin: 0;
  padding: 0;
}
.container {
  background: #333338;
  display: inline-block;
  width: 60%;
  height: 800px;
}
header {
  position: fixed;
  background: #10105f;
  width: 100%;
  height: 150px;
}
.main-links a {
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
}
.main-links a:hover {
  color: #00843d;
}
.main-links a:active {
  color: red;
}
.left-side {
  display: inline-block;
  width: 20%;
  background: #4C4C59;
  height: 800px;
  float: left;
}
nav {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  text-align: center;
}
nav ul {
  margin: auto;
  padding: 0;
  display: inline-block;
  list-style: none;
  color: #fff;
  // border: 1px solid #00843D;
  width: 60%;
  ;
}
nav li {
  display: inline-block;
  margin: 5px -3px;
  padding: 5px 10px;
  // border: 1px solid#fff;
}
nav li:hover {
  background: rgba(255, 255, 255, 0.25);
}
nav li:active {
  border-bottom: 2px solid red;
  color: red;
}
.nav-left {
  float: left;
  height: 50px;
  width: 20%;
  padding-bottom: 96px;
  // border: 1px solid #00843D;
}
.nav-right {
  float: right;
  height: 50px;
  width: 20%;
  padding-bottom: 96px;
  //border: 1px solid #00843D;
}
.nav-center {
  position: relative;
  padding-bottom: 21px;
  margin: 0 auto;
  height: 75px;
  width: 300px;
  // border: 1px solid #00843D;
}
.nav-right p a {
  font-size: 16px;
  text-decoration: none;
  color: #fff;
}
.nav-right p a:hover {
  color: #00843d;
}
.nav-right p {
  margin: 20px;
  padding: 0;
  color: #fff;
}
.one {
  display: block;
  width: 100%;
  height: 800px;
  background: #080853;
}
.right-side {
  display: inline-block;
  width: 20%;
  background: #4C4C59;
  height: 800px;
  float: right;
}
.rss-title,
.rss-date {
  margin: 0px!important;
}
.rss-feed {
  margin: 10px 5px 20px 0px;
}
.rss-date {
  padding: 0;
  font-size: 12px;
  font-style: italic;
}
.hero,
.one {
  position: relative;
  height: 100%;
}
.success {
  display: block;
  text-align: center;
  margin-top: 20%;
  font-size: 69px;
  color: #00843d;
  //  margin-left: auto;
  // margin-right: auto;
}
.success:hover {
  font-size: 71px;
}
#timestamp {
  margin: 10px 5px 20px 0px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
#timestamp,
.rss-feed {
  background: #080853;
  padding: 10px;
  height: 110px;
}
@media (min-width:1530px) {}

<body>
  <header>
    <div class="nav-left">
      <div id="timestamp"></div>
    </div>
    <div class="nav-right"></div>
    <div class="nav-center"></div>
    <nav>
      <ul class="main-nav">
        <li class="main-links"><a href="#">home</a></li>
        <li class="main-links"><a href="#">about</a></li>
        <li class="main-links"><a href="#">projects</a></li>
        <li class="main-links"><a href="#">portal</a></li>
        <li class="main-links"><a href="#">links</a></li>
      </ul>
    </nav>
  </header>
  <section="hero">
    <div class="left-side"></div>
    <div class="right-side"></div>
    <div class="container">
      <div class="success"></div>
    </div>
    <!--***Container***-->
  </section>
  <section class="one"></section>
</body>

原因是您已将position: fixed;应用于<header>标签。当您执行此操作时，您必须考虑标头的高度，然后按下其他元素以还原布局。

相关内容

最新更新

热门标签：