^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

制作简洁大气的通告栏

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

制作简洁大气的通告栏

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

陌小雨觉得很酷呢。也只需要简单的 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;}

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

赠人玫瑰,手有余香。