【电商项目】小竖线做法

方式1（懒人）copyright部分

html

<div class="links">
                    <a href="#">关于我们</a>|      /* 直接写的小竖线 */
                    <a href="#">联系我们</a>|
                    <a href="#">联系客服</a>|
                    <a href="#">商家入驻</a>|
                    <a href="#">营销中心</a>|
                    <a href="#">手机品优购</a>|
                    <a href="#">友情链接</a>|
                    <a href="#">销售联盟</a>|
                    <a href="#">品优购社区</a>|
                    <a href="#">品优购公益</a>|
                    <a href="#">English Site</a>|
                    <a href="#">Contact U</a>
                </div>

common.css

.mod_copyright {
    text-align: center;
    padding-top: 20px;
}
.links {
    margin-bottom: 15px;
}
.copyright {
    line-height: 20px;
}
.mod_copyright a {
    margin: 0 3px;       /* 妙 */
}

方式2

构建盒子

• css部分

.spacer {
    width: 1px;
    height: 14px;
    background-color: #666;
    margin: 9px 15px 0;
}

• html部分用块级元素li，唤名"spacer"

<div class="fr">
                <ui>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">我的品优购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a></li>
                </ui>
            </div>

__EOF__

本文作者：ice猫猫3
本文链接：https://www.cnblogs.com/icemiaomiao3/p/14135640.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！