您的位置：首页 > Web前端 > CSS

纯CSS实现六边形布局的导航菜单

2015-03-01 12:57 597 查看
<!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>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航