前段时间做一个小项目碰到了一个导航 制作 的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。
先看图（图片只是大致做了一下）
效果展示 ：
运行代码框
<!DOCTY PE ht ML P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN" "http://HdhCmsTestw3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd"> <html XM lns="http://HdhCmsTestw3.org/1999/xhtml"> <head> < ;m eta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta n am e="author" content="Linxz" /> <title>无标题文档</title> <style type="text/css"> * {m arg in:0;padding:0;font:normal 12px/25px " 宋体 ";} body {background: # f8f8f8;} ul {list -s tyle:none;width:300px;h ei ght:25px;mar gin :20px auto;} li {float:left;width:86px;height:25px;text-align: center ;margin:0 -5px;dis play :inline;} a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(// img .jbzj .COM /file_images/css/2008101719145950077803.gif) center center no-repeat;} a:hover {color:#000;background:url(//img.jbzj测试数据/file_images/css/2008101719145943 777 802.gif) 0 0 no-repeat;width:86px;position:relative;} </style> </head> <body> <ul> <li><a hr ef="#" title="菜单">菜单</a></li> <li><a href="#" title="菜单">菜单</a></li> <li><a href="#" title="菜单">菜单</a></li> </ul> </body> </html>
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
上一页 1 2 下一页 阅读全文
总结
以上是 为你收集整理的 CSS DIV制作梯形状的不规则网站导航 全部内容，希望文章能够帮你解决 CSS DIV制作梯形状的不规则网站导航 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS DIV制作梯形状的不规则网站导航的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did204505