コメント:CSS3を使用したHTML5によって作成されたメニュー効果。効果を確認するには実行してください
実装の難しさは、最初の子供、最後の子供2つのセレクター、後のマージン左:-1px;、33%および34%のスキル処理の適用にあります。
別の難しさは次のとおりです。Box-Shadow:1PX 0 0#F1F1F1 INSET;実装。
ついに:
背景:-webkit-gradient(線形、左上、左下、(#f9f9f9)、(#b6b4b4)); background:-moz-linear-gradient(top、#f9f9f9、#b6b4b4); #F9F9F9、#B6B4B4);背景:線形勾配(TOP、#F9F9F9、#B6B4B4);背景:線形勾配(TOP、#F9F9F9、#B6B4B4);
<!doctype html>
<html xmlns = "<a href =" http://www.w3.org/1999/xhtml "> </a>" xml:lang = "en">
<head>
<Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Title> HTML5、CSS3メニュー</title>
<style type = "text/css">
.jikey_demo {width:80%;マージン:0 Auto;背景:#f1f1f1;}
.news_info {margin-bottom:5px; border:1px solid #bbb; border-radius:5px; box-shadow:0 1px 0#f1f1f1;}
.news_info {display:inline-block; width:33%; height:26px; font-family: "microsoft yahei"; line-height:26px; text-align:center; color:#555; border-right:1px solid#ccc; box-shadow:1px 0#f1f1f1inet;}
.news_info a:first-child {width:33%; box-shadow:none; border-radius:4px 0 0 4px;}
.news_info a:last-child {width:34%; border-right:none; margin-left:-2px; border-radius:0 4px 4px 0;}
.news_info a:Hover、.news_info a.current {color:#208edd; background:-webkit-gradient(線形、左上、左下、(#f9f9f9)、(#b6b4b4)); #B6B4B4);背景:-o-linear-gradient(top、#f9f9f9、#b6b4b4); background:-o-linear-gradient(top、#f9f9f9、#b6b4b4);背景:線形勾配(トップ、#f9f9f9、#b6b4b4); #b6b4b4);}
</style>
</head>
<body>
<div>
<nav> <a href = "/news/"> news1 </a> <a href = "/guide/"> news2 </a> <a href = "/review/"> news3 </a> </nav>
</div>
</body>
</html>