页面导航：首页 → 网络编程 → CSS/HTML → 经验交流 → 正文内容 css导航

xhtml+css制作不规则导航

发布：dxy 字体：[增加减小] 类型：转载

前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。

先看图（图片只是大致做了一下）

效果展示：

运行代码框

点击运行可以看到效果:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="Linxz" /> 
<title>无标题文档</title> 
<style type="text/css"> 
* {margin:0;padding:0;font:normal 12px/25px "宋体";} 
body {background:#f8f8f8;} 
ul {list-style:none;width:300px;height:25px;margin:20px auto;} 
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;} 
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(/articleimg/2008/04/5627/03.gif) center center no-repeat;} 
a:hover {color:#000;background:url(/articleimg/2008/04/5627/02.gif) 0 0 no-repeat;width:86px;position:relative;} 
</style> 
</head> 
<body> 
<ul> 
    <li><a href="#" title="菜单">菜单</a></li> 
    <li><a href="#" title="菜单">菜单</a></li> 
    <li><a href="#" title="菜单">菜单</a></li> 
</ul> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：xhtml css 不规则导航

百度中搜索更多的关于xhtml+css制作不规则导航内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：iframe 的用法与注意事项
下一篇文章：Firefox返回时Iframe的显示Bug的解决方法

文章评论

共有位脚本之家网友发表了评论我来说两句

xhtml+css制作不规则导航

文章评论

同类文章

最近更新

热点排行

xhtml+css制作不规则导航

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行