^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

制作简洁大气的通告栏

阿里云限时特惠

看到很多博客中都有陌小雨右侧的这个:

制作简洁大气的通告栏

陌小雨觉得很酷呢。也只需要简单的 css 就可以实现。

首先需要在 style.css 中加入下面代码:

.textwidget a{display: block;padding: 0 15px 15px;border: 1px solid #fff;}
.textwidget a h2{font-size: 20px;font-weight: normal;}
.textwidget a p{color: #999;margin-bottom: 0;}
.textwidget a strong{margin:-1px 0 0 -16px;display: inline-block;padding: 3px 15px 4px;color: #fff;font-size: 14px;font-weight: normal;}

.textwidget a.style05{color: #33BBBA;}
.textwidget a.style05:hover{border-color: #33BBBA;color: #00ABA9;}
.textwidget a.style05 strong{background-color: #33BBBA;}
.textwidget a.style05:hover strong{background-color: #00ABA9;}

然后再 wordpress 后台小工具增加文本小工具,输入下面代码即可:

<a class="style05" href="https://dedewp.com/online-music" target="_blank"><strong>Music</strong><h2>随心而听</h2><p>一副耳机,一首歌,一个人</p></a>

陌小雨额外挑选了几个好看的颜色,供大家选择:

.textwidget a.style01{color: #428BCA;}
.textwidget a.style01:hover{border-color: #428BCA;color: #357EBD;}
.textwidget a.style01 strong{background-color: #428BCA;}
.textwidget a.style01:hover strong{background-color: #357EBD;}

.textwidget a.style02{color: #D9534F;}
.textwidget a.style02:hover{border-color: #D9534F;color: #D33632;}
.textwidget a.style02 strong{background-color: #D9534F;}
.textwidget a.style02:hover strong{background-color: #D33632;}

.textwidget a.style03{color: #5CB85C;}
.textwidget a.style03:hover{border-color: #5CB85C;color: #4CAE4C;}
.textwidget a.style03 strong{background-color: #5CB85C;}
.textwidget a.style03:hover strong{background-color: #4CAE4C;}

.textwidget a.style04{color: #C35BFF;}
.textwidget a.style04:hover{border-color: #C35BFF;color: #B433FF;}
.textwidget a.style04 strong{background-color: #C35BFF;}
.textwidget a.style04:hover strong{background-color: #B433FF;}

怎么使用不用陌小雨教了吧!

让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈
  1. 周波游客
    写的太好了,学习了有时间可以看下有关于 电话诈骗 的预防知识,希望对你有帮助 www.psdqw.com
  2. 活动分享
    博主辛苦了,欢迎来回访
  3. 夏日博客
    不错的功能,回头试一下。
  4. 李阳博客
    哈哈,不错呀
    • 悟空网赚(www.99shuobo.com)
      @李阳博客 其实执行力差这个事情,还真不知道是什么理由让我们执行力差,可能是离成功太远了,时间久了失去信心了,所以执行力就差了,但我们还是要回头看看上一点的坚持!——悟空网赚
    • 陌小雨网站管理员
      @李阳博客 你值得拥有!
  5. Han
    其实你完全可以把这个小工具加到秀主题里面,调用还方便
    • 陌小雨网站管理员
      @Han 分享下教程吧,大神。
  6. Han
    好像和我主题的一样
  7. 百家网络博客
    简洁大气