侧边栏的实现（一）

侧边栏是一个经常要用到的组件，因此有必要整理一下其设计实现的代码。

1、html

<div class="sidebar"> <ul> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> <li><a href="#">item5</a></li> <li><a href="#">item6</a></li> </ul> </div> 2、css

#sidebar{ position: fixed; top:0; right:0; bottom:0; width:300px; background: #333; padding:20px 0; } #sidebar ul{ list-style: none; padding:0; margin:0; } #sidebar ul a{ display: inline-block; padding:10px 40px; text-decoration: none; color: #fff; width:100%; } #sidebar ul a:hover{ background: #444; }

结果会在浏览器的右边显示如下效果：

当然，此时还没有动态效果。要实现动态效果请看下一篇。