Question

我正在创建一个单页网站，此刻它很好，除了现在我试图在每个页面上添加一个标题，然后在底页上添加一个页脚。我的代码在首页上有一个标题，所以工作正常，所以我想如果我基本上复制并粘贴代码，那么下一页将有一个标题。但事实并非如此，标题固定在首页，所以基本上首页有两个标题相互重叠。希望该片段可以更好地说明它

＆＃13;

/* General Styles */

* {
  margin: 0;
  color: white;
}
a:link,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  color: inherit;
}
* {
  font-family: 'Lato', sans-serif;
}
html,
body {
  min-height: 100%;
}
/* Header Styles */

header {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  align-items: center;
  height: 130px;
  display: flex;
  flex-direction: column;
}
header ul,
footer ul {
  list-style-type: none;
}
header ul li,
footer ul li {
  display: inline;
  margin: 0 30px;
}
/* Wrapper Styles */

div.wrapper {
  left: 0;
  right: 0;
  display: flex;
}
div.left,
div.right {
  margin: 30px 30px;
  width: 45%;
  flex: 1;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.top,
.mid,
.bot {
  height: 100vh;
  min-height: 800px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
.top {
  background-color: orange;
}
.mid {
  background-color: blue;
}
.bot {
  background-color: green;
}
/* Styling items inside each div */

div.left,
div.right {
  width: 40%;
  margin: 0 3%;
}
div.upperLeft,
div.lowerLeft,
div.upperRight,
div.lowerRight {
  margin: 5% auto;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>

  <div class="top">
    <header>
      <h1>Example Title</h1>
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="gallery.html">Gallery</a>
        </li>
      </ul>
    </header>

    <div class="wrapper">
      <div class="left">
        <h1>Left</h1>
        <p>
          Some text with no meaning
        </p>

      </div>
      <div class="right">
        <h1>Right</h1>
        <p>Some text with no meaning</p>
      </div>
    </div>
  </div>

  <div class="mid">
    <header>
      <h1>Page two title</h1>
    </header>
    <div class="left">
      <div class="upperLeft">
        <h2>Upper Left</h2>
      </div>
      <div class="lowerLeft">
        <h2>Lower Left</h2>
      </div>
    </div>
    <div class="right">
      <div class="upperRight">
        <h2>Upper Right</h2>
      </div>
      <div class="lowerRight">
        <h2>Lower Right</h2>
      </div>
    </div>
  </div>

  <div class="bot">
    <h2>Bottom</h2>

  </div>


</body>

</html>

＆＃13;

Answer 1

使每个标题相对于其父标题是绝对的 - 因此，将position:relative添加到父元素

/* General Styles */
* {
	margin: 0;
	color: white;
}

a:link, a:hover, a:active, a:visited {
 	text-decoration: none;
 	color: inherit;
}

* {
	font-family: 'Lato', sans-serif;
}

html,body {
	min-height: 100%;
}

/* Header Styles */
header {
	position: absolute;
	width: 100%;
	left: 0; top: 0;
	align-items: center;
	height: 130px;
	display: flex;
	flex-direction: column;
}

header ul, footer ul {
	list-style-type: none;
}

header ul li, footer ul li {
	display: inline;
	margin: 0 30px;
}

/* Wrapper Styles */
div.wrapper {
	left: 0; right: 0;
	display: flex;
	
}

div.left, div.right {
	margin: 30px 30px;
	width: 45%;
	flex: 1;
	background: rgba(255,255,255,0.6);
	text-align: center;
	
}


.top, .mid, .bot {
  height: 100vh;
  min-height: 800px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  position:relative;
  
}

.top {
  background-color: orange;
}
.mid {
  background-color: blue;
}
.bot {
  background-color: green;
}


/* Styling items inside each div */
div.left, div.right {
	width: 40%;
	margin: 0 3%;

}

div.upperLeft, div.lowerLeft, div.upperRight, div.lowerRight {
	margin: 5% auto;
}

<!DOCTYPE html>
<html>

<body>

<div class="top">
	<header>
		<h1>Example Title</h1>
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="gallery.html">Gallery</a></li>
		</ul>
	</header> 
 
	<div class="wrapper">
		<div class="left">
			<h1>Left</h1>
			<p>
				Some text with no meaning
			</p>
	
		</div>
		<div class="right">
			<h1>Right</h1>
	        <p>Some text with no meaning</p>
		</div>
	</div>
</div>

<div class="mid">
	<header>
		<h1>Page two title</h1>
	</header>
	<div class="left">
		<div class="upperLeft">
			<h2>Upper Left</h2>
		</div>
		<div class="lowerLeft">
			<h2>Lower Left</h2>
		</div>
	</div>
	<div class="right">
		<div class="upperRight">
			<h2>Upper Right</h2>
		</div>
		<div class="lowerRight">
			<h2>Lower Right</h2>
		</div>
	</div>
</div>

<div class="bot">
	<h2>Bottom</h2>
	
</div>


</body>
</html>

单页网站标题和页脚

1 个答案: