DIVCSS菜單實(shí)例:紅與黑具有立體質(zhì)感的CSS菜單_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
運(yùn)用UL及LI構(gòu)建菜單,不但速度上比較快,而且語(yǔ)義更明確,對(duì)搜索引擎也非常友好,但很多朋友認(rèn)為制作起來(lái)比較煩,其實(shí)不然,CSS菜單的制作其實(shí)是非常簡(jiǎn)單的,今天的這款菜單思路非常簡(jiǎn)單,但效果還算不錯(cuò),看下面的效果圖:
我們看今天這款菜單的制作過(guò)程,首先看看XHTML代碼:
示例代碼 [m.dounai2.com]
<ul id="menu">
<li><a href="http://m.dounai2.com/" title="">MB5U.com首頁(yè)</a></li>
<li class="current"><a href="http://m.dounai2.com/" title="">Div CSS教程</a></li>
<li><a href="http://m.dounai2.com/" title="">CSS布局實(shí)例</a></li>
<li><a href="http://m.dounai2.com/" title="">CSS2.0教程</a></li>
<li><a href="http://m.dounai2.com/" title="">CSS酷站欣賞</a></li>
<li><a href="http://m.dounai2.com/" title="">CSS模板下載</a></li>
</ul>
<li><a href="http://m.dounai2.com/" title="">MB5U.com首頁(yè)</a></li>
<li class="current"><a href="http://m.dounai2.com/" title="">Div CSS教程</a></li>
<li><a href="http://m.dounai2.com/" title="">CSS布局實(shí)例</a></li>
<li><a href="http://m.dounai2.com/" title="">CSS2.0教程</a></li>
<li><a href="http://m.dounai2.com/" title="">CSS酷站欣賞</a></li>
<li><a href="http://m.dounai2.com/" title="">CSS模板下載</a></li>
</ul>
沒(méi)有什么非凡之處,需要注重的是我們?yōu)榈诙䝼(gè)列表項(xiàng)“Div CSS教程”指定了一個(gè)類class="current"。這是我們用來(lái)讓CSS精確的選擇到當(dāng)前頁(yè)效果的鉤子。下面我們逐一看CSS編碼:
示例代碼 [m.dounai2.com]
* {
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body {
background:#ccc;
}
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body {
background:#ccc;
}
整體布局聲明:文字大小為13px,加粗,去除裝飾線,邊距與填充均為零。
設(shè)置body的背景色為灰色#ccc。
示例代碼 [m.dounai2.com]
#menu {
list-style-type: none;
border:1px solid #fff;
margin:50px auto;
width:770px;
height:30px;
overflow:hidden;
background:#000 url(mb5u.com_b.png) 0 0 repeat-x;
}
list-style-type: none;
border:1px solid #fff;
margin:50px auto;
width:770px;
height:30px;
overflow:hidden;
background:#000 url(mb5u.com_b.png) 0 0 repeat-x;
}
設(shè)置Ul即#menu的樣式,去除列表項(xiàng)預(yù)設(shè)標(biāo)記,設(shè)置邊框?yàn)橐幌笏氐陌咨珜?shí)線,上下邊距為50px,左右邊距為自動(dòng),實(shí)現(xiàn)了菜單的水平居中對(duì)齊,設(shè)置寬與高分別是:770px、30px。溢出為隱藏,設(shè)置背景色為黑色,背景圖片為mb5u.com_b.png,位于0 0,水平方向重復(fù)。
示例代碼 [m.dounai2.com]
#menu li {
border-right:1px solid #fff;
float:left;
}
#menu li a {
display:block;
text-align:center;
color:#fff;
line-height:30px;
padding:0 10px;
}
border-right:1px solid #fff;
float:left;
}
#menu li a {
display:block;
text-align:center;
color:#fff;
line-height:30px;
padding:0 10px;
}
列表項(xiàng)li的樣式設(shè)置,右邊框一象素的白色實(shí)線,向左浮動(dòng)。這樣設(shè)置即實(shí)現(xiàn)了菜單有了一個(gè)閉合的白線區(qū)域,而且浮動(dòng)讓菜單水平方向排列。
菜單鏈接A的樣式,設(shè)置為塊元素,文字居中對(duì)齊,文字顏色為白色,行高為30px,實(shí)現(xiàn)了文字的垂直居中對(duì)齊,填充設(shè)置為上下0,左右10px,使得文字與左右邊線有一定的距離。
示例代碼 [m.dounai2.com]
#menu li a:hover,#menu li.current {
background:#fff url(mb5u.com_a.png) 0 0 repeat-x;
}
background:#fff url(mb5u.com_a.png) 0 0 repeat-x;
}
設(shè)置鏈接A的懸停樣式,以及當(dāng)前頁(yè)的樣式。請(qǐng)注重,這兩種狀態(tài)下它們的表現(xiàn)是一樣的,所以我們用群組選擇器:“#menu li a:hover,#menu li.current”一次性設(shè)置。背景色為白色,背景圖片為“mb5u.com_a.png”,位于0 0,水平方向重復(fù)。
好了,致此我們這款菜單的制作就結(jié)束了.
相關(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)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- CSS布局實(shí)例:一個(gè)不錯(cuò)的表格樣式
- 實(shí)現(xiàn)三列布局相同高度的解決辦法
- CSS實(shí)例:用fieldset、legend實(shí)現(xiàn)文字寫在邊線上的效果
- CSS圓角邊框純CSS制作
- DivCSS實(shí)例:符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用
- CSS中以圖片替換文字的表現(xiàn)方法
- 仿谷歌google的搜索框下拉提示列表效果
- DivCSS布局關(guān)于分辨率與100%自適應(yīng)問(wèn)題的探討!
- 使用fieldset、label標(biāo)簽制作form表單
- 用背景圖片實(shí)現(xiàn)CSS柱狀圖表一例
猜你也喜歡看這些
- WEB標(biāo)準(zhǔn)網(wǎng)頁(yè)布局中HTML結(jié)構(gòu)化漫談
- DIVCSS網(wǎng)頁(yè)布局:實(shí)現(xiàn)讓多個(gè)DIV排列時(shí)居中
- 用css制作的導(dǎo)航菜單
- DIV+CSS是什么意思?實(shí)質(zhì)是什么?
- DivCSS教程:blockelement與inlineelement元素詳解
- dreamweaver套用源格式,將混亂無(wú)序的代碼變得整潔
- IE對(duì)CSS的渲染引擎hasLayout
- CSS網(wǎng)頁(yè)布局時(shí)常犯的幾種小錯(cuò)誤
- 加入收藏夾代碼(兼容多個(gè)瀏覽器)
- css樣式表定義時(shí)*與body的區(qū)別
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-DIVCSS菜單實(shí)例:紅與黑具有立體質(zhì)感的CSS菜單。