百变鹏仔缤纷文字广告位代码美化版

想给网站添加一个类似文字广告的商品分类指南，就在其他网上看到这样的虚线划过变色文字广告样式，感觉还是很不错的，仿照写一份分享给大家吧！

PC端时代码为8个文字块一行，H5为4个文字代码一行，所以大家添加文字广告为8、16、24 ......只要是8的倍数即可，当然推荐添加2行效果最好。

由于考虑到大家的网站有暗黑模式，所以在这方面也进行了简约的优化，适用于白天与晚上模式。

暗黑模式：

白天模式：

将CSS与HTML放置需要展示的地方即可，在修改对应的a标签的内容，替换地址就OK了。

的CSS

1. <样式类型= “ text / css” >
2. 。tp - ad - text1 {宽度：100 ％; padding - top ：6像素；箱-大小：边界-箱; 溢出：隐藏; 背景：RGBA （255 ，255 ，255 ，... 2 ）;}
3. 。tp - ad - text1 a {颜色：＃7fba00 ; 字体-大小：14px的; 线-高度：38px ; 文本-对齐：中心; 边界：1px的虚线RGBA （0 ，0 ，0 ，2 ）; 填充：0 3px ; 框-尺寸：边框-框 ; 浮动：左; 宽度：11.5 ％; 高度：38px ; 溢出：隐藏; 文本-溢出：省略号; 白色-空间：NOWRAP ; 边距：0 0.5 ％6px ; 文本-装饰：无; 过渡：全部。6s ;}
4. 。TP -广告- text1的一个：悬停{字体-重量：大胆的; 颜色：＃fff ！重要的; 背景：＃7fba00 ; 过渡：全部。6s ;}
5. 。TP -广告- text1的一个：第n -儿童（2N ）{颜色：＃f74e1e ;}
6. 。TP -广告- text1的一个：第n -儿童（2N ）：悬停{背景：＃f74e1e ; 边界-颜色：＃f74e1e ;}
7. 。TP -广告- text1的一个：第n -儿童（3N ）{颜色：＃00a4ef ;}
8. 。TP -广告- text1的一个：第n -儿童（3N ）：悬停{背景：＃00a4ef ; 边界-颜色：＃00a4ef ;}
9. 。TP -广告- text1的一个：第n -儿童（4N ）{颜色：＃0517c2 ;}
10. 。TP -广告- text1的一个：第n -儿童（4N ）：悬停{背景：＃0517c2 ; 边界-颜色：＃0517c2 ;}
11. 。TP -广告- text1的一个：第n -儿童（5N ）{颜色：＃601165 ;}
12. 。TP -广告- text1的一个：第n -儿童（5N ）：悬停{背景：＃601165 ; 边界-颜色：＃601165 ;}
13. 。TP -广告- text1的一个：第n -儿童（6N ）{颜色：＃ffb900 ;}
14. 。TP -广告- text1的一个：第n -儿童（6N ）：悬停{背景：＃ffb900 ; 边界-颜色：＃ffb900 ;}
15. 。TP -广告- text1的一个：第n -儿童（7N ）{颜色：＃0fc317 ;}
16. 。TP -广告- text1的一个：第n -儿童（7N ）：悬停{背景：＃0fc317 ; 边界-颜色：＃0fc317 ;}
17. 。TP -广告- text1的一个：第n -儿童（8N ）{颜色：＃601165 ;}
18. 。TP -广告- text1的一个：第n -儿童（8N ）：悬停{背景：＃601165 ; 边界-颜色：＃601165 ;}
19. 。TP -广告- text1的一个：第n -儿童（9N ）{颜色：＃fba78f ;}
20. 。TP -广告- text1的一个：第n -儿童（9N ）：悬停{背景：＃fba78f ; 边界-颜色：＃fba78f ;}
21. 。TP -广告- text1的一个：第n -儿童（10N ）{颜色：＃13cf8f ;}
22. 。TP -广告- text1的一个：第n -儿童（10N ）：悬停{背景：＃13cf8f ; 边界-颜色：＃13cf8f ;}
23. 。TP -广告- text1的一个：第n -儿童（11N ）{颜色：＃f74e1e ;}
24. 。TP -广告- text1的一个：第n -儿童（11N ）：悬停{背景：＃f74e1e ; 边界-颜色：＃f74e1e ;}
25. 。TP -广告- text1的一个：第n -儿童（12N ）{颜色：＃ffb900 ;}
26. 。TP -广告- text1的一个：第n -儿童（12N ）：悬停{背景：＃ffb900 ; 边界-颜色：＃ffb900 ;}
27. 。TP -广告- text1的一个：第n -儿童（13N ）{颜色：＃fba78f ;}
28. 。TP -广告- text1的一个：第n -儿童（13N ）：悬停{背景：＃fba78f ; 边界-颜色：＃fba78f ;}
29. 。TP -广告- text1的一个：第n -儿童（14N ）{颜色：＃f74e1e ;}
30. 。TP -广告- text1的一个：第n -儿童（14N ）：悬停{背景：＃f74e1e ; 边界-颜色：＃f74e1e ;}
31. 。TP -广告- text1的一个：第n -儿童（15N ）{颜色：＃7fba00 ;}
32. 。TP -广告- text1的一个：第n -儿童（15N ）：悬停{背景：＃7fba00 ; 边界-颜色：＃7fba00 ;}
33. 。TP -广告- text1的一个：第n -儿童（16N ）{颜色：＃0fc317 ;}
34. 。TP -广告- text1的一个：第n -儿童（16N ）：悬停{背景：＃0fc317 ; 边界-颜色：＃0fc317 ;}
35. 。TP -广告- text1的一个：第n -儿童（17N ）{颜色：＃0517c2 ;}
36. 。TP -广告- text1的一个：第n -儿童（17N ）：悬停{背景：＃0517c2 ; 边界-颜色：＃0517c2 ;}
37. 。TP -广告- text1的一个：第n -儿童（18n的）{颜色：＃13cf8f ;}
38. 。TP -广告- text1的一个：第n -儿童（18n的）：悬停{背景：＃13cf8f ; 边界-颜色：＃13cf8f ;}
39. 。TP -广告- text1的一个：第n -儿童（19N ）{颜色：＃ffb900 ;}
40. 。TP -广告- text1的一个：第n -儿童（19N ）：悬停{背景：＃ffb900 ; 边界-颜色：＃ffb900 ;}
41. 。TP -广告- text1的一个：第n -儿童（20N ）{颜色：＃f74e1e ;}
42. 。TP -广告- text1的一个：第n -儿童（20N ）：悬停{背景：＃f74e1e ; 边界-颜色：＃f74e1e ;}
43. @media屏幕和（最大-宽度：1198px ）{
44. 。TP -广告- text1的一个{
45. 宽度：24 ％;
46. }
47. }
48. </ style >

的HTML

1. < div class = “ tp-ad-text1” >
2. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
3. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
4. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
5. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
6. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
7. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
8. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
9. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
10. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
11. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
12. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
13. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
14. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
15. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
16. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
17. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
18. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
19. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
20. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
21. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
22. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
23. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
24. < A HREF = “http://baidu.com/”标题= “百变鹏仔”目标= “_blank” >百变鹏仔</一>
25. < A HREF = “http://baidu.com/”标题= “AIR源码站”目标= “_blank” >AIR源码站</一>
26. </ div >