xhtml+css制作不规则导航

时间:2014-06-14 02:05来源:网络整理作者:网络点击: 次

分享到：

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

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

效果展示：

运行代码框

<!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/<a href="/newsHtm/24/n_41924.shtml">css</a>"> 
* {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 全选注:如需引入外部Js需刷新才能执行]

上一篇：模拟兼容性的 inline-block 属性
下一篇：iframe 的用法与注意事项

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

BS项目中的

css实现气泡

精彩文章

热点文章

xhtml+css制作不规则导航

热门标签

赞助商链接