本页目录
一个简单的带响应式的底部区块,可用于页面底部友情链接展示用
截图

效果
<!-- 友情链接 --><div class="footer-links"> <ul> <li>友情链接:</li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> </ul></div><style> a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
@media (min-width: 1200px) { .footer-links { max-width: 1160px; } }
@media (min-width: 992px) { .footer-links { max-width: 960px; } }
@media (min-width: 768px) { .footer-links { max-width: 720px; padding-left: 15px; padding-right: 15px; } }
.footer-links { text-align: center; display: flex; justify-content: center; padding: 20px; border-radius: 3px; position: relative; background: rgb(0 0 0 / 3%);
margin: 20px 0; color: #121212; margin-left: auto; margin-right: auto; }
.footer-links ul { display: flex; flex-wrap: wrap; margin: 0px; }
.footer-links ul li { padding: 5px 8px; }
.footer-links ul li a { border-bottom: 1px solid rgba(255, 255, 255, 0); font-size: 13px; }
.footer-links ul li a:hover { color: #9E9E9E; }</style>代码
<!-- 友情链接 --><div class="footer-links"> <ul> <li>友情链接:</li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> <li><a target="_blank" href="https://www.npc.ink/279056.html">Npcink</a></li> </ul></div><style> a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
@media (min-width: 1200px) { .footer-links { max-width: 1160px; } }
@media (min-width: 992px) { .footer-links { max-width: 960px; } }
@media (min-width: 768px) { .footer-links { max-width: 720px; padding-left: 15px; padding-right: 15px; } }
.footer-links { text-align: center; display: flex; justify-content: center; padding: 20px; border-radius: 3px; position: relative; background: rgb(0 0 0 / 3%);
margin: 20px 0; color: #121212; margin-left: auto; margin-right: auto; }
.footer-links ul { display: flex; flex-wrap: wrap; margin: 0px; }
.footer-links ul li { padding: 5px 8px; }
.footer-links ul li a { border-bottom: 1px solid rgba(255, 255, 255, 0); font-size: 13px; }
.footer-links ul li a:hover { color: #9E9E9E; }</style>