适用任何网站:自适应 文字广告 好看的文字广告代码,一款彩色的文字广告 自适应广告 代码如下,代码仅有两排 需要多排 可自行设置。
<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>
</div>
/**新增文字广告**/
.txtguanggao {
margin: 10px 0 -3px;
width: calc(100% + 3px);
overflow: hidden;
}
.txtguanggao a {
margin: 0 3px 3px 0;
width: calc(25% - 3px);
float: left;
line-height: 32px;
height: 32px;
text-align: center;
color: #fff;
}
.txtguanggao a:nth-child(1) {
background-color: #dc3545;
}
.txtguanggao a:nth-child(2) {
background-color: #007bff;
}
.txtguanggao a:nth-child(3) {
background-color: #28a745;
}
.txtguanggao a:nth-child(4) {
background-color: #ffc107;
}
.txtguanggao a:nth-child(5) {
background-color: #28a745;
}
.txtguanggao a:nth-child(6) {
background-color: #ffc107;
}
.txtguanggao a:nth-child(7) {
background-color: #dc3545;
}
.txtguanggao a:nth-child(8) {
background-color: #007bff;
}
.txtguanggao a:hover {
background: #FF2805;
color: #FFF
}
@media screen and (max-width: 768px) {
.txtguanggao a {
width: calc(50% - 3px);
}
}