首頁 >web前端 >H5教程 >html5 css3網站選單實作程式碼_html5教學技巧

html5 css3網站選單實作程式碼_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:48:291791瀏覽

實現的困難在於:first-child,last-child 兩個選擇器,以後margin-left:-1px;的應用,33%,34%寬度的技巧處理。

另外一個困難是:box-shadow:1px 0 0 #F1F1F1 inset; 的實作。

最後是:

複製代碼
代碼如下:

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);


複製程式碼
程式碼如下:

http://www.w3.org/1999/xhtml" xml:lang=" en">


html5,css3選單 title><br> <style type="text/css"><br /> .jikey_demo{ width:80%; margin:0 auto; background:#f1f1f1;}<br /> .news_info{margin-bottom:5px;b :1px solid #bbb;border-radius:5px;box-shadow:0 1px 0 #f1f1f1;}<br /> .news_info a{display:inline-block;width:33%;height:26px;font-family:"微軟雅黑";line-height:26px;text-align:center;color:#555;border-right:1px solid #ccc;box-shadow:1px 0 0 #F1F1F1 inset;}<br /> .news_info a: first-child{width:33%;box-shadow:none;border-radius:4px 0 0 4px;}<br /> .news_info a:last-child{width:34%;border-right:none;margin-left :-2px;border-radius:0 4px 4px 0;}<br /> .news_info a:hover, .news_info a.current{color:#208edd;background:-webkit-gradient(linear, left top, left bottom, fromleft (#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear-gradient(top, #f9f9f9, #b6b4b4);background: linear-gradient(top, #f9f9f9, #b6b4b4);}<br /> </style> <br><br>





陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn