整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html 中页脚的样式footer 底部对齐

加style

<style type="text/css">
 html {
 position: relative;
 min-height: 100%;
 }
 body {
 margin-bottom: 60px;
 }
 .footer {
 position: absolute;
 bottom: 0; width: 100%;
 /* Set the fixed height of the footer here */
 height: 60px;
 background-color: #f5f5f5;
 }
</style>
.......
.....
</div>
<footer class="footer">
 <div style="text-align:center;">
 Copyright 2019 by Ben
 </div>
</footer>
</body>



image.png

效果图,不管窗口放大还是调小,footer 都会 显示在最底也,也不会覆盖content 里面的内容。

局和脚部是 HTML 页面中两个重要的区域。布局区域用于组织页面上的内容,而脚部区域通常包含与页面内容无关但重要的信息。


布局区域

布局区域用于将页面上的内容分组和排列。最常用的布局区域是:

  • 主内容区:包含页面上的主要内容。
  • 侧栏:包含与页面内容相关的额外信息,例如导航菜单或侧边栏。
  • 脚部:包含与页面内容无关但重要的信息,例如版权信息或联系方法。

脚部区域

脚部区域通常包含以下内容:

  • 版权信息:表明页面的所有权归于特定个人或组织。
  • 联系方式:提供与发送电子邮件或访问其他网站的链接。
  • 社交媒体链接:提供与页面或组织的社交媒体帐号。

布局和脚部的组合

布局区域可以包含脚部区域。例如,以下代码展示了如何将脚部区域包含在布局区域内:

html
<!DOCTYPE html>
<html>
<head>
  <!-- ... -->
</head>
<body>
  <div id="layout">
    <!-- ... -->
    <footer>
      <p>© 20 vicisslet 20 vicisslet</p>
      <p>联系:...</p>
      <p>社交媒体:...</p>
    </footer>
  </div>
</body>
</html>

最佳实践

  • 使用合适的布局区域来组织页面内容。
  • 在脚部区域中提供与页面内容无关但重要的信息。
  • 保持脚部区域简短且易于浏览。

结论

布局和脚部是 HTML 页面中两个重要的区域。通过了解布局和脚部区域的用法,您可以创建拥有清晰结构和良好阅读体验的页面。

的网站由华为云迁移到阿里云了。为啥迁移呢?因为华为云续费实在太贵了,阿里云又在大促销,2核8G的ECS 云主机3年1000多块钱,所以在阿里云上新注册了一个用户,买了三年的ECS云主机。

以前找专业美工设计过一个网站的首页,过一段时间后,思路有变化,就像改一版,但自己又不是专业美工,找人修改又要花钱,所以,就下载了一个Vuepress,用Vuepress搭建自己的官方网站。

国内的云主机,做域名指向的时候,都需要进行备案,备案信息,一般会放在Vuepress的footer标签下,并加上一个指向信息化部备案查询的网站:http://www.beian.miit.gov.cn/,并加上自己的备案号。非常遗憾的是,Vuepress的footer标签是不支持任何 <a herf > 之类的链接的,所以只能显示备案号,并不能指向信息化部备案查询的网站。如下图所示:



用百度查询,根本查不到任何有效信息,用Google查了一下,居然真的就查到了有人报了Vuepress的Bug,试图解决这个问题,如下图所示:


遗憾的是,Vuepress 作者并不是认为这是一个Bug,也不打算修复这个问题,回复如下:



令人非常失望,那么怎么办呢?国内域名空间提供商要求是在备案号下必须指向信息化部备案查询的网站的,否则备案就不会被通过。邢老师我想了好久,终于找到了一个不是办法的办法,即直接修改Vuepress发布完成的静态HTML页面好了,原来的Vuepress 的footer标签如下:

footer: Copyright © 2019 XXX信息技术有限公司 | Email:ddd@eshop |  京ICP备16059853号

生成的HTML代码如下:

<div class="footer">Copyright © 2019 XXX信息技术有限公司 Email:xbt@eshopinone.com  京ICP备16059853号</div>

即无法指向 http://www.beian.miit.gov.cn

我把footer生成的静态HTML页面直接修改为:

<div class="footer">Copyright © 2019 XXX信息技术有限公司 Email:xbt@eshopinone.com  <a href='http://www.beian.miit.gov.cn' target="_blank">京ICP备16059853号</a></div>

就可以在首页上看到备案号和指向备案信息的链接了。机智如我,但是,每次用Vuepress打包发布,都需要手动修改这个HTML页面了。