CSS DIV制作梯形状的不规则网站导航
导读：收集整理的这篇文章主要介绍了CSS DIV制作梯形状的不规则网站导航，觉得挺不错的，现在分享给大家，也给大家做个参考。 前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。...
收集整理的这篇文章主要介绍了CSS DIV制作梯形状的不规则网站导航，觉得挺不错的，现在分享给大家，也给大家做个参考。 前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。
先看图（图片只是大致做了一下）
效果展示：
运行代码框
!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(//img.jbzj.COM/file_images/css/2008101719145950077803.gif) center center no-repeat; } a:hover { color:#000; background:url(//img.jbzj.com/file_images/css/2008101719145943777802.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 全部选择 提示：你可先修改部分代码，再按运行]
@L_406_0@12 下一页 阅读全文
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS DIV制作梯形状的不规则网站导航
本文地址： https://pptw.com/jishu/584791.html