亚洲欧美成人在线,欧美18xxxxx,日本高清一区

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

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

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

一。左菜单叛_��容的实现�?br /> 本例中��用一个虚表格实现了左右两列的效果�Q�代码如下：

<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">
                            内容。。。�?br />                         div>
                    td>
                tr>
            table>
        div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        div>
    div>
body>

二。CSS部分讄��代码�?br />

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.aygfsteel.com/Files/sitinspring/PressButtonMenu20080523130024.rar

以上

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

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

摘要: 滑动菜单多用于菜单项目较多且菜单可归�U�_��数�c�d��的场�?点击�c�d��滑动条会上下滑动以隐藏或昄��其下的子菜单.其典型应用便是Visio中滑动菜单样�?本�h在Web中实��C��c�M��的控�?拿出来希望和大家一起交��一�? 阅读全文

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

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

摘要: TabView是许多可视化�~�程环境提供的常见组�?它通过选项卡将内容分类,因此能在紧凑的空间内昄��众多内容,�q�个特点使得它在可视化编�E�环境中很常�?
随着Web的发�?Web��面元素也开始了�l��g化的历程,TabView也不例外.�Ҏ��Extjs的组件最值得�U�道,只是��g��需要一定的旉��来钻�?
本�h闲暇之余也实��C��自己的TabView,目前在IE下运行正常和FireFox均运行正�?�q�里贴出来希望和大家一��h��? 阅读全文

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

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

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

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

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

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

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