談談分垂直分割線的幾種寫法，我們對這種分隔線不會陌生，在項目需求中會經常遇到，我們來看看
下邊的幾種寫法，
方法一：
<div>
<a href="">注冊</a>｜<a href="">登錄</a>
</div>
直接在文字中間插入短線字符；
優點：簡單、直接、高效。
缺點：可控性差；
方法二：
HTML：
<div>
<a href="" class="reg">注冊</a>
<a href="">登錄</a>
</div>
CSS：
.reg:after{
content: "|";
display: inline-block;
}
偽元素方法，其實跟直接插入差不多，一個是真是存在的字符，一個是偽的元素
css樣式也可以這么寫
.reg:after {
content: " ";
border-left: 1px solid #000;
margin-left: 6px;
}
利用border實現豎線；優點：不用多寫多余的元素；缺點：可控性也差；
方法三：
HTML：
<div>
<a href="">注冊</a>
<span class="fenge"></span>
<a href="">登錄</a>
</div>
CSS：
.fenge{
padding:12px 6px 0px 6px;
margin-left: 6px;
border-left: 1px solid #000;
font-size: 0;
}
利用border和padding ，這里使用padding主要是可以調控豎線的高度。實現可控性。優點：可控性高；缺點：多一個空白節點；
方法四：
HTML：
<div>
<a href="" class="reg_img">注冊</a>
<a href="">登錄</a>
</div>
CSS：
.reg_img{
background: url(../images/line.gif) no-repeat right;
padding-right: 6px;
display: block;
margin-right: 6px;
}
利用背景圖片；優點：可控性當然就是圖片的制作大小；缺點：要切圖；
以上。。。。