ホームページ >ウェブフロントエンド >htmlチュートリアル >六角形レイアウトのナビゲーションを実装するための純粋な CSS menu_html/css_WEB-ITnose

六角形レイアウトのナビゲーションを実装するための純粋な CSS menu_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:48:572013ブラウズ





纯CSS实现六边形布局の导航菜单
<スタイル>
.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-


装飾:なし;float:left;margin-top:31px;margin-right:1px;}
.nav s{width:0;height: 0;表示:ブロック;オーバーフロー:非表示;位置:絶対;境界線左:50px 点線透明;境界線右:50px 点線透明;境界線下:30px 実線


#339933;左:0px;上:-30px ;}
.nav b{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px 点線透明;border-right:50px 点線透明;border-top:30px 実線


#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;}




http://www.999jiujiu.com/


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。