Komentar: Efek menu yang dibuat oleh HTML5 menggunakan CSS3. Harap jalankan untuk melihat efeknya
Kesulitan implementasi terletak pada: anak-anak pertama, anak-anak dua pemilih, kemudian aplikasi margin-kiri: -1px;, pemrosesan keterampilan sebesar 33% dan lebar 34%.
Kesulitan lain adalah:-shadow kotak: 1px 0 0 #f1f1f1 inset; pelaksanaan.
Akhirnya:
background:-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear-gradient(top, #f9f9f9, #b6b4b4);background:linear-gradient(top, #f9f9f9, #b6b4b4); latar belakang: linear-gradient (atas, #f9f9f9, #b6b4b4); latar belakang: linear-gradient (atas, #f9f9f9, #b6b4b4);
<! Doctype html>
<html xmlns = "<a href =" http://www.w3.org/1999/xhtml "> </a>" xml: lang = "en">
<head>
<meta http-equiv = "konten-tipe" content = "text/html; charset = utf-8"/>
<title> html5, menu CSS3 </iteme>
<type style = "text/css">
.jikey_demo {lebar: 80%; margin: 0 otomatis; Latar belakang:#f1f1f1;}
.news_info {margin-bottom: 5px; border: 1px solid #bbb; border-radius: 5px; box-shadow: 0 1px 0 #f1f1f1;}
.news_info a {display: inline-block; lebar: 33%; tinggi: 26px; font-family: "microsoft yahei"; line-height: 26px; Text-align: center; warna: #555; Border-Right: 1px solid #ccc; kotak-ditangguhkan: 1px 0 #f1f1f1 f1f1; Box-shadow: 1px 0 #f1f1 f1f1;
.news_info A: anak-anak pertama {lebar: 33%; kotak-shadow: tidak ada; perbatasan-radius: 4px 0 0 4px;}
.news_info A: Last-Child {Lebar: 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(linear, left top, left bottom, from(#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4); latar belakang: -o-linear-gradient (top, #f9f9f9, #b6b4b4); latar belakang: -o-linear-gradient (top, #f9f9f9, #b6b4b4); latar belakang: linear-gradient (top, #f9f9f9, #b6b4b4), linear-gradient (top, #f9f9f9, #b6b4b4), linear-gradient (top, #f9f9f9, #b6b4b4), linear-gradient (top, #f9f9f9, #b6b4b4); #b6b4b4);}
</tyle>
</head>
<body>
<div>
<av> <a href = "/news/"> news1 </a> <a href = "/panduan/"> news2 </a> <a href = "/review/"> news3 </a> </av>
</div>
</body>
</html>