CSS中的页脚介绍
CSS中的页脚用于用户希望将元素固定在底部位置，以便将顶部元素的逻辑与底部元素的逻辑分开。有两种类型的页脚：固定页脚和可移动页脚。固定页脚意味着页脚固定在底部，即使页面向下滚动到底部或向上滚动到顶部。这意味着页脚总是固定在底部。现在，几乎所有的网站都有固定页脚功能，因为当我们向下滚动到整个页面时，很难从页脚中选择不同的选项。如果我们想访问页脚元素，那么我们必须再次进入底部并选择选项。这将扼杀用户的时间；因此，开发人员在bootstrap中提出了粘性页脚的概念。所以，大多数人都喜欢固定的页脚而不是可移动的页脚，因为可移动的页脚总是随着页面滚动的。
优势。
- 使用固定的页脚可以很容易地访问底部元素。
- 页脚将逻辑与页眉元素分开。
为什么是CSS而不是HTML？
在HTML中，开发者必须为每一个类、ID、链接、按钮等单独编写样式。而在CSS中，即使我们有1000个html页面，我们也可以在一个CSS文件中写出共同的逻辑，并且可以用标签包含在HTML文件中。
注意： CSS文件的扩展名是.css。
页脚在CSS中是如何工作的？
CSS中的页脚只不过是底部的一个类似于导航条的结构；我们可以让导航条在底部固定（粘性页脚）或移动，然后使用下面的语法。
固定式页脚的语法。
<style> .footer { position: fixed; } </style> <div class="footer"> <p>Footer</p> </div>
可移动页脚的语法。
<style> footer { display: block; } </style> <div class="footer"> <p>Footer</p> </div>
CSS中的页脚示例
以下是不同的例子。
例子 #1 - 可移动的页脚
代码。
<!DOCTYPE html> <html> <head> <style type="text/css"> h2 { text-align: center; color: green; } .footer { position: block; width: 100%; left: 0; bottom: 0; color: maroon; text-align: center; background-color: green; } .p1 { border-style: solid; border-color: red; border-width: 1px; font-size: 20px; color: blue; } .p2 { border-style: solid; border-color: blue; border-width: 1px; font-size: 20px; color: fuchsia; } .p3 { border-style: solid; border-color: brown; border-width: 1px; font-size: 20px; color: red; } .p4 { border-style: solid; border-color: red; border-width: 1px; font-size: 20px; color: lime; } div { width: 600px; } </style> </head> <body> <div class="container"> <h2>Movable Footer Demo</h2> <p class="p1">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom. </p> <br> <p class="p2">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom.</p> <br> <p class="p3">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom.</p> <br> <p class="p4">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom.</p> </div> <div class="footer"> <p>I am block(movable) footer portion</p> </div> </body> </html>
输出。
解释。在 上面的例子中，你可以看到页脚随着上下滚动而移动。
例子 #2 - 固定页脚
代码:
<!DOCTYPE html> <html> <head> <style type="text/css"> h2 { text-align: center; color: brown; } .footer { position: fixed; width: 100%; left: 0; bottom: 0; color: maroon; text-align: center; background-color: green; } .p2 { border-style: solid; border-color: red; border-width: 1px; font-size: 20px; color: blue; } .p4 { border-style: solid; border-color: blue; border-width: 1px; font-size: 20px; color: fuchsia; } .p3 { border-style: solid; border-color: brown; border-width: 1px; font-size: 20px; color: red; } .p1 { border-style: solid; border-color: red; border-width: 1px; font-size: 20px; color: lime; } div { width: 600px; } </style> </head> <body> <div class="container"> <h2>Fixed Footer Demo</h2> <p class="p1">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom. </p> <br> <p class="p2">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom.</p> <br> <p class="p3">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom.</p> <br> <p class="p4">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom.</p> </div> <div class="footer"> <p>I am block(movable) footer portion</p> </div> </body> </html>
输出。
解释。在 上面的例子中，你可以看到即使我们向上或向下滚动，页脚也是固定的。
例子 #3 - 带有按钮的固定页脚
代码:
<!DOCTYPE html> <html> <head> <style type="text/css"> h2 { text-align: center; color: brown; } .footer { position: fixed; width: 100%; left: 0; bottom: 0; color: maroon; text-align: center; background-color: blue; } button { color: white; background: green; } .p1 { border-style: solid; border-color: red; border-width: 1px; font-size: 20px; color: maroon; } div { width: 600px; } </style> </head> <body> <div class="container"> <h2>Fixed Footer Demo</h2> <p class="p1">Footer in CSS used when user wants to fix the elements at the bottom position to separate the top elements logic with bottom elements logic. There are 2 types of footer 1.fixed footer and 2. Movable footer. Fixed footer means footer fixed at the bottom even page scroll down to the bottom or scroll up to the top. It means footer always fixed on the bottom. </p> </div> <div class="footer"> <button class="b1">Login</button> <button class="b2">Register</button> <button class="b3">Buy</button> <button class="b4">Sell</button> </div> </body> </html>
输出。
结论
CSS中的页脚可以有两种方式，如固定页脚和可移动页脚。首先，页脚是用来将页眉逻辑与页脚逻辑分开，并通过使用固定页脚来更快地访问底部元素。
推荐文章
这是一本关于CSS中的页脚的指南。我们在这里讨论了CSS中页脚的例子，以及它是如何工作的，还有固定页脚的语法。你也可以看看下面的文章，以了解更多信息。
The postFooter in CSSappeared first onEDUCBA.
