|
在“http://neic./neis/qed/”看到了一個(gè)不錯(cuò)的按鈕按下效果的左側(cè)導(dǎo)航欄，自己模擬實(shí)現(xiàn)了一個(gè)，效果如下，目前在ie下效果可以，但FireFox下走形，以后再調(diào)吧：
 一。左菜單右內(nèi)容的實(shí)現(xiàn)。 本例中使用一個(gè)虛表格實(shí)現(xiàn)了左右兩列的效果，代碼如下：  <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"> 內(nèi)容。。。。 </div> </td> </tr> </table> </div> <div id="footer"> <jsp:include page="/web/page/branch/footer.jsp"/> </div> </div></body>二。CSS部分設(shè)置代碼。 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 以上 |
|
|
