|
在“http://neic./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./Files/sitinspring/PressButtonMenu20080523130024.rar 以上 |
|
|
