好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云资源网 技术教程 正文

爱站云彩色好看自适应文字代码

爱站云 2019-03-04 技术教程 2 评论

前台样式:

image.png

文字代码

<div class="txtguanggao">
            <a href="#1" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#2" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#3" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#4" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#5" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#6" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#7" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#8" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#9" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#10" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#11" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#12" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#13" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#14" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#15" target="_blank" class="dh">超低价文字广告位</a>
			<a href="#16" target="_blank" class="dh">超低价文字广告位</a>
</div>

CSS代码:

/**新增文字广告**/
.txtguanggao{
    width: 100%;
    overflow: hidden;
    display: block;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.txtguanggao a{
    width: 24.55%;
    float: left;
    border-radius: 2px;
    line-height: 35.35px;
    height: 35.35px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    background-color: rgb(255, 153, 159);
    margin: 2.5px;
    transition-duration: .3s;
}
.txtguanggao a:nth-child(3n+1) {
    background-color: #5fb878;
}
.txtguanggao a:nth-child(3n+2) {
    background-color: #01AAED;
}
.txtguanggao a:nth-child(4) {
    background-color: #2F4056;
}
.txtguanggao a:nth-child(5) {
    background-color: #2F4056;
}
.txtguanggao a:nth-child(12) {
    background-color: #2F4056;
}
.txtguanggao a:nth-child(13) {
    background-color: #2F4056;
}
.txtguanggao a:nth-child(20) {
    background-color: #2F4056;
}
.txtguanggao a:hover{
	background:#FF2805;color:#FFF
}
@media screen and (max-width: 1200px) {
.txtguanggao a{
    width: 24.48%;
    float: left;
    border-radius: 2px;
    line-height: 35.35px;
    height: 35.35px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    background-color: rgb(255, 153, 159);
    margin: 2.5px;
    transition-duration: .3s;
}
}
@media screen and (max-width: 768px) {
.txtguanggao a{
    width: 48.5%;
    float: left;
    border-radius: 2px;
    line-height: 35.35px;
    height: 35.35px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    background-color: rgb(255, 153, 159);
    margin: 2.5px;
    transition-duration: .3s;
  }

爱站云文字广告  一排50元  一排4个 仅4排 先到先得哦 QQ207385345

< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:207385345  官方QQ群:333914614


猜你喜欢

已有2位网友发表了看法:

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群
爱站云安全认证