CSS 侧边栏的简单制作方法

更新: 2016-03-21 07:54 编辑:生活经验

本教程将简单介绍如何用CSS样式来制作网页中的侧边栏。

新建一个html文件,格式选择 XHEML 1.0 。

CSS 侧边栏的简单制作方法

在body中添加以下div:

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

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

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

设置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;}

关键部分:

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

#lbox:hover { left:0px;}

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

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

CSS 侧边栏的简单制作方法