Comentario: Un efecto de menú realizado por HTML5 usando CSS3. Por favor, ejecutarlo para ver el efecto
La dificultad de la implementación radica en: dos selectores de primer hijo, último hijo, aplicación posterior de margen-izquierda: -1px;, procesamiento de habilidades de 33% y 34% de ancho.
Otra dificultad es: Box-Shadow: 1PX 0 0 #F1F1F1 INSET; implementación.
Finalmente:
Antecedentes: -webkit-gradiente (lineal, superior izquierda, fondo izquierdo, desde ( #f9f9f9), a ( #b6b4b4)); fondo: -moz-lineal-gradiente (superior, #f9f9f9, #b6b4b4); fondo: -o-lineal-narrle (superior, #f9f9f9, #b6b4b4); fondo: lineal (top, y-narrón (superior (superior, #f9f9f9, #b6b4b4); fondo: lineal (top, y-narrón (superior (superior, #f9f9f9, #b6b4b4); fondo: lineal (top, y-narrón (top, y núcle #F9F9F9, #B6B4B4); Fondo: Gradiente lineal (superior, #F9F9F9, #B6B4B4); Fondo: gradiente lineal (superior, #F9F9F9, #B6B4B4);
<! Doctype html>
<html xmlns = "<a href =" http://www.w3.org/1999/xhtml "> </a>" xml: lang = "en">
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> html5, menú CSS3 </title>
<style type = "text/css">
.jikey_demo {ancho: 80%; margen: 0 auto; Antecedentes:#F1F1F1;}
.news_info {margen-bottom: 5px; borde: 1px sólido #bbb; border-radio: 5px; box-shadow: 0 1px 0 #f1f1f1;}
.news_info a {Display: Inline-Block; Ancho: 33%; altura: 26px; Font-Family: "Microsoft Yahei"; Line-Height: 26px; Text-Align: Center; Color: #555; Border-Right: 1px Solid #CCC; Box-Sadow: 1PX 0 0 #F1F1F11 INTRO;}
.News_info A: First-Child {ancho: 33%; box-shadow: none; border-radio: 4px 0 0 4px;}
.News_info A: Last-Child {ancho: 34%; borde-derecha: ninguno; margen-izquierda: -2px; border-radio: 0 4px 4px 0;}
.news_info a: hover, .news_info a.current {color:#208Edd; fondo: -webkit-gradiente (lineal, superior izquierda, fondo izquierdo, desde (#f9f9f9), a (#b6b4b4)); fondo: -moz-lineal-gradiente (superior,#f9f9f9, #b6b4b4);background:-o-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear-gradient(top, #f9f9f9, #b6b4b4);background:linear-gradient(top, #f9f9f9, #b6b4b4);background:linear-gradient(top, #f9f9f9, #b6b4b4);}
</style>
</ablo>
<Body>
<div>
<Al Nav> <a href = "/News/"> News1 </a> <a href = "/guía/"> News2 </a> <a href = "/review/"> News3 </a> </ar Nav>
</div>
</body>
</html>