春风博客

春天里，百花香...

导航

<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 阅读(4362) 评论(0)  编辑  收藏 所属分类: HTML,CSS&JS 、Web开发


只有注册用户登录后才能发表评论。
网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.