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

2018年1月19日22:11:25 3 6K 780字阅读2分36秒

关于知更鸟主题“关于本站”小工具中头像的居中布局美化工作,其实比较简单,一段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,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
漂亮的音乐播放器插件Aplayer 资源分享

漂亮的音乐播放器插件Aplayer

Aplayer是一款HTML5的WordPress音乐播放器,界面仿照网易云音乐外链播放器,每个音乐需要填写音乐名称、作者、音乐封面、还有外链地址,添加成功后在音乐列表右侧复制短代码到文章需要显示的位...
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
知更鸟主题文章底部添加个性图标和分类目录 WordPress

知更鸟主题文章底部添加个性图标和分类目录

星光自己也摸索过文章显示当前分类目录的方法,虽然也是成功了,但是不怎么美丽,离我的要求还有一点点的距离,没有达到完美化。在与“简单生活”博客友联过程中看到他的网站显示的效果正是我想要的,随与博主联系获...
匿名

发表评论

匿名网友 填写信息

:?: :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数据中心

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