本教程将简单介绍如何用CSS样式来制作网页中的侧边栏。
工具/原料
Dreamwear CS6
方法/步骤
1
新建一个html文件，格式选择 XHEML 1.0 。
2
在body中添加以下div：
left box
button
right box
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
此处只附上图片，源码部分请读者亲自输入，多练习，培养手感。
上一篇：减肥饮食的一些经验