和风细雨

世上本无难事,心以为难,斯乃真难。苟不存一难之见于心,则运用之术自出。

CSS实现的垂直导航栏

效果图:


页面代码:
<div id="category">
    
<h1>CLass1</h1>
        
<h2>title1</h2>
        
<h2>title2</h2>
        
<h2>title3</h2>
    
<h1>CLass2</h1>
        
<h2>title12</h2>
        
<h2>title22</h2>
        
<h2>title32</h2>        
    
<h1>CLass3</h1>
        
<h2>title13</h2>
        
<h2>title23</h2>
        
<h2>title33</h2>
</div>

CSS代码:
#category{
    width
:100px;
    border-right
:1px solid #c5c6c4;
    border-bottom
:1px solid #c5c6c4;
    border-left
:1px solid #c5c6c4;
}

#category h1
{
    margin
:0px;
    padding
:4px;
    font-size
:12px;
    font-weight
:bold;
    border-top
:1px solid #c5c6c4;
    background-color
: #f4f4f4;
}

#category h2
{
    margin
:0px;
    padding
:4px;
    font-size
:12px;
    font-weight
:normal;
}

以上。

posted on 2008-02-22 08:48 和风细雨 阅读(738) 评论(0)  编辑  收藏 所属分类: CSS


只有注册用户登录后才能发表评论。


网站导航: