Commentaire: Un effet de menu fait par HTML5 en utilisant CSS3. Veuillez l'exécuter pour voir l'effet
La difficulté de mise en œuvre réside dans: Premier-enfant, dernier-enfant de deux sélecteurs, application ultérieure de la marge-gauche: -1px;, traitement des compétences de 33% et 34% de largeur.
Une autre difficulté est: Box-Shadow: 1px 0 0 # F1F1F1 InSET; mise en œuvre.
Enfin:
Contexte: -Webkit-gradient (linéaire, haut gauche, bas gauche, de (# f9f9f9), à (# b6b4b4)); fond: -moz-linear-gradient (top, # f9f9f9, # b6b4b4); arrière-plan: -o-linear-gradient (haut, # f9f9f9, # b6b4b4); arrière # f9f9f9, # b6b4b4); arrière-plan: gradient linéaire (haut, # f9f9f9, # b6b4b4); arrière-plan: gradient linéaire (haut, # f9f9f9, # b6b4b4);
<! doctype html>
<html xmlns = "<a href =" http://www.w3.org/1999/xhtml "> </a>" xml: lang = "en">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> HTML5, Menu CSS3 </TITME>
<style type = "text / css">
.Jikey_demo {largeur: 80%; marge: 0 auto; Contexte: # f1f1f1;}
.news_info {margin-fond: 5px; bordure: 1px solide #bbb; border-radius: 5px; box-shadow: 0 1px 0 # f1f1f1;}
.news_info a {affichage: bloc en ligne; largeur: 33%; hauteur: 26px; font-famille: "Microsoft Yahei"; Line-Height: 26px; Text-Align: Center; Color: # 555; Border-Right: 1px Solid #ccc #ccc
.News_info A: Premier enfant {largeur: 33%; Box-Shadow: Aucun; Border-Radius: 4px 0 0 4px;}
.News_info A: dernier-enfant {largeur: 34%; bordure-bordure: aucun; marge-left: -2px; border-radius: 0 4px 4px 0;}
.news_info a: hover, .news_info a.current {colore: # 208edd; background: -webkit-gradient (linéaire, haut gauche, bas gauche, de (# f9f9f9), à (# b6b4b4)); arrière-plan: -moz-linear-gradient (top, # f9f9f9,, arrière # b6b4b4); arrière-plan: -o-linéaire-gradient (haut, # f9f9f9, # b6b4b4); arrière-plan: -o-linéaire (en haut, # f9f9f9, # b6b4b4); fond: linéaire-gradient (top, # f9f9f9, # b6b4b4); background: linear-gradient (TOP # b6b4b4);}
</ style>
</ head>
<body>
<div>
<Nav> <a href = "/ news /"> news1 </a> <a href = "/ guide /"> news2 </a> <a href = "/ review /"> news3 </a> </ nav>
</div>
</docy>
</html>