单页网站标题和页脚

我正在制作单页网站，目前情况良好，除了现在我试图在每个页面上放置一个标题，然后在底部页面上放置一个页脚。因为我的代码在首页上有一个标题，所以工作正常，所以我想如果我基本上复制并粘贴代码，那么下一页将会有一个标题。但事实并非如此，标题固定在首页，所以首页基本上有两个标题重叠。希望这些片段可以说明它更好单页网站标题和页脚

/* 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; 
 
}

<!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>

来源

2016-11-14 oneman

使每个头绝对相对于其父 - 所以，加position:relative父元素

/* General Styles */ 
 
* { 
 
\t margin: 0; 
 
\t color: white; 
 
} 
 

 
a:link, a:hover, a:active, a:visited { 
 
    \t text-decoration: none; 
 
    \t color: inherit; 
 
} 
 

 
* { 
 
\t font-family: 'Lato', sans-serif; 
 
} 
 

 
html,body { 
 
\t min-height: 100%; 
 
} 
 

 
/* Header Styles */ 
 
header { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t left: 0; top: 0; 
 
\t align-items: center; 
 
\t height: 130px; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
} 
 

 
header ul, footer ul { 
 
\t list-style-type: none; 
 
} 
 

 
header ul li, footer ul li { 
 
\t display: inline; 
 
\t margin: 0 30px; 
 
} 
 

 
/* Wrapper Styles */ 
 
div.wrapper { 
 
\t left: 0; right: 0; 
 
\t display: flex; 
 
\t 
 
} 
 

 
div.left, div.right { 
 
\t margin: 30px 30px; 
 
\t width: 45%; 
 
\t flex: 1; 
 
\t background: rgba(255,255,255,0.6); 
 
\t text-align: center; 
 
\t 
 
} 
 

 

 
.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 { 
 
\t width: 40%; 
 
\t margin: 0 3%; 
 

 
} 
 

 
div.upperLeft, div.lowerLeft, div.upperRight, div.lowerRight { 
 
\t margin: 5% auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
<div class="top"> 
 
\t <header> 
 
\t \t <h1>Example Title</h1> 
 
\t \t <ul> 
 
\t \t \t <li><a href="index.html">Home</a></li> 
 
\t \t \t <li><a href="about.html">About</a></li> 
 
\t \t \t <li><a href="gallery.html">Gallery</a></li> 
 
\t \t </ul> 
 
\t </header> 
 
    
 
\t <div class="wrapper"> 
 
\t \t <div class="left"> 
 
\t \t \t <h1>Left</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Some text with no meaning 
 
\t \t \t </p> 
 
\t 
 
\t \t </div> 
 
\t \t <div class="right"> 
 
\t \t \t <h1>Right</h1> 
 
\t   <p>Some text with no meaning</p> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div class="mid"> 
 
\t <header> 
 
\t \t <h1>Page two title</h1> 
 
\t </header> 
 
\t <div class="left"> 
 
\t \t <div class="upperLeft"> 
 
\t \t \t <h2>Upper Left</h2> 
 
\t \t </div> 
 
\t \t <div class="lowerLeft"> 
 
\t \t \t <h2>Lower Left</h2> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="right"> 
 
\t \t <div class="upperRight"> 
 
\t \t \t <h2>Upper Right</h2> 
 
\t \t </div> 
 
\t \t <div class="lowerRight"> 
 
\t \t \t <h2>Lower Right</h2> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<div class="bot"> 
 
\t <h2>Bottom</h2> 
 
\t 
 
</div> 
 

 

 
</body> 
 
</html>

来源

2016-11-14 06:41:22 sideroxylon

威尔当时间允许时接受答案。 – oneman

单页网站标题和页脚

回答

相关问题