博客底部的页脚导航菜单两栏改三栏 —— WordPress美化

2017年9月19日23:52:42 73 7,035

近日去一些博客闲逛,发现他们的博客底部的页脚导航菜单是三栏要比知更鸟Begin5.2版本主题自带的两栏要好看,心里痒痒,经过一番折腾终于美化成功,效果见下图:

 

博客底部的页脚导航菜单两栏改三栏 —— WordPress美化

 

代码部署:

用Notepad++打开样式表 (style.css),大概在4982行“页脚小工具”里面找5024行,找到下面的代码

  1. /** 页脚小工具 **/
  2. #footer-widget-box {
  3.    background: #555;
  4.    position: relative;
  5.    padding: 10px 0;
  6.    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
  7. }
  8. .footer-widget {
  9.    width: 1120px;
  10.    margin: 0 auto;
  11. }
  12. .footer-widget h3 {
  13.    font-size: 15px;
  14.    color: #ccc;
  15.    margin: 15px 0 0 0;
  16. }
  17. .footer-widget .widget {
  18.    background: #555;
  19.    float: left;
  20.    width: 33.33333333333%;
  21.    padding: 0 20px;
  22.    border: none;
  23.    box-shadow: none;
  24. }
  25. .footer-widget, .footer-widget a {
  26.    color: #ccc;
  27. }
  28. .footer-widget a:hover {
  29.    color: #fff;
  30. }
  31. .footer-widget .widget ul {
  32.    padding: 8px 0 15px;
  33. }
  34. .footer-widget .menu li {
  35.    float: left;
  36.    width: 50%;
  37. }
  38. #footer-widget-box .add-widgets, #footer-widget-box .add-widgets a {
  39.    color: #fff;
  40.    text-align: center;
  41. }

 

代码修改:

此处为隐藏的内容!
发表评论并刷新,方可查看

就OK。

 

效果图:

 

博客底部的页脚导航菜单两栏改三栏 —— WordPress美化

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的QQ
  • QQ扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:73   其中:访客  71   博主  2

    • xichengwan xichengwan 4 来自天朝的朋友 火狐浏览器 Windows 10 河南省郑州市 联通

      谢谢分享

      • 斯巴达 斯巴达 0 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信

        脚印

        • 小A 小A 0 来自天朝的朋友 火狐浏览器 Windows 7 河南省郑州市 联通

          感谢分享