欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

css教程

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

css教程 我的站长站 2024-08-19 共11人阅读

给网站增加一个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代码
  • 左侧固定宽度,右侧随浏览器自适应宽度的CSS代码

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

    css教程 52 2年前
  • 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教程 100 3年前
  • 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教程 147 4年前
  • 3段h1标题CSS美化代码
    3段h1标题CSS美化代码

    一段简单的CSS美化h1,h2,h3,h4,h5,h6代码,很简单css美化功能。使用的是比较简单的css样式美化的h1{padding: 0px 20px;border-left: 10px solid #ed515191;background-color: rgba(208, 208, 208,...

    css教程 275 4年前
  • CSS3高光划过效果代码教程

    我们常常看到的高光划过效果,其实用CSS就能实现,CSS3高光划过效果代码教程方法CSS3高光划过效果代码.logo-wrapper { position: relative; font-size:2em; font-weight:700; line-height:39px; overflow:hidden; margin:0;}.logo-wr...

    css教程 119 4年前