DIV CSS 佈局教程網

apple的官網有個相當不錯的頭部導航，今天我們運用css3的知識，不借助一張圖片，來實現類似的效果。

下載源文件：http://www.pouoluo.com/files/soft/1_121211104404.zip

1.會用到的css3知識

• text-shadow ：文字陰影
• border-radius：圓角
• box-shadow：容器陰影
• box-shadow: inset ：當增加inset後，表示使用內陰影
• gradient ：漸變，漸變的代碼還是很多的，幸運的是網上有自動生成漸變的工具，請看CSS3 Gradient Generator
• keyframes：這個屬性就比較有意思，估計用的人很少，用於配合css3動畫，理解為動畫模塊或一組css3動畫設置。只有 WebKit 內核的浏覽器支持這一特性，經過明河驗證firefox4也不支持。

2.上一坨代碼…

2.1導航容器樣式

1. /* 導航 */
2. #appleNav {
3. margin: 40px 0;
4. list-style: none;
5. /* Apple使用Lucida字體 */
6. font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
7. letter-spacing: -0.5px;
8. font-size: 13px;
9. /* 文字陰影 */
10. text-shadow: 0 -1px 3px #202020;
12. width: 873px;
13. height: 34px;
14. /*圓角*/
15. -moz-border-radius: 4px;
16. -webkit-border-radius: 4px;
17. border-radius: 4px;
18. /*陰影*/
19. -moz-box-shadow: 0 3px 3px #cecece;
20. -webkit-box-shadow: 0 3px 3px #cecece;
21. box-shadow: 0 3px 4px #8b8b8b;
22. }

2.2導航子元素樣式

1. #appleNav li {
2. display: block;
3. float: left;
4. border-right: 1px solid #5d5d5d;
5. border-left: 1px solid #929292;
6. width: 105px;
7. height: 34px;
8. border-bottom: 1px solid #575757;
9. border-top: 1px solid #797979;
10. /*漸變背景，關於css3漸變效果制作請看http://gradients.glrzad.com/ */
11. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
12. background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
13. background-color: #5f5f5f;
14. }
15. /*鼠標滑過菜單元素後*/
16. #appleNav li:hover {
17. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
18. background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100%);
19. background-color: #383838;
21. /*增加內陰影效果 */
22. -moz-box-shadow: inset 0 0 5px 5px #535353;
23. -webkit-box-shadow: inset 0 0 5px 5px #535353;
24. box-shadow: inset 0 0 5px 5px #535353;
25. }
26. /*鼠標按下菜單元素後*/
27. #appleNav li:active {
28. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
29. background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100%);
30. background-color: #383838;
32. -moz-box-shadow: inset 0 1px 2px 2px #000;
33. -webkit-box-shadow: inset 0 1px 2px 2px #000;
34. box-shadow: inset 0 1px 2px 2px #000;
35. }

留意內陰影部分的處理。

2.3容器向下滑動的動畫效果

1. /*Webkit內核的浏覽器增加動畫效果 */
2. @-webkit-keyframes showMenu {
3. from { opacity: 0; top:-20px; }
4. to { opacity: 1; }
5. }
7. #appleNav {
8. -webkit-animation: showMenu 1s;
9. position: relative;
10. }