單頁網站標題和頁腳

我正在製作單頁網站，目前情況良好，除了現在我試圖在每個頁面上放置一個標題，然後在底部頁面上放置一個頁腳。因爲我的代碼在首頁上有一個標題，所以工作正常，所以我想如果我基本上覆制並粘貼代碼，那麼下一頁將會有一個標題。但事實並非如此，標題固定在首頁，所以首頁基本上有兩個標題重疊。希望這些片段可以說明它更好單頁網站標題和頁腳

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

單頁網站標題和頁腳

回答

相關問題