- <!doctype HTML>
- <html>
- <head>
- <title>纯CSS倾斜导航</title>
- <style type="text/css">
- body{background-color:#ccc;font-size:12px;}
- .nav{float:left;margin-left:2px;height:0;line-height:0;border:0;border-left:25px solid transparent;border-bottom:25px solid #f50;}
- .nav .link{float:left;margin-right:-25px;height:0;line-height:0;border:0;border-right:25px solid transparent;border-top:25px solid #f50;color:#000;text-decoration:none;}
- .nav .link:hover{color:#09c;}
- .nav .link span{display:block;margin-top:-25px;padding:0 10px;height:25px;line-height:25px;text-align:center;cursor:pointer;}
- `
- .nav{_border-left:25px solid dashed;}
- .nav .link{_margin-bottom:-25px;_position:relative;_z-index:1;_border-right:25px solid dashed;}
- .nav .link span{_float:left;_position:relative;_z-index:2;}
- </style>
- </head>
- <body>
- <div class="nav">
- <a href="#" target="_blank" class="link">
- <span>首页</span>
- </a>
- </div>
- <div class="nav">
- <a href="#" target="_blank" class="link">
- <span>产品列表</span>
- </a>
- </div>
- <div class="nav">
- <a href="#" target="_blank" class="link">
- <span>下载与支持</span>
- </a>
- </div>
- <div class="nav">
- <a href="#" target="_blank" class="link">
- <span>好像还能自适应宽度，要多长可以有多长</span>
- </a>
- </div>
- </body>
- </html>
纯DIV+CSS倾斜导航条,有图有真相
最新推荐文章于 2024-04-03 13:32:26 发布
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
