龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

CSS菜单:明快清新的格调 阐述CSS当前页效果的实现

时间:2012-12-31 10:44来源:未知 作者:admin 点击:
分享到:
> 我们今天所要讲述的依然是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 页
精彩图集

赞助商链接