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

2017年9月19日23:52:42 104 44,861

近日去一些博客闲逛,发现他们的博客底部的页脚导航菜单是三栏要比知更鸟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美化

 

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

发表评论

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

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

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

      谢谢分享

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

        脚印

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

          感谢分享

          • 12120 12120 0 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

            谢谢分享,我也觉得好看

            • 锟斤拷锟斤拷 锟斤拷锟斤拷 1 来自天朝的朋友 QQ浏览器 Windows 10 湖北省武汉市 联通

              66666可以可以

              • 下一个雨季 下一个雨季 0 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通

                爱你么么哒

                • 大烟斗 大烟斗 0 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省西安市 电信

                  学习学习

                  • 1111 1111 0 来自天朝的朋友 谷歌浏览器 Mac OS X 10_12_6 陕西省西安市 电信

                    棒棒

                    • 锟斤拷锟斤拷锟斤拷 锟斤拷锟斤拷锟斤拷 1 来自天朝的朋友 QQ浏览器 Windows 10 天津市 腾讯公司联通数据中心节点

                      666666可以以好看

                      • 锟斤拷-Mango 锟斤拷-Mango 1 来自天朝的朋友 QQ浏览器  Android 10 HRY-AL00a Build/HONORHRY-AL00a 江苏省苏州市 电信

                        看一下

                        • tsy tsy 1 来自天朝的朋友 QQ浏览器 Windows 10 江苏省苏州市 电信

                          谢谢

                          • 呜呜 呜呜 2 来自天朝的朋友 谷歌浏览器 Windows 10 天津市 腾讯公司联通数据中心节点

                            代码在哪里啊

                            • 454不回家 454不回家 0 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信

                              楼主好,谢谢

                              • 1156646905 1156646905 4 来自天朝的朋友 搜狗浏览器 Windows 7 江苏省苏州市 电信

                                楼主好,谢谢

                                • a262831980 a262831980 4 来自天朝的朋友 谷歌浏览器 Windows 7 广东省湛江市 电信

                                  确实3栏好看多 了 :grin: :smile:

                                  • 思锟斤拷牛 思锟斤拷牛 1 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省阜阳市 电信

                                    感谢分享

                                    • 一个 一个 0 来自天朝的朋友 谷歌浏览器 Windows 7 河北省沧州市 联通

                                      支持

                                      • 游客 游客 1 来自天朝的朋友 谷歌浏览器 Windows 10 山东省菏泽市 移动

                                        来看看

                                        • 夸克 夸克 0 来自天朝的朋友 火狐浏览器 Windows 10 北京市 移动

                                          看看~

                                          • T T 1 来自天朝的朋友 谷歌浏览器 Windows 10 广东省珠海市 电信

                                            感谢分享