知更鸟主题“关于本站”小工具头像的居中布局美化

  • A+
所属分类:WordPress

关于知更鸟主题“关于本站”小工具中头像的居中布局美化工作,其实比较简单,一段CSS代码就可以搞定。代码来源【朱曙明的博客】,感谢作者提供!

6月4日,重新修改代码,代码来源【99八十一】博客,感谢“九哥” :oops:

美化方法,将下面样式代码添加主题选项→定制风格,“自定义样式”中。

  1. /** 修改关于本站css**/
  2. .about-img {
  3.     text-align: center;
  4.     background: url(https://wx2.sinaimg.cn/large/0066LGKLly1fjvq3dc19uj309q02sa9y.jpg) center center no-repeat;  
  5.     background-size: cover;
  6.     height: 120px;
  7.     border-radius:8px;
  8.     margin: -10px -15px 30px;
  9. }
  10. .about-img img {
  11.     float: none;
  12.     border: 1px solid #ddd;
  13.     border-radius: 50%;
  14.     padding: 0px;
  15.     height: auto;
  16.     text-align: center;
  17.     width: 120px;
  18.     margin: 30px 0 0 0;
  19. }
  20. .about-name {
  21.     text-align: center;
  22.     font-size: 16px;
  23.     position: relative;
  24.     display: block;
  25. }
  26. .about-name {
  27.     font-size: 16px;
  28.     font-weight: 700;
  29. }

 修改后效果

知更鸟主题“关于本站”小工具头像的居中布局美化

修改前效果

知更鸟主题“关于本站”小工具头像的居中布局美化

说明:最新版知更鸟主题已经支持头像居中显示,本博客不再使用此CSS。

weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!

发表评论

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

目前评论:3   其中:访客  2   博主  1

    • 梁兴健 梁兴健 1 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 阿里云BGP数据中心

      很漂亮 :mrgreen:

      • 明月登楼学习笔记Blog 明月登楼学习笔记Blog 0 来自天朝的朋友 火狐浏览器 Windows 10 浙江省杭州市 阿里云BGP数据中心

        不错,博主的文章都很用心~!