论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:53

。CSS横向菜单的制作大家或许已经都能把握了,但小小的菜单包含了许多的变化,我们完全可以将它做的更漂亮!


  我们今天所要讲述的依然是CSS横向菜单的制作,这与前面的例子有所区别,我并不仅要看到视觉上的变化,我们还要让它更实用,我们通过这个小案例来向你阐明CSS当前页效果是如何实现的。让我们开始吧!

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<body id="home">
<ul id="nav">
<li><a href="index.html" id="cur1">21shipin.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代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* {
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;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:1px;
height:26px;
line-height:26px;
padding:0 8px;
text-decoration: none;
color:#333;
background:url(link.jpg);
}
#nav li a:hover {
color:#000;
background:url(hover.jpg);
}
#home #nav li a#cur1,#divcss #nav li a#cur2,#csslayout #nav li a#cur3,#css20 #nav li a#cur4,#websites #nav li a#cur5,#moban #nav li a#cur6 {
color:#fff;
background:url(current.jpg);
}
#topline {
width:100%;
height:3px;
overflow:hidden;
background:#06f;
}

  第一区块的整体布局声明;第二区块是body的背景色,或许有人会说,白色可以不设置了,不过需要提醒各位,有些浏览器默认的body颜色不一定是白色哦,还是别嫌麻烦设置一下#fff;第三区块设置菜单无序列表ul的宽度及边距。第四区块列表项的有关声明。

  第五区块就轮到链接元素了。向左浮动,右边距为1px,使菜单之间有一定的间隔,高度26px,行高26px,这两项声明,一方面是设置了菜单的高度,另一方面行距的设置可以让文字垂直居中对齐了,假如缺少了行高,看上去就不那么美妙了。声明填充,上下是0px、左右是8px,上下填充不用设置,因为已经有行高让文字与外边产生了距离,声明左右填充是在水平方向上让文字与外边有一定的距离。

  去除链接文字下划线,链接文字的颜色为#333深灰色。设置背景图片为link.jpg。此例中背景图片就是一个渐变色的区块,我们不提倡过多的使用CSS滤镜实现这样的效果,对于这样的视觉效果,个人认为用背景图片比较好,一方面是提高了代码执行效率,另一方面图片文件体积小于1K(三个文件累积不大于1K),不会占用带宽。

  第六区域设置了链接我激活hover样式,文字颜色变成了黑色#000。背景图片也变成了hover.jpg。

  第七区域是此例的重点了。CSS当前页效果就是通过它来声明的,选择符我们罗列了一大圈,请注重:这六个选择符所对应的元素应用的样式是一致的,因为他们是通过“,”分隔的,这么长的字母或许你看了感觉眼花,我们分解如下:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#home #nav li a#cur1,
#divcss #nav li a#cur2,
#csslayout #nav li a#cur3,
#css20 #nav li a#cur4,
#websites #nav li a#cur5,
#moban #nav li a#cur6

  我们应该能理解这些选择符的含意,拿第一个来说:表示在id为home下面的一个id为nav的列表项的a的cur1。这样我们就精确的命中目标了!

  其它的五个含义与之类似,我们发现,除了第一个(#home)与最末(#cur1),选择符之间的结构是一样的。在上面我们给body命名一个id为home。而且我们为不同的链接赋予了不同的id,从cur1至cur6。

  这时候它们就发挥作用了。这就表示在body的id为home的这一页,菜单中id为cur1的链接所应用的样式。与此类推:在body的id为divcss的这一页,菜单中id为cur2链接所应用的样式;在body的id为csslayout的这一页,菜单中id为cur3链接所应用的样式……

  我们只需要改变body的id,再通过CSS的设置,就可以形成了菜单的当前页效果。当然,你也需要在HTML编写之初,就给你的菜单赋予一个id。

  这在动态页的制作中是非常有用的。例如我们将菜单部分制作成一个独立的*.asp文件或者直接写在数据库中,然后在需要的页面直接include这个文件或读取数据库。要实现当前页的效果,我们只需要改变一个body的id就全部搞定了。这就是当前页效果的思路。

  最后一个区块我们只是加了一个装饰性的小色条,无须多说,只是需要提醒你的是overflow:hidden;的设置,假如没有这一条声明,我们的小色条可能不是这样的最小高度。

  
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058