CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版

ttx9n · 发表于 2007-9-13 22:44:43

虽然完成了标签式导航，但是广场状的导航似乎并不能够顺应现在的设计潮流，其实导航不仅可以使用css的颜色来定义，同样可以采用精心设计的图片或其它元素来构建导航，在这里我们将开始改善导航的设计，使它成为更加出色的标签效果。
　　我们将考虑去掉单一的方块状背景元素，使用带色彩的圆角标签来完成我们的设计。不过从这个改进中能够体会到css设计的另一个优势，就是可以不需要修改结构代码，只需要修改样式，便可以完成改进，所以这里可以直接看看css代码的设计：
<style>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 84px; ; color:#ffffff;}
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;}
</style>

从以上代码可以看出，我们去掉了背景色的设定，给页面的body标签加上了黑色的背景，a对象被我们放置了重新制作的gif图片，包含普通、鼠标移上、当前页三种交互状态。但是你们会现，这三种状态的图片在一张上。为什么呢？这里采用软件里的一种设计方式，一方面使用图片管理，另一方面在网页下载的时候只用下载一个图片就行了。而把这个图片设置为背景图片时只需要用css控制图片的位置就可以了，看来css功能真是太强大了。
　　仅仅通过修改css代码，就更换了导航的外观，试想一下在大型网站的应用当中，如果我们对某一个通用模块不太满意，也不必再去修改所有的页面了，只能改动样式就实现了。css真正让您的设计变得轻松起来！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
body { background-color:#000000;} 
#nav { height:30px; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;} 
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 84px; ; color:#ffffff;} 
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;} 
</style> 
</head> 
<body> 
  <ul id="nav"> 
    <li><a href="https://www.jb51.net/index.asp">主页</a></li> 
    <li><a id="current" href="https://www.jb51.net/Sort/List_4.html">DIV+CSS教程</a></li> 
    <li><a href="https://www.jb51.net/Sort/List_5.html">常用代码</a></li> 
    <li><a href="https://www.jb51.net/Sort/List_6.html">水晶图标</a></li> 
    <li><a href="https://www.jb51.net/Sort/List_7.html">幻灯图片</a></li> 
    <li><a href="https://www.jb51.net/Sort/List_10.html">软件下载</a></li> 
    <li><a href="https://www.jb51.net/css2/">CSS2.0实用手册</a></li> 
  </ul> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

5cf304mn2 · 发表于 2023-5-18 17:25:20

hi哦和烦恼农家女

v3sfsi · 发表于 2023-8-30 11:30:06

天天源码社区。。。。

bp5jgbcnt · 发表于 2023-9-8 00:52:42

啊，数码撒飒飒飒飒

a971560 · 发表于 2023-10-15 21:29:00

下载来瞧瞧

95nd4ba · 发表于 2023-10-22 17:21:25

66666666666666666666

64000928 · 发表于 2023-12-6 04:52:19

还可以不错

i3x3r3 · 发表于 2024-3-11 05:15:03

很好，谢谢分享

醉梦娱乐网 · 发表于 2024-6-10 19:24:24

哟哟哟哟哟以偶

qq303604905 · 发表于 2024-7-18 00:34:55

刷屏刷屏刷屏

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版

相关帖子