التعليق: تأثير القائمة الذي صنعته HTML5 باستخدام CSS3. يرجى تشغيله لرؤية التأثير
تكمن صعوبة التنفيذ في: First-Child ، Last-Child اثنين من المحددين ، في وقت لاحق تطبيق الهامش اليساري: -1px ؛ ، معالجة المهارات بنسبة 33 ٪ وعرض 34 ٪.
صعوبة أخرى هي: box-shadow: 1px 0 0 #f1f1f1 Inset ؛ تطبيق.
أخيراً:
الخلفية: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، من ( #f9f9f9) ، إلى ( #b6b4b4)) ؛ الخلفية: -moz-linar-radient (top ، #f9f9f9 ، #b6b4b4) ؛ background: -o-linear-radient (top ، #f9f9f9 ، #b6b4b4) #f9f9f9 ، #b6b4b4) ؛ الخلفية: Linear-Radient (Top ، #f9f9f9 ، #b6b4b4) ؛ background: Linear-Radient (top ، #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>
<type type = "text/css">
.jikey_demo {العرض: 80 ٪ ؛ الهامش: 0 Auto ؛ الخلفية:#f1f1f1 ؛}
.news_info {margin-bottom: 5px ؛ الحدود: 1px solid #bbb ؛ border-radius: 5px ؛ box-shadow: 0 1px 0 #f1f1f1 ؛}
.news_info a {display: inline block ؛ width: 33 ٪ ؛ Quitte: 26px ؛ font-family: "Microsoft Yahei" ؛ Line-Height: 26px ؛ text-align: center ؛ color: #555 ؛ border-right: 1px solid #ccc ؛ box-shadow: 1px 0 0
.news_info a: أول child {width: 33 ٪ ؛ box-shadow: none ؛ border-radius: 4px 0 0 4px ؛}
.news_info a: last-child {width: 34 ٪ ؛ الحدود اليمين: لا شيء ؛ الهامش-اليسار: -2px ؛ الحدود radius: 0 4px 4px 0 ؛}
.news_info a: hover ، .news_info a.current {color:#208edd ؛ background: -webkit-radient (خطي ، أعلى ، أسفل اليسار ، من (#f9f9f9) ، إلى (#b6b4b4) ؛ #B6B4B4) ؛ الخلفية: -O-Linar-Radient (TOP ، #F9F9F9 ، #B6B4B4) ؛ الخلفية: -O-LINEAR-RARGIENT (TOP ، #F9F9F9 ، #B6B4B4) #B6B4B4) ؛}
</style>
</head>
<body>
<viv>
<av> <a href = "/news/"> news1 </a> <a href = "/guide/"> news2 </a> <a href = "/review/"> news3 </a> </v>
</div>
</body>
</html>