网页尾部footer编写--小技巧
加 “|” 的小技巧,效果图如上图
css
a{
text-decoration: none;
}
.linkes {
list-style: none;
margin: 20px 90px 5px 0;
padding: 0;
padding-bottom: 8px;
height: 18px;
}
.linkes>li {
display: inline-block;
}
/*li后面的li添加*/
.linkes>li+li::before{
content: "|";
margin:0 8px;
}
/*ul>li::after {
content: ">";
font-size: 20px;
margin: 0 8px;
}*/
html
<footer>
<ul class="linkes">
<li><a href="javascript:;">关于我们</a></li>
<li><a href="javascript:;">服务条款</a></li>
<li><a href="javascript:;">加入我们</a></li>
<li><a href="javascript:;">联系我们</a></li>
<li><a href="javascript:;">隐私声明</a></li>
<li><a href="javascript:;">广告服务</a></li>
</ul>
</footer>
本文来自博客园,作者:JackieDYH,转载请注明原文链接:https://www.cnblogs.com/JackieDYH/p/17634950.html