css教程

CTRL+D添加收藏效果CSS代码

我的站长站 2024-08-19 人阅读

给网站增加一个CTRL+D添加收藏效果,效果如下:

CTRL+D添加收藏效果CSS代码

直接复制粘贴到自己的项目就可以使用,无需修改。

HTML代码:

<div id="go-fav"> 赶紧收藏我们,查看更多心仪的内容?按<span>Ctrl</span>+<span>D</span>收藏我们 或<a class="find-more" href="https://www.wdzzz.com/" rel="nofollow noopener" target="_blank"> 发现更多</a></div>

CSS代码

<style type="text/css">
#go-fav {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background: #3d3d3d;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1)
}
#go-fav span {
padding: 5px 10px;
background: rgba(255, 197, 0, 1);
border-radius: 5px;
color: #202020;
margin: 0 5px
}
#go-fav a {
color: #aeaeae
}
#go-fav a:hover {
color: var(--focus-color)
}
</style>


相关推荐
  • CSS代码
  • 左侧固定宽度,右侧随浏览器自适应宽度的CSS代码

    左侧固定宽度,右侧随浏览器自适应宽度的布局在后台框架、左图右文的样式中经常用到。左边固定200PX,右侧宽度随浏览器缩放自动调整大小,我的站长站分享几种实现方法,代码尽量精简,只留关键代码。方法1、左浮动,右margin-left比较推荐的方法,兼容性高,代码也...

    css教程 49 1年前
  • css3海浪波浪动态效果代码

    HTML代码建立一个div,id为wavesDIV,之后使用svg绘制一个图形出来,此时这个图形还是不会懂的,我们需要使用animation来让他动起来<div id="wavesDIV" style="display: block;"> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlin...

    css教程 96 2年前
  • CSS+JS简单的底部浮动搜索框效果代码

    一段CSS+JS简单的底部浮动搜索框效果代码,实现PC移动端底部浮悬代码。CSS代码<style type="text/css">* {margin:0px; padiing:0px;}.login_alert{position:fixed;bottom:0px;left:0px;width:100%;z-index:9999;}.login_alert_close{position:absolut...

    css教程 146 3年前
最新更新