【电商项目】小竖线做法

方式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 {
     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>