亚洲日韩精品A∨片无码加勒比,亚洲AV成人影视在线观看,亚洲一级毛片在线播放

按鈕按下效果的左側導航欄實現

在“http://neic.usgs.gov/neis/qed/”看到了一個不錯的按鈕按下效果的左側導航欄，自己模擬實現了一個，效果如下，目前在ie下效果可以，但FireFox下走形，以后再調吧：

一。左菜單右內容的實現。
本例中使用一個虛表格實現了左右兩列的效果，代碼如下：

<body>

<jsp:include page="/web/page/branch/header.jsp"/>

</div>

<tr>

<jsp:include page="/web/page/branch/menubar.jsp"/>

</div>

</td>

<td>

內容。。。。

</div>

</td>

</tr>

</table>

</div>

<jsp:include page="/web/page/branch/footer.jsp"/>

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

以上

posted on 2008-05-23 13:16 sitinspring 閱讀(4387) 評論(0) 編輯收藏所屬分類: HTML,CSS&JS 、Web開發

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 樹狀側邊菜單欄示例滑動側邊菜單欄示例球拍式導航菜單效果的實現四種CSS鏈接按鈕示例使用CSS設置表格二使用CSS設置表格使用無序列表制作導航菜單 CSS固定寬度兩欄居中示例 CSS可變寬度兩欄式布局例子按鈕按下效果的左側導航欄實現

春風博客

導航

統計

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

按鈕按下效果的左側導航欄實現