【电商项目】小竖线做法
方式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>