CSS 侧边栏的简单制作方法

1、新建一个html文件，格式选择 XHEML 1.0 。

2、在body中添加以下div：

<div id="lbox">left box</div>

<div id="bt">button</div>

<div id="rbox"><h2>right box</h2></div>

3、设置div的初始样式：

#lbox { position:fixed; top:25%; left:-90px; width:100px; height:50%; background-color:#FF0000; transition:0.5s ease-in-out;}

#rbox { position:fixed; top:25%; right:-90px; width:100px; height:50%; background-color:#FF0000; transition:0.5s ease-in-out;}

#bt { position:fixed; top:0px; right:100px; width:50px; height:50px; background-color:#FF0000;}

4、关键部分：

使用CSS中的伪类选择器，改变div的样式。

#lbox:hover { left:0px;}

#bt:hover ~ #rbox { right:0px;}

5、此处只附上图片，源码部分请读者亲自输入，多练习，培养手感。