需用HTML的<footer>标签定义结构，配合CSS设置背景、居中与内边距，通过Flexbox实现粘性底部，添加媒体查询适配移动端，并用PHP变量动态输出版权年份等内容。
如果您正在设计一个PHP静态网页，需要在页面底部添加统一的footer区域，则需通过HTML结构定义内容并配合CSS样式进行布局与美化。以下是创建footer区域的具体操作步骤：
一、编写footer的HTML结构
footer区域应作为独立语义化区块嵌入页面底部，通常位于body内主内容之后，使用zuojiankuohaophpcnfooter>标签或带id/class的div实现结构隔离，确保可维护性与SEO友好性。
1、在HTML文件的</main>或</div>闭合标签后，插入<footer id="site-footer">开始标签。
2、在<footer>内部添加版权信息、备案号、友情链接等静态内容，例如：<p>© 2024 示例网站。保留所有权利。</p>。
立即学习“PHP免费学习笔记（深入）”；
3、以</footer>结束该区块，确保标签成对闭合，避免影响后续DOM渲染。
二、为footer添加基础CSS样式
CSS样式用于控制footer的高度、背景、文字对齐、内边距及响应式表现，使其在不同设备上稳定显示且不与主内容重叠。
1、在<style>标签或外部CSS文件中，定义#site-footer选择器，设置background-color为#333，color为#fff。
2、添加padding: 20px 15px，使文字与边缘保持适当间距。
3、设置text-align: center，使版权文字水平居中显示。
4、追加height: auto和clear: both，防止浮动元素造成高度塌陷。
三、实现页脚固定于视口底部（Sticky Footer）
当页面内容较短时，footer可能悬浮于中部而非贴底显示；采用Flexbox布局可强制footer始终位于可视区域最下方，无需JavaScript干预。
1、将<body>的display属性设为flex，flex-direction设为column，min-height设为100vh。
2、为主内容容器（如<main>或<div class="content">）添加flex: 1，使其占据剩余可用空间。
3、确保#site-footer不设置flex属性，自然成为flex容器的最后一个子项并沉底。
四、添加响应式断点适配移动设备
移动端屏幕宽度有限，需调整footer字体大小、行高及内边距，避免文字溢出或点击区域过小，提升触控体验。
1、在CSS中添加@media screen and (max-width: 768px)媒体查询块。
2、在该查询内将#site-footer的font-size修改为14px，line-height设为1.4。
3、将padding值调整为12px 10px，适应小屏紧凑布局。
五、通过PHP变量动态注入footer内容
尽管是静态网页，仍可利用PHP的简单变量能力实现内容复用，避免多页重复编辑，提升后期维护效率。
1、在footer区块上方定义PHP变量，例如：<?php $copyright = "© " . date("Y") . " 示例网站"; ?>。
2、在<footer>内部用<?php echo $copyright; ?>输出变量值，确保年份自动更新。
3、将备案号、联系方式等也封装为变量，统一在单独的config.php中require_once引入。
