BlogJava-如坐春风-随笔分类-CSS

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

如坐春风 — Fri, 23 May 2008 05:16:00 GMT

在“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

以上

如坐春风 2008-05-23 13:16 发表评论

使用CSS实现滑动菜单栏

如坐春风 — Thu, 08 May 2008 06:20:00 GMT

摘要: 滑动菜单多用于菜单项目较多且菜单可归纳到少数类别的场合,点击类别滑动条会上下滑动以隐藏或显示其下的子菜单.其典型应用便是Visio中滑动菜单样式.本人在Web中实现了类似的控件,拿出来希望和大家一起交流一下. 阅读全文

如坐春风 2008-05-08 14:20 发表评论

Web页面中选项卡Tabview的实现

如坐春风 — Mon, 05 May 2008 08:47:00 GMT

摘要: TabView是许多可视化编程环境提供的常见组件,它通过选项卡将内容分类,因此能在紧凑的空间内显示众多内容,这个特点使得它在可视化编程环境中很常见.
随着Web的发展,Web页面元素也开始了组件化的历程,TabView也不例外.对此Extjs的组件最值得称道,只是似乎需要一定的时间来钻研.
本人闲暇之余也实现了自己的TabView,目前在IE下运行正常和FireFox均运行正常,这里贴出来希望和大家一起探讨. 阅读全文

如坐春风 2008-05-05 16:47 发表评论

使用CSS实现侧边Tab菜单栏

如坐春风 — Mon, 05 May 2008 07:29:00 GMT

摘要: 侧边Tab菜单栏与一般菜单栏的区别在于菜单项与左边内容栏的贯通效果,这样做的好处在于用户通过菜单就能看出当前所在的页面,无需记忆或在页面上查找.Gmail和Google Group都采取了这种直观式的设计.
如果采用表格实现首页的效果比较困难,而使用CSS对DIV和无序列表加以限制就比较容易了,本文将逐步讲述这一过程. 阅读全文

如坐春风 2008-05-05 15:29 发表评论

使用无序列表实现纵向和横向菜单

如坐春风 — Sun, 23 Mar 2008 03:34:00 GMT

摘要: 使用无序列表实现纵向和横向菜单，无序列表UL在网页中除显示树状结构外，最常用的用途就是作为导航栏的菜单使用，而它的样式通过CSS来设定，这种把样式与数据分离的做法既能有丰富多彩的效果，又易于变换，值得好好研究一下。
阅读全文

如坐春风 2008-03-23 11:34 发表评论