当前位置:首页 > DIV+CSS教程 > 正文

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

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2008-06-17 我要评论(121)     

本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!

虽然完成了标签式导航,但是广场状的导航似乎并不能够顺应现在的设计潮流,其实导航不仅可以使用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(/uploadfile/200806/17/4C162031907.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(/uploadfile/200806/17/4C162031907.gif) left -42px; ; color:#ffffff;}
#nav li a#current { background:url(/uploadfile/200806/17/4C162031907.gif) left -84px; color:#fff;}
</style>

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

2009-4-21注:许多朋友对于背景图片的定位容易迷糊,这里再详细说明一下,url后的两个参数,第一个为左右距离,第二个为上下距离,这点与padding和margin不同。第一个参数可以设置为left,center,right,第二个参数可设置为top,center,bottom,分别表示靠左、居中、靠右,顶部、居中和底部。也可以设置为具体数值,分别表示在X轴和Y轴上移动多少px。如果不设置这两项的话,默认是left top。请看下图,默认背景图片以left top开始以四方连续形式铺开的,重色部分表示原始图,浅色表示连续部分。三个背景图片给它命名为1、2、3,要定位到2的左上角,可以从坐标的中心向下-42px,也可以是84px的位置。要定位到3的左上角,可以从坐标中心向下-84px,也可以是42px。


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: CSS 导航 入门教程

所属专题:入门教程

更多评论(121)..会员评论

yjiajia(122.228.*.*) 发表于:2014-03-08 09:22:13
怎么下载网页中的这个导航图片
wlxmhls(124.65.*.*) 发表于:2014-02-24 14:22:06
正的42px,84px怎么来的
841091673(119.129.*.*) 发表于:2012-10-02 20:27:57
坐标原点是如何确定的
berlin(60.55.*.*) 发表于:2012-06-24 19:59:13
很好很强大,正在学习中
管理员回复:希望你继续学习
dongge19850609(202.100.*.*) 发表于:2011-06-09 15:46:46
你好,请问网站里面的图片如何下载????
管理员回复:css里有图片路径
kicny(220.114.*.*) 发表于:2011-03-30 11:15:34
管理员,你太棒了。!我到大学学了3年,屁都不会。还当不到我来你这看3天! 学了很多东西,自己也琢磨着搞了,太感谢你了。继续学习!不懂群上向 你们讨教哦!~~
管理员回复:欢迎常来
z88089(110.246.*.*) 发表于:2010-08-30 00:23:21
请问站长你的站是用什么语言写的?ASP?数据库是Access?
管理员回复:php+mysql
yeling(180.136.*.*) 发表于:2010-08-23 08:39:31
我想请问一下站长,我现在做的一个导航跟你的差不多,但我要左右两边是圆角的.中间全部是直角的,这个代码怎么写呢?<ul id="top_3"> <li id="top_3_1"><a href="#">首页</a></li> <li><a href="#">关于易速</a></li> <li><a href="#">信息中心</a></li> <li><a href="#">成功安全</a></li> <li><a href="#">建站方案</a></li> <li><a href="#">OA办公台</a></li> <li><a href="#">手机建站</a></li> <li><a href="#">营销推广</a></li> <li id="top_3_2"><a href="#">建站知识</a></li> </ul>这是导航内容代码 #top_3 {height:38px; list-style:none; } #top_3 li{float:left; } #top_3 a {color:#8c8c8c; text-decoration:none; display:block; width:75px; line-height:38px; height:38px; text-align:center; background:url(images/index_08.jpg); font-size:14px; font-weight:bold; } #top_3 a:hover {background:url(images/index_07.jpg); }这是CSS代码,我本想把两边圆重设ID,但是写进去的CSS没有效果.还是全部的直角.请问站长要达到两边是圆角该怎么写呢?谢谢!
管理员回复:你是加上ID了,但不定义样式能拿什么生效呀

出差旅游免费预订酒店

【视频教程】新手常见问题