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

  • A+
所属分类:WordPress

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

 

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

 

代码部署:

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

  1. /** 页脚小工具 **/
  2. #footer-widget-box {
  3.     background#555;
  4.     positionrelative;
  5.     padding10px 0;
  6.     box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
  7. }
  8. .footer-widget {
  9.     width1120px;
  10.     margin: 0 auto;
  11. }
  12. .footer-widget h3 {
  13.     font-size15px;
  14.     color#ccc;
  15.     margin15px 0 0 0;
  16. }
  17. .footer-widget .widget {
  18.     background#555;
  19.     floatleft;
  20.     width: 33.33333333333%;
  21.     padding: 0 20px;
  22.     bordernone;
  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.     padding8px 0 15px;
  33. }
  34. .footer-widget .menu li {
  35.     floatleft;
  36.     width: 50%;
  37. }
  38. #footer-widget-box .add-widgets, #footer-widget-box .add-widgets a {
  39.     color#fff;
  40.     text-aligncenter;
  41. }

 

代码修改:

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

就OK。

  • 我的QQ号
  • 使用QQ扫一扫
  • weinxin
  • 我的微信公众号
  • 使用微信扫一扫
  • weinxin

发表评论

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

目前评论:5   其中:访客  5   博主  0

    • 请问 请问 0

      对方不想跟你说话并向你丢了一朵小黄花 :twisted: 对方不想跟你说话并向你丢了一朵小黄花 :twisted:

      • 安也宓宓 安也宓宓 0

        过来看看到底是怎么实现的

        • xmbus xmbus 0

          签到成功!签到时间:下午2:05:10,每日打卡,生活更精彩哦~

          • 请输入您的QQ号 请输入您的QQ号 1

            对方不想跟你说话并向你丢了一朵小黄花 :twisted:

            • ssds ssds 1

              kkkkkkkkkkkkdfgd万事大吉一震天二博士