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

王小优
王小优
王小优
231
文章
0
评论
2015年6月11日 评论 7,478 763字阅读2分32秒

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

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

代码部署:

  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. }

代码修改:

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

效果图:

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

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
为WordPress最新文章增加NEW最新提示标志 WordPress美化

为WordPress最新文章增加NEW最新提示标志

纯代码给WordPress文章列表中新发布的文章增加NEW新文章提示,让你的博客更加饱满、人性化,一起跟王小优折腾起来。 看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片,感觉比较人性化,...
匿名

发表评论

匿名网友 填写信息

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