亚洲成人精品一区二区三区,高清亚洲成在人网站天堂,日本精品二区

按鈕按下效果的左側(cè)導(dǎo)航欄實(shí)現(xiàn)

在“http://neic.usgs.gov/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>

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

</div>

<tr>

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

</div>

</td>

<td>

內(nèi)容。。。。

</div>

</td>

</tr>

</table>

</div>

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

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

以上

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

新用戶注冊(cè) 刷新評(píng)論列表


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




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

春風(fēng)博客

導(dǎo)航

統(tǒng)計(jì)

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個(gè)人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

按鈕按下效果的左側(cè)導(dǎo)航欄實(shí)現(xiàn)