网站添加彩色字体广告代码 自适应文字广告代码美化版
网站添加彩色字体广告代码 自适应文字广告代码美化版详细介绍
截图演示：
这个广告代码是很久之前帮别人定制的，因为常用，在整理优化了一下，自适应pc和移动端，总共为6行6列，文字超出会隐藏显示省略号，鼠标滑过会有加粗和阴影效果，还是挺美观的。
代码分享给大家，欢迎使用。
<style>
.tp_advertising {
width: 100%;
display: flex;
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: 14px;
line-height: 22px;
background: #6F8EC5;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0 8px;
border-top-left-radius: 10px;
opacity: .3;
}
.tp_advertising div {
position: relative;
z-index: 1;
width: 16.66%;
}
.tp_advertising a {
font-size: 12px;
line-height: 22px;
text-align: center;
display: block;
text-decoration: none;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tp_advertising a:hover {
font-weight: bold;
font-size: 14px;
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>
代码放在一起也可以单独建立一个CSS引用 看自己的需要。
<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>
,