网站底部菜单按钮美化_HTML代码-WordPress建站笔记
先上效果(代码来源于好软猫):
第一步:找个合适的地方插入CSS代码
/*网站底部按钮美化]*/
:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
}
.badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge .bg-blue {
background-color: #007ec6;
}
.github-badge .bg-brightgreen {
background-color: #4dc820;
}
.github-badge .bg-blueviolet {
background-color: #8833d7;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.github-badge .bg-orange {
background-color: orange;
}
第二步:插入HTML代码(网站后台
-外观
-自定义
-底部小工具
-插入
)
<!--网站底部按钮美化HTML-->
<div class="github-badge"><span class="badge-subject bg-blue">
<a style="color: #fff;" href="https://www.linux66.cn/" target="_blank" rel="noopener">友链申请</a>
</span>
<span class="badge-subject bg-brightgreen">
<a style="color: #fff;" href="https://www.linux66.cn/" target="_blank" rel="noopener">网站地图</a>
</span>
<span class="badge-subject bg-green">
<a style="color: #fff;" href="https://www.linux66.cn/" target="_blank" rel="noopener">本站主题</a>
</span>
<span class="badge-subject bg-orange">
<a style="color: #fff;" href="https://www.linux66.cn/" target="_blank" rel="noopener">广告合作</a>
</span>
<span class="badge-value bg-blueviolet">
<a style="color: #fff;" href="https://www.linux66.cn/" target="_blank" rel="noopener">免责申明</a>
</span>
</div>
阅读剩余
网站名称: DevOps运维技术栈
本站网址:www.Linux66.cn
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!邮件:pengch1611@gmail.com
网站部分内容来源于网络,版权争议与本站无关。请在下载后的24小时内从您的设备中彻底删除上述内容。
如无特别声明本文即为原创文章仅代表个人观点,版权归《DevOps运维技术栈》所有,欢迎转载,转载请保留原文链接。
本站网址:www.Linux66.cn
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!邮件:pengch1611@gmail.com
网站部分内容来源于网络,版权争议与本站无关。请在下载后的24小时内从您的设备中彻底删除上述内容。
如无特别声明本文即为原创文章仅代表个人观点,版权归《DevOps运维技术栈》所有,欢迎转载,转载请保留原文链接。
THE END