AI闁诲繐绻愮换妤佺閿燂拷 闂佺厧鐤囧Λ鍕疮閹炬潙顕辨慨妯块哺閺嗭拷
闂佺硶鏅濋崰搴ㄥ箖閿燂拷
闂佽浜介崝蹇撶暦閿燂拷CSS实例教程：红蓝炫CSS横向菜单_DIV+CSS实例
教程Tag：暂无Tag,欢迎添加,赚取U币!
缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹 缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷 闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!
效果图如下：
HTML非常简单：
示例代码 [www.mb5u.com]
<ul id="nav">
<li><a href="http://www.mb5u.com/">Div CSS教程</a></li>
<li><a href="http://www.mb5u.com/" id="current">CSS布局实例</a></li>
<li><a href="http://www.mb5u.com/">CSS2.0教程</a></li>
<li><a href="http://www.mb5u.com/">CSS酷站欣赏</a></li>
<li><a href="http://www.mb5u.com/">CSS模板下载</a></li>
<li><a href="http://www.mb5u.com/">CSS在线手册</a></li>
<li><a href="http://www.mb5u.com/">Web标准</a></li>
<li><a href="http://www.mb5u.com/">XHTML教程</a></li>
</ul>
<li><a href="http://www.mb5u.com/">Div CSS教程</a></li>
<li><a href="http://www.mb5u.com/" id="current">CSS布局实例</a></li>
<li><a href="http://www.mb5u.com/">CSS2.0教程</a></li>
<li><a href="http://www.mb5u.com/">CSS酷站欣赏</a></li>
<li><a href="http://www.mb5u.com/">CSS模板下载</a></li>
<li><a href="http://www.mb5u.com/">CSS在线手册</a></li>
<li><a href="http://www.mb5u.com/">Web标准</a></li>
<li><a href="http://www.mb5u.com/">XHTML教程</a></li>
</ul>
我们主要学习理解CSS代码中的一些知识：
示例代码 [www.mb5u.com]
* {
font-size:12px;
text-align:center;
}
#nav {
width:683px;
margin:20px auto 0 auto;
border:1px solid #ccc;
border-right:none;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
padding:3px 10px;
text-decoration: none;
color:#bbb;
background:#f0f0f0;
border-right:1px solid #ccc;
}
#nav li a:hover {
color:#fff;
background:#06c;
}
#nav li a#current {
color:#fff;
background:#f60;
}
font-size:12px;
text-align:center;
}
#nav {
width:683px;
margin:20px auto 0 auto;
border:1px solid #ccc;
border-right:none;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
padding:3px 10px;
text-decoration: none;
color:#bbb;
background:#f0f0f0;
border-right:1px solid #ccc;
}
#nav li a:hover {
color:#fff;
background:#06c;
}
#nav li a#current {
color:#fff;
background:#f60;
}
看这一段代码，或许你已经非常熟悉了，前面的三个案例MB5U.com这方面的知识已经讲了很多。我们看与前面的案例所不同的地方：
示例代码 [www.mb5u.com]
#nav {
border:1px solid #ccc;
border-right:none;
}
border:1px solid #ccc;
border-right:none;
}
无序列表UL的边框为一象素的实线，颜色是#ccc，但是右边框线为无。
这是为我们的菜单元素的边框留下位置。
示例代码 [www.mb5u.com]
#nav li a:link,#nav li a:visited {
border-right:1px solid #ccc;
}
border-right:1px solid #ccc;
}
链接元素，我们设置了右边框为一象素的实线，颜色是#ccc。
这就形成了一个封闭的区域作为链接元素的容器。看上去还不错。
示例代码 [www.mb5u.com]
#nav li a#current {
color:#fff;
background:#f60;
}
color:#fff;
background:#f60;
}
这表示链接元素中id为current的属性。文字颜色是#fff，背景色是#f60。
这一设置是我们应该记住的东西，它可以设置为当前页面的菜单的id。例如我们现在位于MB5U.com的Div CSS教程这一版块。我们就将“Div CSS教程”菜单的id设为current。它就会以区别于其它菜单的样式来显示。这样的设置还有其它的方法，可以给body赋予一个id。即可以控制整个页面中需要标注的部分，这样的知识我们在以后的MB5U.com的文章是再具体的介绍。
我们看最终的运行效果：
代码调试框 [www.mb5u.com]相关DIV+CSS实例：
- 相关链接：
- 教程说明：
DIV+CSS实例-CSS实例教程：红蓝炫CSS横向菜单
。