当前位置：首页> 随笔> 前端开发
全部 35 前端开发 20 前端特效 4 WIN10 1 建站教程 2 前端设计 3 面试技巧 0 Pboot教程 5

浅显的底部样式也蕴含着大学问

：2019-05-13   ：舒彬琪   ：141

浅显的底部样式也蕴含着大学问

1.footer中的p标签建议高度设置为20-30px
2.p标签高度auto，行高固定，避免响应式布局时文字超出一行时无法换行
3.给公网安图片添加vertical-align: middle; height: auto;样式，可以使图片和文字垂直居中对齐
4.p标签设置高度后，文字上下会离得比较开，所以建议footer大盒子设置一个padding值来平衡间距
5.工信部备案号和公网安备案号建议添加链接
公网安图标：http://www.beian.gov.cn/img/ghs.png
公网安备案号：http://www.beian.gov.cn/portal/index.do
工信部备案：http://www.beian.miit.gov.cn


  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4.     <meta charset="UTF-8">

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7.     <title>底部样式</title>

  8.     <style>

  9.     .container {

  10.         width: 1200px;

  11.         margin: 0 auto;

  12.     }

  13.     .ptb10 {

  14.         padding: 10px 0;

  15.     }

  16.     .footer {

  17.         margin-top: 20px;

  18.         width: 100%;

  19.         height: auto;

  20.         background: #f1f1f1;

  21.     }

  22.     .footer p {

  23.         line-height: 25px;

  24.         font-size: 14px;

  25.         color: #444;

  26.         text-align: center;

  27.         margin: 0;

  28.     }

  29.     .footer p a {

  30.         color: #444;

  31.         text-decoration: none;

  32.     }

  33.     .footer p img {

  34.         height: auto;

  35.         vertical-align: middle;

  36.     }

  37.     @media (max-width: 768px) {

  38.         .container {

  39.             width: 100%;

  40.         }

  41.     }

  42.     </style>

  43. </head>

  44. <body>

  45.     <div>

  46.         <div class="container ptb10">

  47.             <p>Copyright © 2019 Company All Rights Reserved. 备案号：<a href="http://www.beian.miit.gov.cn" target="_blank">京ICP备123456789号</a></p>

  48.             <p><a href="http://www.beian.gov.cn/portal/index.do"><img src="http://www.beian.gov.cn/img/ghs.png" alt="Image">  公网安备123456789号</a></p>

  49.         </div>

  50.     </div>

  51. </body>

  52. </html>


上一篇：响应式开发中版心的作用详解

下一篇：基础页面简单导航条样式以及响应式效果

Copyright © 2018-现在 PbootMoBan All Rights Reserved. 免责声明：网站中图片均来源于网络，如有版权问题请联系删除！