春风博客

春天里,百花香...

导航

<2008年5月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

按钮按下效果的左侧导航栏实现

在“http://neic.usgs.gov/neis/qed/”看到了一个不错的按钮按下效果的左侧导航栏,自己模拟实现了一个,效果如下,目前在ie下效果可以,但FireFox下走形,以后再调吧:


一。左菜单右内容的实现。
本例中使用一个虚表格实现了左右两列的效果,代码如下:
<body>
    
<div id="bodyDiv">
        
<div id="header">
            
<jsp:include page="/web/page/branch/header.jsp"/>
        
</div>
        
<div id="content">
            
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
                
<tr>
                    
<td width="200" valign="top" bgcolor="#d4e4f0">
                        
<div id="leftMenu">
                            
<jsp:include page="/web/page/branch/menubar.jsp"/>
                        
</div>
                    
</td>
                    
<td>
                        
<div id="rightContent">
                            内容。。。。
                        
</div>
                    
</td>
                
</tr>
            
</table>
        
</div>
        
<div id="footer">
            
<jsp:include page="/web/page/branch/footer.jsp"/>
        
</div>
    
</div>
</body>

二。CSS部分设置代码。
body{
    margin
:2px;
    text-align
:center;
    background
:#7b869a;
}


#bodyDiv
{
    margin
:0 auto;
    text-align
:left;
    background
:#ffffff;
}


#header
{
    height
:100px;
}


#content
{
    height
:500px;
}


#rightContent
{
    height
:500px;
    padding
:20px;
}


#leftMenu
{
    height
:500px;
    background
:#d4e4f0;
    border-bottom
:0px solid #000000;
    border-left
:0px solid #000000;
    border-right
:0px solid #000000;
    border-top
:0px solid #bad5e8;
}


#footer
{
    clear
:both;
    background
:#7b869a;
}


ul.pressEffectUl
{    
    color
: #000000; 
    margin
:0px;    
    padding
:0px;
    list-style-type
:none;
    background
:#d4e4f0;
}


ul.pressEffectUl a
{
    padding-left
:20px;
    text-decoration
:none;
    color
:#8d4f10;
    width
:200px;
    border-left
:0px solid #000000;
    border-right
:0px solid #000000;
    border-top
:1px solid #ffffff;
    border-bottom
:1px solid #bad5e8;
}


ul.pressEffectUl a.currentLink
{
    padding
:2px;
    padding-left
:20px;
    text-decoration
:none;
    color
:#000000;
    background
:#ffffff;
    width
:200px;
    border-left
:0px solid #000000;
    border-right
:0px solid #000000;
    border-top
:1px solid #ffffff;
    border-bottom
:0px solid #bad5e8;
}


ul.pressEffectUl a:hover
{
    color
:#000033;
    background
:#e1effa;
    border-left
:0px solid #000000;
    border-right
:0px solid #000000;
    border-top
:1px solid #e1effa;
    border-bottom
:1px solid #e1effa;
}


h1 
{
    font-size
: 18px; 
    margin
: 10px 0px 5px; 
    color
: #eeeeee; 
    text-align
: center;
}


h2 
{
    font-size
: 24px; 
    margin
: 10px 0px 5px; 
    color
: #000000; 
    text-align
: center;
}


.feedbackShow
{
visibility
: visible;
}


.feedbackHide
{
visibility
: hidden;
}

三。代码下载;
http://www.blogjava.net/Files/sitinspring/PressButtonMenu20080523130024.rar 

以上

posted on 2008-05-23 13:16 sitinspring 阅读(4374) 评论(0)  编辑  收藏 所属分类: HTML,CSS&JSWeb开发


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


网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.