首页源码大全正文

自适应文字广告位HTML代码-七默网同款

扫码手机浏览

效果图:

<!--< 文字广告开始 >-->

<style>
    .tp_advertising{
        width: 100%;
        display: flex;
        max-width:1210px;
        margin:0 auto;
        justify-content: space-between;
        background: #fff;
        position: relative;
        box-shadow: 0 0 3px rgba(0,0,0,.2);
    }
    .tp_advertising p{
        color: #fff;
        font-size: 12px;
        line-height: 24px;
        background: #6F8EC5;
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;
        padding: 0 8px;
        border-top-left-radius: 10px;
        opacity: .3;
    }
    .tp_advertising div{
        width: 16.66%;
        position: relative;
        z-index: 1;
        margin-bottom: 19px;
    }
    .tp_advertising a{
        font-size: 20px;
        line-height: 40px;
        text-align: center;
        display: block;
        text-decoration: none;
        white-space:nowrap;
    }
    .tp_advertising a:hover{
        font-weight: bold;
        font-size: 25px;
        text-shadow: 0px 0px 1px rgba(0,0,0,.5);
    }
    .tp_1 a{
        color: #FF0033;
    }
    .tp_2 a{
        color: #9400D3;
    }
    .tp_3 a{
        color: #00BFFF;
    }
    .tp_4 a{
        color: #FF1493;
    }
    .tp_5 a{
        color: #FF4500;
    }
    .tp_6 a{
        color: #5fb878;
    }
</style>
<div class="tp_advertising">
            <p>广告</p>
            <div class="tp_1">
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
            </div>
            <div class="tp_2">
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
            </div>
            <div class="tp_3">
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
            </div>
            <div class="tp_4">
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
            </div>
            <div class="tp_5">
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
            </div>
            <div class="tp_6">
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
                <a href="#" target="_blank">广告招租</a>
            </div>
        </div>
        <!--< 文字广告结束 >-->
阅读全文

非特殊说明,本文由七默网原创或收集发布。
转载请注明本文地址:https://www.qmnet.net/cms/post_detail/13.html

推荐文章