CSS菜单:明快清新的格调 阐述CSS当前页效果的实现
> 我们今天所要讲述的依然是CSS横向菜单的制作,这与前面的例子有所区别,我并不仅要看到视觉上的变化,我们还要让它更实用,我们通过这个小案例来向你阐明CSS当前页效果是如何实
>
我们今天所要讲述的依然是CSS横向菜单的制作,这与前面的例子有所区别,我并不仅要看到视觉上的变化,我们还要让它更实用,我们通过这个小案例来向你阐明CSS当前页效果是如何实现的。让我们开始吧!
<body id="home">
<ul id="nav">
<li><a href="index.html" id="cur1">fun52.com 首页</a></li>
<li><a href="c2.html" id="cur2">Div+CSS教程</a></li>
<li><a href="c3.html" id="cur3">CSS布局实例</a></li>
<li><a href="c4.html" id="cur4">CSS2.0教程</a></li>
<li><a href="c5.html" id="cur5">CSS酷站欣赏</a></li>
<li><a href="c6.html" id="cur6">CSS模板下载</a></li>
</ul>
<div id="topline"></div>
这是HTML代码,除了一个菜单的无序列表UL,还多了一些东西,下面的topline是一个分隔线,我们只是设置一下背景色,我们就不去讨论了;我们发现给body命名了一个id!它的作用就是用来制作当前页效果的,是让选择符精确的找到目标。我们在菜单无序列表内的链接元素都命名了不同的id,从cur1至cur6。我们在下面详细的讨论它究竟如何发挥作用。
看CSS代码: * {
margin:0;
padding:0;
font-size:12px;
text-align:center;
}
body {
background:#ffff;
}
#nav {
width:700px;
margin:20px auto 0 auto;
}
#nav li {
display:inline;
list-style-type:none;
第 1 2 3 页
<ul id="nav">
<li><a href="index.html" id="cur1">fun52.com 首页</a></li>
<li><a href="c2.html" id="cur2">Div+CSS教程</a></li>
<li><a href="c3.html" id="cur3">CSS布局实例</a></li>
<li><a href="c4.html" id="cur4">CSS2.0教程</a></li>
<li><a href="c5.html" id="cur5">CSS酷站欣赏</a></li>
<li><a href="c6.html" id="cur6">CSS模板下载</a></li>
</ul>
<div id="topline"></div>
这是HTML代码,除了一个菜单的无序列表UL,还多了一些东西,下面的topline是一个分隔线,我们只是设置一下背景色,我们就不去讨论了;我们发现给body命名了一个id!它的作用就是用来制作当前页效果的,是让选择符精确的找到目标。我们在菜单无序列表内的链接元素都命名了不同的id,从cur1至cur6。我们在下面详细的讨论它究竟如何发挥作用。
看CSS代码: * {
margin:0;
padding:0;
font-size:12px;
text-align:center;
}
body {
background:#ffff;
}
#nav {
width:700px;
margin:20px auto 0 auto;
}
#nav li {
display:inline;
list-style-type:none;
第 1 2 3 页
精彩图集
精彩文章