CSS菜單:基本橫向菜單效果超炫_(tái)DIV+CSS實(shí)例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
在CSS網(wǎng)頁布局中,我們比較頭疼的問題就是如何制作質(zhì)量高的CSS菜單。今天我們向大家介紹一個(gè)實(shí)例。這是一位國(guó)外高手nundroo制作的,下面是此菜單的效果圖:
我們看此菜單的xhtml代碼:
xhtml代碼非常簡(jiǎn)潔,就是一個(gè)無序列表UL。重點(diǎn)在于應(yīng)用CSS對(duì)其表現(xiàn)進(jìn)行控制與設(shè)置。
我們看CSS代碼:
查看最終的運(yùn)行效果:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
我們看此菜單的xhtml代碼:
示例代碼 [m.dounai2.com]
<ul>
<li id="bu1"><a href="#"><span>homepage</span></a></li>
<li id="bu2"><a href="#"><span>business</span></a></li>
<li id="bu3"><a href="#"><span>personal</span></a></li>
<li id="bu4"><a href="#"><span>information</span></a></li>
</ul>
<li id="bu1"><a href="#"><span>homepage</span></a></li>
<li id="bu2"><a href="#"><span>business</span></a></li>
<li id="bu3"><a href="#"><span>personal</span></a></li>
<li id="bu4"><a href="#"><span>information</span></a></li>
</ul>
xhtml代碼非常簡(jiǎn)潔,就是一個(gè)無序列表UL。重點(diǎn)在于應(yīng)用CSS對(duì)其表現(xiàn)進(jìn)行控制與設(shè)置。
我們看CSS代碼:
示例代碼 [m.dounai2.com]
body {
margin: 26px;
padding: 0;
background: #fff url(back.png) no-repeat;
}
span {
display: none;
}
ul {
position: relative;
width: 800px;
background: url(bg_nav.png) no-repeat;
height: 113px;
list-style-type: none;
margin: 0;
padding: 0;
}
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
background: transparent;
position: absolute;
width: 110px;
height: 32px;
bottom: 0;
text-decoration: none;
}
/* adjusted values for IE6 */
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a { bottom: -1px; }
li#bu1 a { left: 21px; }
li#bu2 a { left: 122px; background: url(business_hover.gif) 0 0 no-repeat; }
li#bu3 a { left: 223px; background: url(personal_hover.gif) 0 0 no-repeat; }
li#bu4 a { left: 324px; background: url(information_hover.gif) 0 0 no-repeat; }
li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -32px; }
margin: 26px;
padding: 0;
background: #fff url(back.png) no-repeat;
}
span {
display: none;
}
ul {
position: relative;
width: 800px;
background: url(bg_nav.png) no-repeat;
height: 113px;
list-style-type: none;
margin: 0;
padding: 0;
}
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
background: transparent;
position: absolute;
width: 110px;
height: 32px;
bottom: 0;
text-decoration: none;
}
/* adjusted values for IE6 */
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a { bottom: -1px; }
li#bu1 a { left: 21px; }
li#bu2 a { left: 122px; background: url(business_hover.gif) 0 0 no-repeat; }
li#bu3 a { left: 223px; background: url(personal_hover.gif) 0 0 no-repeat; }
li#bu4 a { left: 324px; background: url(information_hover.gif) 0 0 no-repeat; }
li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -32px; }
查看最終的運(yùn)行效果:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- DivCSS布局關(guān)于分辨率與100%自適應(yīng)問題的探討!
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- CSS布局實(shí)例:一個(gè)不錯(cuò)的表格樣式
- CSS菜單實(shí)例:極致而簡(jiǎn)約的風(fēng)格
- DivCSS實(shí)例:符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用
- CSS網(wǎng)站風(fēng)格設(shè)計(jì)實(shí)例HuDong123
- 一個(gè)非常棒的DIV CSS導(dǎo)航條效果!
- CSS實(shí)例:如何讓無空格的長(zhǎng)字符在IE和FF下面實(shí)現(xiàn)自動(dòng)換行?
- css javascript圖片自動(dòng)同比例縮小并且實(shí)現(xiàn)垂直居中
- DivCSS布局實(shí)例:詳解建立Flash上面浮動(dòng)層
猜你也喜歡看這些
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實(shí)例-CSS菜單:基本橫向菜單效果超炫。