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

网络编程 2024/12/22 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

虽然完成了标签式导航，但是广场状的导航似乎并不能够顺应现在的设计潮流，其实导航不仅可以使用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>主页</li>     <li>DIV+CSS教程</li>     <li>常用代码</li>     <li>水晶图标</li>     <li>幻灯图片</li>     <li>软件下载</li>     <li>CSS2.0实用手册</li>   </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

标签：

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

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

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

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

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

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

CSS网页布局入门教程12：纵向导航菜单

CSS网页布局入门教程10：带当前标识的标签式横向导航

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接