今天站长也是弄了一个文字广告来维持一下生活，有条件的大哥们可以来支持一下，我把代码分享一下，效果你们自己看首页就好了。背景可以设置渐变颜色，可以自己修改。

html代码：

    

        <!--首页文字广告-->
    

    

         <div class="text-gg">
    

    

         <a target="_blank" href="http://www.dufengvip.cn">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击访问</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击访问</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击访问</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击访问</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击访问</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击咨询</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击咨询</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击咨询</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击咨询</p>
    

    

         </div>
    

    

         </a>
    

    

         <a target="_blank" href="javascript:;">
    

    

         <div>
    

    

         <p>广告招租3RMB</p>
    

    

         <p>点击咨询</p>
    

    

         </div>
    

    

         </a>
    

    

        </div>
    

css代码：

    


        

            .text-gg{/*文字广告*/
        

        

             width: 100%;
        

        

             overflow: hidden;
        

        

             display: flex;
        

        

             flex-wrap: wrap;
        

        

             border-radius:10px;
        

        

             }
        

        

             .text-gg a{
        

        

             color: rgba(0,0,0,.6);
        

        

             font-size: 14px;
        

        

             font-weight: bold;
        

        

             line-height: 30px;
        

        

             text-align: center;
        

        

             text-decoration: none;
        

        

             display: block;
        

        

             width: 20%;
        

        

             height: 30px;
        

        

             overflow: hidden;
        

        

             position: relative;
        

        

             margin: 1px 0;
        

        

             }
        

        

             .text-gg a div{
        

        

             width: 100%;
        

        

             height: 60px;
        

        

             padding: 1px;
        

        

             box-sizing: border-box;
        

        

             position: absolute;
        

        

             top: 0;
        

        

             left: 0;
        

        

             transition: all .2s;
        

        

             }
        

        

             .text-gg a:hover div{
        

        

             transition: all .3s;
        

        

             color: #fff;
        

        

             top: -40px;
        

        

             text-shadow: 0 2px 3px rgba(0,0,0,.6);
        

        

             }
        

        

             
        

        

             .text-gg a div :nth-child(1){
        

        

             background: linear-gradient(to right,#ffc0cb, #fff,#ffc0cb);
        

        

             }
        

        

             .text-gg a div :nth-child(2){
        

        

             background: linear-gradient(to right,#aedefc,#b4b4ff);
        

        

             }