資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何設定頁面底部頁尾？
HTML 元素 <footer> 充當與其最近的相對元素的頁尾，該元素要麼是分段內容，要麼是分段根元素。<footer> 通常包含有關該部分作者、版權資訊或相關論文連結的資訊。讓我們看一下 <footer> 元素的簡單示例。
<footer> Some copyright info or author info </footer>
將頁尾設定為頁面底部
製作一個始終位於網站頁面底部的頁尾我們可以調整它在頁面底部的位置，以便即使您向下滾動頁面也可以看到頁尾。使用 position: fixed 建立一個始終顯示在頁面底部的頁尾。
語法
以下是將頁尾設定為頁面底部的語法 -
#footer {
position: fixed;
width: 100%;
height: 35px;
}
為了更好地理解如何在頁面底部設定頁尾。讓我們看一下以下示例。
示例
在以下示例中，我們建立一個網頁，其中我們使用 position: fixed 屬性將頁尾新增到網頁底部。
<!DOCTYPE html>
<html>
<style>
#tutorial{
background:#D5F5E3;
}
#tutorial1 {
position: fixed;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
height: 40px;
background: #D7BDE2 ;
}
</style>
<body>
<center>
<div id="tutorial">
<h1>TutorialsPoint</h1>
<div id="tutorial1">The Best E-Way Learning.
</div>
</div>
</center>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含應用樣式的文字，以及充當頁尾的文字，該文字將以應用的樣式停留在網頁底部。
示例
讓我們看一下以下示例，其中我們使用 position: absolute 將頁尾設定為頁面底部。
<!DOCTYPE html>
<html>
<body>
<style>
#container {
min-height:100%;
position:relative;
}
#tutorial {
background:#D5F5E3 ;
padding:10px;
}
#tutorial1 {
padding:10px;
padding-bottom:60px;
}
#tutorial2 {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color:#AED6F1 ;
text-align: center;
}
</style>
<div id="container">
<div id="tutorial">Choose The Course</div>
<div id="tutorial1">
<ol>
<li>HTML</li>
<li>JAVA</li>
<li>PYTHON</li>
</ol>
</div>
<div id="tutorial2">If any doubt contact us at E-mail:tp@welcome</div>
</div>
</body>
</html>
當指令碼執行時，將出現一個輸出視窗，在網頁上顯示文字和有序列表，以及在網頁底部顯示並應用了 CSS 樣式的頁尾文字。
在 HTML 中使用 Flexbox
Flexbox 是一種一維佈局技術，用於在行或列中排列物件。專案可以靈活地（擴充套件）佔據更多空間或收縮以適應更緊湊的空間。
示例
考慮以下示例，其中我們使用 flexbox 將頁尾設定為網頁底部。
<!DOCTYPE html>
<html>
<body>
<style>
#tutorial{
background:red;
}
#tutorial1{
min-height:100px;
display:flex;
flex-direction:column;
justify-content:space-between;
}
</style>
<div id="tutorial1">
<div>
<header>
JamesCameron
</header>
<article>
Directed Avatar2
</article>
</div>
<footer id="tutorial">
Avatar2 2022©
</footer>
</div>
</body>
</html>
執行上述指令碼後，將彈出輸出視窗，顯示文字和應用了 CSS 並顯示在網頁底部的頁尾文字。
更新於：2023 年 4 月 20 日
1K+ 次檢視
廣告