好看的DIV，可做广告可做链接

admin

撰写于 2023年 05月 03 日

好看的DIV，可做广告可做链接

    
.download-box {
    position: absolute;
    width: 74.4791666667vw;
    bottom: -4.1666666667vw;
    left: 50%;
    transform: translateX(-50%);
    background: url(https://up.ishiguang.cn/blog/typecho/2023-05-03T05:57:33-20230503015734.png?imageMogr2/format/webp) 50% no-repeat;
    background-size: cover;
    padding: 2.0833333333vw 0 1.5625vw 3.125vw;
    border-radius: .4166666667vw;
    box-shadow: 0 0 2.0833333333vw rgba(0, 0, 0, .18)
}
@media (max-width:1199px) {
    .download-box {
        width: 95%;
        bottom: -80px;
        padding: 40px 15px 30px;
        border-radius: 8px;
        box-shadow: 0 0 30px rgba(0, 0, 0, .18)
    }
}
.download-img {
    position: absolute;
    right: 6.5625vw;
    bottom: -1.09375vw
}
@media (max-width:1199px) {
    .download-img {
        right: 60px;
        bottom: -16px
    }
}
@media (max-width:991px) {
    .download-img {
        display: none
    }
}
.download-img img {
    width: 19.0104166667vw
}
@media (max-width:1199px) {
    .download-img img {
        width: 250px
    }
}
.download-text {
    color: #fff
}
@media (max-width:991px) {
    .download-text {
        text-align: center
    }
}
.download-text h2 {
    font: 1.4583333333vw Avenir Next Cyr Bold;
    margin-bottom: .5208333333vw;
    text-transform: uppercase
}
@media (max-width:1199px) {
    .download-text h2 {
        font-size: 22px;
        margin-bottom: 10px
    }
}
.download-text p {
    font: 1.1458333333vw Avenir Next Cyr Bold;
    margin-bottom: 1.0416666667vw
}
@media (max-width:1199px) {
    .download-text p {
        font-size: 18px;
        margin-bottom: 15px
    }
}
.download-text a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 10.625vw;
    height: 2.9166666667vw;
    border: 2px solid #fff;
    border-radius: 1.5625vw;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(145deg, #38df27, #20ab1e);
    font: .9375vw Avenir Next Cyr Bold;
    transition: opacity .3s ease-in-out
}
@media (max-width:1199px) {
    .download-text a {
        width: 180px;
        height: 40px;
        border-radius: 30px;
        font-size: 16px
    }
}
@media (max-width:991px) {
    .download-text a {
        margin: 0 auto
    }
}
.download-text a:hover {
    opacity: .8
}

<div class="download-box wn"><div class="download-text" style="z-index: 9999999;"><h2 _msttexthash="51957165" _msthash="181">您仍然没有自定义光标？</h2><p _msttexthash="8514714" _msthash="182">安装它</p><div class="btn-group"><a class="btn btn__purple btn__chrome" role="button" href="https://chrome.google.com/webstore/detail/custom-cursor-for-chrome/ogdlpmhglpejoiomcodnpjnfgcpmgale" target="_blank" style="display:none; width: 214px;" _msthidden="1"><i class="fab fa-chrome" style="margin-right:10px"></i><font _mstmutation="1" _msttexthash="133822" _msthidden="1" _msthash="183">for Chrome</font></a><a class="btn btn__purple btn__edge" role="button" href="https://microsoftedge.microsoft.com/addons/detail/custom-cursor-for-microso/ekmpbacnhaailfeebjmpoeifoobmpfhk" target="_blank" style="width: 214px;"><i class="fab fa-edge" style="margin-right:10px"></i><font _mstmutation="1" _msttexthash="12768496" _msthash="184">对于边缘</font></a><a class="btn btn__purple btn__windows" role="button" href="https://custom-cursor.com/products/custom-cursor-for-windows" target="_blank" style="width: 214px;"><i class="fab fa-windows" style="margin-right:10px"></i><font _mstmutation="1" _msttexthash="12440415" _msthash="185">对于视窗</font></a></div></div></div>

效果如下
!!!