前几天，接到一活，修改网站搜索页的面包屑，使用户所选择的搜索条件可以实现更好的交互效果。拿到设计图的时候着实被唬了一下，两大张图：一张是交互思想图，表现不同操作下看完成的不同效果；另一张则是制作标准图，具体要求精确到了1px。

 交互设计

被老大这种认真负责的态度所折服，自己也要认真对待。大图变小图，整理出自己需要的两张图：最终效果和制作规范。

 最终效果

 制作要求

下一步则开始进入制作环节。

因为这只是局部的调整，所以制作起来是比较简单的，但是，完成后再回头想想，有些小细节还是需要注意的，所以作为小总结整理一下：

1、功能的实现。主要功能是将用户在搜索时所用到的条件作为一个元素列在面包屑上，并可在现有的条件下增加/删除新的条件；点击面包屑上的某个条件则进入该条件下相应的页面；当删除所有条件后跳到搜索首页。需要我这里实现的功能就是点击某个条件后面的小叉则删除该条件，使其不显示，具体查询结果的实现需要由后台开发人员来控制。

2、标签的选择。首先是整个面包屑外层用什么标签？我看到有人用p或者ul/li的。这不应该是个段落或列表吧？所以欠语义；而ul/li在css裸奔状态下是块级显示的，这样整个面包屑就被切断了，也不好。个人觉得还是用div这个没有语义的最保险；至于里面的标签为了避免上面的问题，都用了行内元素。

3、用什么来控制定位？本身行内元素是呈行级显示的，好像不用什么来控制。可标签之间的空格在精确要求下无法准确控制，且这种布局在不同浏览器下解析不一样，易发生怪异现象，所以还是选用了自己比较擅长的float来解决。后面用作删除的小叉也是用图片写在css背景里用绝对定位的。本来是写在a的背景里通过点击a来实现删除的，但a里链接的作用不是用作删除，所以只好并列写在一个span里；而span是定义为inline-block来使用。

4、浏览器的兼容。我一般做的页面只在ie6、7、8和ff3下测试。现在的感觉就是ie6、7总出现些同样的解析问题，而ie8和ff3基本是正常的，他们保持了一致。在制作过程中，让ie6和ff3下效果相同，那所有的问题基本解决了。因为上下左右的间距都做了明确的规定，无奈的选择了hack。尤其是个浏览器对line-height的显示，那叫个不同，我真不知道该相信哪个了。。。

最后看下效果吧，其实真的很简单！

css部分：

 
  1. /*===公用样式===*/
  2. *{margin:0;padding:0;}
  3. body{margin:0;padding:0;font-family:"宋体";font-size:12px;color:#000;}
  4. .clear {clear:both;}
  5. .clearfix:after {content:"."; display:block; height:0px; clear:both; visibility:hidden; }
  6. .clearfix {zoom:1;}
  7.  
  8. /*===链接颜色===*/
  9. a:link,a:visited {color: #002a80;text-decoration:none}
  10. a:hover,a:active {color:#002a80;text-decoration: underline;} 
  11.  
  12. /*===页面布局===*/
  13. #wrapper {width:960px; margin:0 auto; text-align:left;}
  14. #main_left {width:628px; float:left;}
  15. #main_right {width:300px; float:right;}
  16. .main_crumb {border-bottom:1px solid #9CAAE2; color:#666; margin-top:10px; *padding-bottom:9px; overflow:hidden; zoom:1;}
  17. .main_crumb .main_crumb_label {width:auto; line-height:21px; float:left; padding-left:10px; padding-bottom:9px; *padding-bottom:0; display:inline; white-space:nowrap;}
  18. .main_crumb .main_crumb_label a:link,
  19. .main_crumb .main_crumb_label a:visited {color:#002A80;}
  20. .main_crumb .main_crumb_label a:hover,
  21. .main_crumb .main_crumb_label a:active {color:#002A80; text-decoration:underline;}
  22. .main_crumb .main_crumb_label .cola {color:#FF5E00;}
  23. .main_crumb .main_crumb_list {width:auto; height:15px; _height:14px; border:1px solid #DADADA; line-height:100%; padding:4px 21px 0 10px; _padding:5px 21px 0 10px; margin:0 0 9px 10px; display:inline-block; float:left; position:relative; white-space:nowrap;}
  24. .main_crumb .main_crumb_keyword {color:#002A80; font:normal bold 12px/100% "宋体"; text-decoration:none; white-space:nowrap;}
  25. .main_crumb .main_crumb_keyword:link,
  26. .main_crumb .main_crumb_keyword:visited {color:#002A80;}
  27. .main_crumb .main_crumb_keyword:hover,
  28. .main_crumb .main_crumb_keyword:active {text-decoration:underline;}
  29. .main_crumb .main_crumb_del {width:5px; height:5px; background:url(http://www.hzhjun.cn/upload/2009/7/sk_close.gif) no-repeat 0 0; text-indent:-9999px; margin-left:10px; display:inline-block; overflow:hidden; position:absolute; top:7px; right:7px;_right:6px;}
  30. .main_crumb .main_crumb_del:hover {background-position:0 -10px; color:#FF7F00; text-decoration:none;}

xhtml部分：

 
  1. <div id="wrapper">
  2.     <div id="main_left">
  3.         <div class="main_crumb clearfix">
  4.             <span class="main_crumb_label"><a href="/">首页</a> &gt; <a href="#">买车</a> &gt; 搜索</span>
  5.             <span class="main_crumb_list" id="sk1"><a href="#" class="main_crumb_keyword">A6二手车</a> + <a href="#" class="main_crumb_keyword">A6二手车</a> <a href="#" class="main_crumb_del" title="删除" onclick="closeVessel(’sk1′)">删除</a></span>
  6.             <span class="main_crumb_list" id="sk2"><a href="#" class="main_crumb_keyword">A6二手车</a> <a href="#" class="main_crumb_del" title="删除" onclick="closeVessel(’sk2′)">删除</a></span>
  7.             <span class="main_crumb_list" id="sk3"><a href="#" class="main_crumb_keyword">A6二手车</a> + <a href="#" class="main_crumb_keyword">A6二手车</a> <a href="#" class="main_crumb_del" title="删除" onclick="closeVessel(’sk3′)">删除</a></span>
  8.             <span class="main_crumb_list" id="sk4"><a href="#" class="main_crumb_keyword">A6二手车</a> <a href="#" class="main_crumb_del" title="删除" onclick="closeVessel(’sk4′)">删除</a></span>
  9.             <span class="main_crumb_list" id="sk5"><a href="#" class="main_crumb_keyword">A6二手车</a> + <a href="#" class="main_crumb_keyword">A6二手车</a> <a href="#" class="main_crumb_del" title="删除" onclick="closeVessel(’sk5′)">删除</a></span>
  10.             <span class="main_crumb_label">
  11.             共找到<strong class="cola"> <span id="ucCarlist_spCarCount">7</span> </strong>条结果 [ <a href="#">设为关注</a> ]</span>
  12.         </div>
  13.     </div>
  14.     <div id="main_right"></div>
  15. </div>

点击查看效果：demo演示