前端学习-导航栏中的竖线

导航栏中的”I“实现方法

1、直接在html中写“I”

比较麻烦，需要对第一个、最后一个、以及中间的标签分别设置padding值(或margin)

   <ul class="box">
       <li>
       		<a href="javascript:;">登录</a>|
       </li>
       <li>
       		<a href="javascript:;">注册</a>
       </li>
   </ul>

	.box li {
		float: left;
	}
	.box li a:first-child {
	    padding-right: 10px;
	}
	.box li a:last-child {
	    padding-left: 10px;
	}
	.box li a:not(:first-child):not(:last-child) {
	    padding: 10px;
	}

2、span【推荐，便于调整左右的padding】

方便设置，样式少

   <div class="box">
       <li>
       		<a href="javascript:;">登录</a><span>|</span>
       </li>
       <li>
       		<a href="javascript:;">注册</a>
       </li>
   </div>

	.box li {
		float: left;
	}
	.box span {
	    padding: 0 10px;
	}

3、li

   <div class="box">
       <li>
       		<a href="javascript:;">登录</a>
       </li>
       <li></li>
       <li>
       		<a href="javascript:;">注册</a>
       </li>
   </div>

    .box li:nth-of-type(even) {
        width: 1px;
        height: 15px;
        background-color: #000;
    }

4、边框实现

   <div class="box">
       <li>
       		<a href="javascript:;">登录</a>
       </li>
       <li>
       		<a href="javascript:;">注册</a>
       </li>
   </div>

.box li {
    float: left;
    border-right: 1px solid #000;
}

.box li a {
    padding: 0 10px;

}
.box li:last-child {
    border-right: 0;
}

5、背景图片

不推荐，需要切图还需要设置图片的样式

   <div class="box">
       <li>
       		<a href="javascript:;">登录</a><img src="images/pipe.png" alt="">
       </li>
       <li>
       		<a href="javascript:;">注册</a>
       </li>
   </div>

6、使用伪类before【推荐】

   <div class="box">
       <li>
       		<a href="javascript:;">登录</a>
       </li>
       <li>
       		<a href="javascript:;">注册</a>
       </li>
   </div>

     .box li::before {
         content: '|'
     }
     .box li:first-child::before {
         content: '';
     }