代码：PC 链接列表面板border的一种做法（每行之间有分割线）

 

PC 链接列表面板，border的一种做法

做页面经常遇到一种问题，上面是标题，下面是单行链接列表。为了保证后台套页面方便，所有列表项必须完全一样。但我们无法解决第一行或最后一行多出来的分割线。

使用   .main-list .fenleilist > a:first-child 这样的选择器，又有兼容性之类问题。

下述方法很好的解决了这个问题：（将链接列表面板，向上提升1px，藏在标题的后面）

解决思路是： 　　2016-3-23

/*1、里面列表是上边框有分隔线，则外面容器向上 -1px*/
.box1{overflow:hidden;}
.box1 .item{width:100%;border-top:1px solid #f00;margin-top:-1px;}

/*2、里面列表是下边框有分隔线，则外面容器向下 -1px*/
.box2{overflow:hidden;}
.box2 .item{width:100%;border-bottom:1px solid #f00;margin-bottom:-1px;}

 

 

 这是一行中有多个链接的例子： 

<style type="text/css">
h1,h2,h3,h4,h5,h6,p{padding:0;margin:0;}
.main-list{position:relative;width:300px;}
.main-list h2{position:relative;height:40px;line-height:40px;font-size:14px;text-align:center;background:#252629;color:#f90;z-index:1;}
.main-list .fenleilist{position:relative;margin-top:-1px;z-index:0;}
.main-list .fenleilist > a{display:block;width:100%;color:#fff;font-size:12px;height:28px;line-height:28px;border-top:1px dashed #000;box-sizing:content-box;}
</style>
<div class="main-list">
    <h2>建材品牌分类</h2>
    <div class="fenleilist clearfix">
          <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>
    </div>
    <h2>家具品牌分类</h2>
    <div class="fenleilist">
          <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>
    </div>
</div>

 

 

 

 

PC 链接列表面板，border的一种做法，这是一行中有多个链接的例子：

<style type="text/css">
.main-list h2{position:relative;padding-left:30px;height:40px;line-height:40px;font-size:14px;font-weight: normal;background:#252629;z-index:1;}
.main-list .fenleilist{position:relative;margin-left:10px;margin-top:-1px;background:url(../images/bg_fenlei.png);z-index:0;}
.main-list .fenleilist > a{float:left;color:#fff;font-size:12px;height:28px;line-height:28px;padding-right:20px;box-sizing:content-box;
padding-top:1px;/*这个占的高度是border占的高度*/
}
</style>


<div class="main-list">
    <h2>建材品牌分类</h2>
    <div class="fenleilist clearfix">
          <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="##">橱柜</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>
    </div>
    <h2>家具品牌分类</h2>
    <div class="fenleilist">
          <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="##">沙发</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>
    </div>
</div>
<p>效果要求：列表区域，每行高度28px，border高1px。  列表区域全部都是链接，每行之间有间隔线。而且不能做成单行的ul>li>a方式的，要不后台套页面不好做</p>
<p>问题：列表区域如果给每个链接做上border，那么虚线border宽度不够100%</p>
<p>做法原理：现在把列表区域向上错位1px高，那么第一行顶部.fenleilist的border 就不显示。列表中的border就不需再做处理，并且能有100%宽度。</p>

 

..