代码改变世界

小记：模块化侧边栏设计

2009-10-16 09:48  Jeffery Tao  阅读(351)  评论(0)    收藏  举报

侧边栏都是有一个标题，再下面是是主面板，再有一类侧边栏是标签页的，下面展示的是新闻之类的内容。这个时候就完全可以抽象出两个类，一个是带标题的侧边栏（title_box），另一个是带标签的侧边栏(tab_box)。这样的好处是可以进一步抽象出代码，提高复用率。增加开发速度。
比如前者的HTML可以是这样的：

  1. <div class="title_box">
  2.     <span class="act"><a href="#">更多</a></span>
  3.     <h3>标题</h3>
  4.     <div class="panel">
  5.         <ul>
  6.             <li><a href="#">新闻</a></li>
  7.             <li><a href="#">新闻</a></li>
  8.         </ul>
  9.     </div>
  10. </div>

可能的CSS是：

  1. .title_box {margin-bottom:10px;border:1px solid #aaa;}
  2. .title_box h3{border-bottom:1px solid #aaa;}
  3. .title_box .act{float:right}
  4. .title_box .panel{margin:0 10px;}