日日夜夜综合,亚洲精品播放,91av一区二区三区

按鈕按下效果的左側導航欄實現(xiàn)

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

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

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

以上

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

新用戶注冊刷新評論列表


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




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

春風博客

導航

統(tǒng)計

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

按鈕按下效果的左側導航欄實現(xiàn)