DIVCSS菜单实例:红与黑具有立体质感的CSS菜单_DIV+CSS实例
教程Tag:暂无Tag,欢迎添加,赚取U币!
缂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗霉閿濆牜鍤夋繛宸簼閺呮繈鏌涚仦鐐殤闁告梻鏁哥槐鎾存媴閹绘帊澹曢梻浣侯攰娴滎剟顢楅·鐛礛S闂傚倸鍊峰ù鍥х暦閻㈢ǹ绐楅柟鎵閸嬶繝鏌曟径鍫濆壔婵炴垶菤閺€浠嬫倵閿濆啫濡烽柛瀣崌瀹曟帡鎮欓弻銉ユ暪闂備礁鎼ú銊╁磻閻愮儤鍊垫い鎺嗗亾闁宠鍨块幃娆撳矗婢舵ɑ锛侀梻浣规偠閸斿酣宕伴弽褜鍤曞┑鐘崇閺呮悂鏌ㄩ悤鍌涘婵犵數濮烽弫鎼佸磻閻愬搫鍨傞悹杞拌濞兼牠鎮峰▎蹇擃伀闁绘繂鐖奸弻娑㈠焺閸愵亖妲堥梺缁樻尰閿曘垽寮婚垾鎰佸悑閹肩补鈧磭顔戦梻浣瑰▕閺€杈╂暜閿熺姴钃熼柕濞炬櫆閸嬪棝鏌涚仦鍓р槈妞ゅ骏鎷� 缂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘e亾閽樻繈姊洪鈧粔瀵哥玻濡ゅ懏鐓欓梺顓ㄧ畱婢ч箖鏌ら弶鎸庡仴闁哄本鐩俊鐑筋敊閻撳寒娼荤紓鍌欒閸嬫挸顭块懜闈涘闁绘挸鍟撮弻鏇熷緞閸繂顬夐梺缁樼箥娴滎亪寮婚敐鍛斀闁圭偓娼欓锟� 闂傚倸鍊搁崐鎼佸磹妞嬪孩顐介柨鐔哄Т绾惧鏌涢弴銊ョ€柛銉e妽缂嶅洭鏌嶉崫鍕殶妞わ富鍨辩换婵嬪閿濆棛銆愰梺鍝勭墱閸撶喎鐣峰Δ鈧オ浼村醇閻斿搫骞愰梻浣规偠閸庮垶宕濆澶嬪剭闁硅揪闄勯埛鎺戭熆鐠虹尨鍔熼弫鍫ユ⒑閸濆嫯顫﹂柛濠冪墪宀h儻绠涘☉妯溾晠鏌ㄩ弮鍌滃笡妞ゃ儲绋撶槐鎾诲磼濞嗘垵濡介梺鍝ュ仜椤兘鐛箛娑欐櫢闁跨噦鎷� 闂傚倸鍊搁崐椋庣矆娓氣偓楠炴牠顢曢敃鈧悿顕€鏌eΔ鈧悧濠囧矗韫囨稒鐓欑紓浣靛灩閺嬫稒淇婇悙鎵煓闁哄备鈧剚鍚嬮幖绮光偓鑼晼闂備礁鎲¢〃鍡欏枈瀹ュ洦宕叉繛鎴欏灩楠炪垺淇婇婵愬殭闂傚绉撮埞鎴︻敋閸℃瑧蓱闂佸憡姊归〃濠囧春閳ь剚銇勯幒鎴濇灓婵炲吋鍔欓弻鐔碱敊閼测晛鐓熼悗瑙勬礃濞茬喖寮婚崱妤婂悑闁告侗鍨抽崢顒勬⒒娴h姤纭堕柛锝忕畵楠炲繘鏁撻敓锟�,闂傚倸鍊搁崐宄懊归崶顒佸剭妞ゆ劧绠戠粈瀣亜閹扳晛鐏╃悮姗€姊绘担绛嬪殭婵﹫绠撻敐鐐村緞鐎n剛顔曟繝鐢靛Т閸嬪棝宕甸弴銏$厱妞ゆ劧绲剧粈鈧紓浣插亾闁告劏鏂傛禍婊堟煛閸屾氨浠㈤柟顔藉灦閵囧嫯绠涢弴鐐寸€剧紓浣虹帛閻╊垶鐛€n喗鍊烽柡澶嬪灩濞堛倝姊绘担鍛靛綊顢栭崱娑樼闁搞儜灞剧稁闂佸憡绻傜€氀囧几鎼淬劍鐓欐い鏍ф鐎氼喗绂嶉鍫熲拻濞达絽鎲¢崯鐐烘煟閻旀潙鍔ら柟骞垮灩铻e〒姘煎灠濞堛劍绻濋悽闈浶g痪鏉跨Ч瀵煡骞栨担鍦弳闂佺粯娲栭崐鍦偓姘炬嫹!
运用UL及LI构建菜单,不但速度上比较快,而且语义更明确,对搜索引擎也非常友好,但很多朋友认为制作起来比较烦,其实不然,CSS菜单的制作其实是非常简单的,今天的这款菜单思路非常简单,但效果还算不错,看下面的效果图:

我们看今天这款菜单的制作过程,首先看看XHTML代码:
示例代码 [www.mb5u.com]
<ul id="menu">
<li><a href="http://www.mb5u.com/" title="">MB5U.com首页</a></li>
<li class="current"><a href="http://www.mb5u.com/" title="">Div CSS教程</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS布局实例</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS2.0教程</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS酷站欣赏</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS模板下载</a></li>
</ul>
<li><a href="http://www.mb5u.com/" title="">MB5U.com首页</a></li>
<li class="current"><a href="http://www.mb5u.com/" title="">Div CSS教程</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS布局实例</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS2.0教程</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS酷站欣赏</a></li>
<li><a href="http://www.mb5u.com/" title="">CSS模板下载</a></li>
</ul>
没有什么非凡之处,需要注重的是我们为第二个列表项“Div CSS教程”指定了一个类class="current"。这是我们用来让CSS精确的选择到当前页效果的钩子。下面我们逐一看CSS编码:
示例代码 [www.mb5u.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,加粗,去除装饰线,边距与填充均为零。
设置body的背景色为灰色#ccc。
示例代码 [www.mb5u.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;
}
设置Ul即#menu的样式,去除列表项预设标记,设置边框为一象素的白色实线,上下边距为50px,左右边距为自动,实现了菜单的水平居中对齐,设置宽与高分别是:770px、30px。溢出为隐藏,设置背景色为黑色,背景图片为mb5u.com_b.png,位于0 0,水平方向重复。
示例代码 [www.mb5u.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;
}
列表项li的样式设置,右边框一象素的白色实线,向左浮动。这样设置即实现了菜单有了一个闭合的白线区域,而且浮动让菜单水平方向排列。
菜单链接A的样式,设置为块元素,文字居中对齐,文字颜色为白色,行高为30px,实现了文字的垂直居中对齐,填充设置为上下0,左右10px,使得文字与左右边线有一定的距离。
示例代码 [www.mb5u.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;
}
设置链接A的悬停样式,以及当前页的样式。请注重,这两种状态下它们的表现是一样的,所以我们用群组选择器:“#menu li a:hover,#menu li.current”一次性设置。背景色为白色,背景图片为“mb5u.com_a.png”,位于0 0,水平方向重复。
好了,致此我们这款菜单的制作就结束了.

相关DIV+CSS实例:
- 相关链接:
- 教程说明:
DIV+CSS实例-DIVCSS菜单实例:红与黑具有立体质感的CSS菜单
。