ความคิดเห็น: เอฟเฟกต์เมนูที่ทำโดย HTML5 โดยใช้ CSS3 โปรดเรียกใช้เพื่อดูเอฟเฟกต์
ความยากลำบากในการดำเนินการอยู่ใน: ลูกคนแรก, ตัวเลือกสองคนสุดท้าย, การใช้งานในภายหลังการใช้งานด้านซ้าย-ซ้าย: -1px;, การประมวลผลทักษะที่มีความกว้าง 33% และ 34%
ความยากลำบากอีกประการหนึ่งคือ: Box-Shadow: 1px 0 0 #F1F1F1 สิ่งที่ใส่เข้าไป; การดำเนินการ
ในที่สุด:
ความเป็นมา: -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, จาก ( #f9f9f9), ถึง ( #b6b4b4)); พื้นหลัง: -moz-linear-gradient (ด้านบน, #f9f9f9, #b6b4b4); พื้นหลัง: -o-linear-gradient #F9F9F9, #B6B4B4); ความเป็นมา: linear-gradient (บนสุด, #F9F9F9, #B6B4B4); พื้นหลัง: linear-gradient (ด้านบน, #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, เมนู CSS3 </title>
<style type = "text/css">
.jikey_demo {width: 80%; มาร์จิ้น: 0 อัตโนมัติ; พื้นหลัง:#f1f1f1;}
.NEWS_INFO {มาร์จิ้น-ด้านล่าง: 5PX; ชายแดน: 1PX SOLID #BBB; Border-Radius: 5px; Box-Shadow: 0 1px 0 #F1F1F1;}
.news_info a {display: inline-block; ความกว้าง: 33%; ความสูง: 26px; Font-Family: "Microsoft Yahei"; Line-Height: 26px; Text-Aglign: Center; Color: #555; Border-Right: 1px Solid #CCC; Box-Shadow
.news_info A: ลูกคนแรก {width: 33%; Box-Shadow: None; Border-Radius: 4px 0 0 4px;}
.news_info A: Last-Child {Width: 34%; Border-Right: ไม่มี;
.news_info A: Hover, .news_info A.Current {color:#208EDD; พื้นหลัง: -webkit-gradient (เชิงเส้นด้านบนซ้ายล่างซ้ายจาก (#F9F9F9) ถึง (#B6B4B4)) #b6b4b4); ความเป็นมา: -o-linear-gradient (บนสุด, #f9f9f9, #b6b4b4); ความเป็นมา: -o-linear-gradient (ด้านบน, #f9f9f9, #b6b4b4); #b6b4b4);}
</style>
</head>
<body>
<div>
<av> <a href = "/news/"> news1 </a> <a href = "/guide/"> news2 </a> <a href = "/review/"> news3 </a> </av>
</div>
</body>
</html>