Комментарий: эффект меню, созданный HTML5 с использованием CSS3. Пожалуйста, запустите его, чтобы увидеть эффект
Сложность реализации заключается в: первого ребенка, двух селекторов последнего ребенка, более позднее применение левого края: -1px;, обработка навыков шириной 33% и 34%.
Другая сложность: Box-Shadow: 1px 0 0 #f1f1f1 вставка; выполнение.
Окончательно:
Фон: -Webkit-Gradient (линейный, левый верх, левый нижний, от ( #f9f9f9), to ( #b6b4b4)); фон: -моз-линейр-градиент (вершина, #f9f9f9, #b6b4b4); фон: o-linear-gradient (top, #f9f9f9, #b6b4); #f9f9f9, #b6b4b4); фон: линейный градиент (топ, #f9f9f9, #b6b4b4); фон: линейный градиент (топ, #f9f9f9, #b6b4b4);
<! Doctype html>
<html xmlns = "<a href =" http://www.w3.org/1999/xhtml "> </a>" xml: lang = "en">
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Title> HTML5, CSS3 Меню </title>
<стиль типа = "text/css">
.jikey_demo {ширина: 80%; Поле: 0 Авто; Фон:#f1f1f1;}
.news_info {margin-bottom: 5px; граница: 1px solid #bbb; граница-радиус: 5px; box-shadow: 0 1px 0 #f1f1f1;}
.news_info a {дисплей: inline-block; ширина: 33%; высота: 26px; font-family: «Microsoft yahei»; Line-Height: 26px; Text-align: Center; Color: #555; граница-право: 1px solid #ccc; Box-Shadow: 1px 0 #f1f1f1f1;
.news_info a: Первый ребенок {ширина: 33%; Box-Shadow: нет; граница-радиус: 4px 0 0 4px;}
.news_info a: Последний ребенок {ширина: 34%; граница правая: нет; маржа-лето: -2px; граница-радиус: 0 4px 4px 0;}
.news_info a: Hover, .news_info a.current {color:#208edd; фон: -Webkit-gradient (линейный, левый верх, левый нижний, от (#f9f9f9), до (#b6b4b4); фон:-Мозо-linear-Gradient (top,#f9f9f9, #b6b4b4); фон: -o-linear-gradient (top, #f9f9f9, #b6b4b4); фон: -o-linear-gradient (top, #f9f9f9, #b6b4b4); фон: линейный градиент (Top, #f9f9f9, #b6b4b4); Фон: фон (top, #f9f9f9, #b6b4b4); #b6b4b4);}
</style>
</head>
<тело>
<div>
<Av> <a href = "/news/"> news1 </a> <a href = "/guide/"> news2 </a> <a href = "/review/"> news3 </a> </nav>
</div>
</body>
</html>