Comentário: Um efeito de menu feito pelo HTML5 usando o CSS3. Por favor, execute -o para ver o efeito
A dificuldade de implementação está em: Primeiro filho, último filho de dois seletores, aplicação posterior da margem-esquerda: -1px;, processamento de habilidades de 33% e 34% de largura.
Outra dificuldade é: Shadow da caixa: 1px 0 0 #f1f1f1 inserção; implementação.
Finalmente:
Antecedentes: -Webkit gradiente (linear, superior esquerda, inferior esquerda, de ( #f9f9f9), para ( #b6b4b4)); fundo: -moz-linear-gradiente (topo, #f9f9f9, #b6b4b4); fundo: -o-linear-gradient (topo, #f9f9f9, #f9f9f9, #b6b4b4); fundo: gradiente linear (topo, #f9f9f9, #b6b4b4); fundo: gradiente linear (topo, #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, menu CSS3 </ititure>
<style type = "text/css">
.jikey_demo {width: 80%; margem: 0 automático; Antecedentes:#f1f1f1;}
.News_info {margem-bottom: 5px; borda: 1px Solid #BBB; Border-Radius: 5px; Box-Shadow: 0 1px 0 #f1f1f1;}
.News_info a {display: Block inline; largura: 33%; altura: 26px; font-family: "Microsoft yahei"; altura da linha: 26px; text-align: Center; cor: #555; fronteira da borda: 1px Solid #CC; Box-shadow: 1px 0 0 #
.News_info A: Primeiro filho {Width: 33%; Box-Shadow: Nenhum; Rádio de Fronteira: 4px 0 0 4px;}
.News_info A: Último filho {Largura: 34%; Right-Right: Nenhum; margem-esquerda: -2px; Radio de borda: 0 4px 4px 0;}
.News_info A: Passe, .News_info A.Current {Color:#208Edd; Background: -Webkit-gradiente (linear, parte superior esquerda, inferior esquerda, de (#f9f9f9), para (#B6B4B4); Antecedentes: -moz-linear-Gradient (TOPL) #B6B4B4); Antecedentes: -O-gradiente-linear (topo, #f9f9f9, #b6b4b4); fundo: -o-linear-gradiente (topo, #f9f9f9, #b6b4b4); fundo: gradiente linear (topo, #f9f9 ( #b6b4b4); #B6B4B4);}
</style>
</head>
<Body>
<div>
<Nand> <a href = "/news/"> news1 </a>
</div>
</body>
</html>