网站添加缤纷字体广告代码 自适应文字广告代码美化版

作者：鹏仔先生

这个代码是很久之前帮别人定制的，因为常用，在整理优化了一下，自适应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>

  <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>