[CSS+HTML]纯CSS实现六边形布局的导航菜单
2014-08-22 10:41:46 -0400
代码复制
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS实现六边形布局的导航菜单</title> <style> .wrap{margin:100px;width:303px;} .nav{width:100px;height:58px;background:#339933;display:inline-block;position:relative;line-height:58px;text-align:center;color:#ffffff;font-size:14px;text-decoration:none;float:left;margin-top:31px;margin-right:1px;} .nav s{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-bottom:30px solid #339933;left:0px;top:-30px;} .nav b{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-top:30px solid #339933;bottom:-30px;left:0px;} .a0{margin-left:100px;} .a1{margin-left:50px;} .nav:hover{background:#8CBF26;color:#333333;} .nav:hover s{border-bottom-color:#8CBF26;} .nav:hover b{border-top-color:#8CBF26;} </style> </head> <body> <div class="wrap"> <a class="nav a0" target="_blank" href="#"><s></s>广播<b></b></a> <a class="nav a1" target="_blank" href="#"><s></s>广播<b></b></a> <a class="nav a2" target="_blank" href="#"><s></s>广播<b></b></a> <a class="nav a3" target="_blank" href="#"><s></s>广播<b></b></a> <a class="nav a4" target="_blank" href="#"><s></s>广播<b></b></a> <a class="nav a5" target="_blank" href="#"><s></s>广播<b></b></a> </div> </body> </html>
代码演示
广播
广播
广播
广播
广播
广播
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N