1、基本思路是用几条线叠加；
2、如果是4条线的话，边距（margin）依次是5、3、2、1；
3、下图中的上图常用于网站导航标签，下图中的下图常用于网站各种标签；
1 <style type="text/css"> 2 .item{ width: 107px; } /*定义1个类元素*/ 3 .item p{ /*在类中的段落*/ 4 margin:0px; 5 padding:5px; /*padding和字体高度匹配*/ 6 background:yellow;} 7 .item div{ /*在类中的层*/ 8 height: 1px; 9 background: yellow;} 10 .item .row1{ /*在类中的类*/ 11 margin: 0 5px;} /*上下边距为0，左右边距为5*/ 12 .item .row2{ 13 margin: 0 3px;} 14 .item .row3{ 15 margin: 0 2px;} 16 .item .row4{ 17 margin: 0 1px; 18 height: 2px;} /*为了美观给点高度*/ 19 </style> 20 <body> 21 <div class="item"> 22 <div class="row1"></div> 23 <div class="row2"></div> 24 <div class="row3"></div> 25 <div class="row4"></div> 26 <p>就不喜欢图片</p> 27 </div> 28 <p></p> 29 <div class="item"> 30 <div class="row1"></div> 31 <div class="row2"></div> 32 <div class="row3"></div> 33 <div class="row4"></div> 34 <p>也不喜欢图片</p> 35 <div class="row4"></div> 36 <div class="row3"></div> 37 <div class="row2"></div> 38 <div class="row1"></div> 39 </div> 40 </body>