下图是小米官网的头部菜单栏，也是今天我们要实现的内容。
今天的主要目的是是用伪类做出中间竖线分割的效果，下面上代码：
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1927722_k4bdhttg5c.css"> <style type="text/css"> *{margin:0;padding: 0;} ul,li{list-style: none;} .top{height: 40px;width: 100%;background-color:#333;} .top>div{ width:1230px;height:40px;margin:auto;font-size: 12px;} .top_left{float:left;height:40px;line-height: 40px;} .top_left>li{float:left;height:40px;line-height: 40px;margin-right: 20px;} .top_right>li{float:right;height:40px;line-height: 40px;margin-left: 20px;} /*伪元素是行内元素，转换，设置绝对定位使伪元素不占位置*/ li:after{ content:"";display:inline-block; position:absolute; top:12px;margin-left:10px;width:1px; height: 14px; background-color:#424242;} a{text-decoration: none; color:#b0b0b0;} .top_left>li:last-child:after{ content:"" ;width:0;height:0; } .top_right>li:first-child:after{ content:"" ;width:0;height:0; } </style> </head> <body> <div class="top"> <div> <ul class="top_left"> <li><a href="">小米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">IoT</a></li> <li><a href="">IoT</a></li> <li><a href="">IoT</a></li> <li><a href="">云服务</a></li> <li><a href="">金融</a></li> <li><a href="">有品</a></li> <li><a href="">小爱开放平台</a></li> <li><a href="">企业团购</a></li> <li><a href="">下载app</a></li> <li><a href="">资质证照</a></li> <li><a href="">协议规则</a></li> <li><a href="">Select Location</a></li> </ul> <ul class="top_right"> <li><a href="">消息通知</a></li> <li><a href="">登录</a></li> <li><a href="">注册</a></li> </ul> </div> </div> </body> </html>这里要注意3点：
1.伪元素行内元素，需要使用display属性进行转换；
2. 尽量使用position:absolute；使伪元素不占位置；
3.一般最后一个添加的“|”要去掉，将最后一个的width设为0就可以。
另外，一般网站的页眉都可以按照下面的结构去写：
<div id="header"> ----------设置给定的高度，宽度100% <div class="header">--------------设置给定高度、宽度，设置居中 <div class="header_left">-------float：left；设置宽度，高度一般和父类相同 内容（ul li span）----------line-height=高度，设置居中 </div> <div class="header_right">-------float：right；设置宽度，高度一般和父类相同（左右宽度之和小于父类宽度） </div> </div> </div>
