本文概述
页脚是在页面末尾组织大量站点导航和信息的有效方法。当用户完成当前页面的滚动或正在寻找有关该网站的其他信息时, 将在这里查找用户。
Flexbox用于构造html, 以便页脚始终位于页面底部。将页面的结构保持在三个HTML5标签内非常重要<header>, <main>和<页脚>如下所示。
< body >
< header ></ header >
< main ></ main >
< footer ></ footer >
</ body >例子：
的HTML
<!DOCTYPE html>
< html >
< head >
< title >
The Materialize Footer Example
</ title >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" >
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" >
</ script >
</ head >
< body class = "container" >
<!-- Define the footer -->
< footer class = "page-footer green" >
< div class = "container " >
< div class = "row" >
< div class = "col l6 s12" >
< h5 class = "white-text" >
Footer Content
</ h5 >
< p class = "grey-text text-lighten-4" >
Rows and columns are
used to organize the footer content.
</ p >
</ div >
< div class = "col l4 offset-l2 s12" >
< h5 class = "white-text" >Links</ h5 >
< ul >
< li >
< a class = "grey-text text-lighten-3" href = "#!" >
Link 1
</ a >
</ li >
< li >
< a class = "grey-text text-lighten-3" href = "#!" >
Link 2
</ a >
</ li >
< li >
< a class = "grey-text text-lighten-3" href = "#!" >
Link 3
</ a >
</ li >
</ ul >
</ div >
</ div >
</ div >
< div class = "footer-copyright green darken-3" >
< div class = "container " >
© 2020 Copyright Text
< a class = "grey-text text-lighten-4 right" href = "#!" >
More Links
</ a >
</ div >
</ div >
</ footer >
</ body >
</ html >输出如下：
粘性页脚：一种粘页脚无论页面上的内容有多少, 它始终位于页面底部。但是, 如果有很多内容, 此页脚将被下推, 因此它与固定页脚不同。将以下代码添加到你的CSS文件中。
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}例子：
的HTML
<!DOCTYPE html>
< html >
< head >
< title >
The Materialize Footer Example
</ title >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" >
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" >
</ script >
< style >
/* Add CSS for making the
footer sticky */
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
</ style >
</ head >
< body class = "container" >
<!-- Use the <main> tag for displaying
the contents of the page -->
< main >
< h1 style = "color: green;" >
lsbin
</ h1 >
< p >
A Computer Science portal for geeks.
</ p >
</ main >
<!-- Define the footer -->
< footer class = "page-footer green" >
< div class = "container " >
< div class = "row" >
< div class = "col l6 s12" >
< h5 class = "white-text" >
Footer Content
</ h5 >
< p class = "grey-text text-lighten-4" >
Rows and columns are
used to organize the footer content.
</ p >
</ div >
< div class = "col l4 offset-l2 s12" >
< h5 class = "white-text" >Links</ h5 >
< ul >
< li >
< a class="grey-text
text-lighten-3" href = "#!" >
Link 1
</ a >
</ li >
< li >
< a class="grey-text
text-lighten-3" href = "#!" >
Link 2
</ a >
</ li >
< li >
< a class="grey-text
text-lighten-3" href = "#!" >
Link 3
</ a >
</ li >
</ ul >
</ div >
</ div >
</ div >
< div class = "footer-copyright green darken-3" >
< div class = "container " >
© 2020 Copyright Text
< a class="grey-text
text-lighten-4 right" href = "#!" >
More Links
</ a >
</ div >
</ div >
</ footer >
</ body >
</ html >输出如下：
