在平常項目中，偶爾也會涉及一些前端的設計，但畢竟不是專業的，所以一直想要系統的學習一下。最近辭職了，等待入職新公司的期間，有空折騰學習一些CSS3的知識。
今天就從一個簡單的圓形菜單的實現，來總結一些最近學習的收獲。效果圖如下：
下面，就來看看這個圓形半透明的菜單如何實現：
1. 我們使用一個 ul 來制作菜單，代碼如下：
1 <ul> 2 <li> 3 <a href="#"> 4 <span>首頁</span> 5 </a> 6 </li> 7 <li> 8 <a href="#"> 9 <span>用戶</span> 10 </a> 11 </li> 12 <li> 13 <a href="#"> 14 <span>活動</span> 15 </a> 16 </li> 17 </ul>
效果如下：
2. 為ul添加樣式（ulMenu）以及其下的li，a，span，美化一下菜單:
1 .ulMenu { 2 list-style: none; 3 } 4 .ulMenu li { 5 float: left; 6 height: 80px; 7 width: 80px; 8 padding: 0; 9 margin: 0; 10 text-align: center; 11 list-style: none; 12 margin: 10px 10px 0 0; 13 } 14 .ulMenu li a { 15 display: block; 16 height: 100%; 17 padding: 0 15px; 18 font-size: 12px; 19 font-weight: bold; 20 color: #ccc; 21 text-decoration: none; 22 } 23 .ulMenu li a span { 24 display: block; 25 }
效果如下：
3. 如何讓菜單變成圓的，其實只要先將元素設置為長寬相等的正方形，再設置圓角為其長度的一半即可，例如，此例子中，li 的長寬是80px,則我們設置其圓角為40px，我們將 li 的樣式改為如下，增加圓角和背景色：
1 .ulMenu li 2 { 3 float: left; 4 height: 80px; 5 width: 80px; 6 padding: 0; 7 margin: 0; 8 text-align: center; 9 list-style: none; 10 background: rgba(0,0,0,0.3); 11 border-radius: 40px; 12 -moz-border-radius:40px; 13 -webkit-border-radius: 40px; 14 margin:10px 10px 0 0; 15 }
效果如下：
4. 這樣離我們要的效果還有些差距，我們要加一些圖標上去。CSS3的可以引入font字體可以讓我們省去找圖標的麻煩，我們可以直接引入font字體文件，這個下一步再詳細說，這里，我們先改動一下菜單的 html 代碼，用 個容器來顯示圖標，這里我們用 i 元素，改動后代碼如下:
1 <ul class="ulMenu"> 2 <li> 3 <a href="#"> 4 <i></i> 5 <span> 6 首頁 7 </span> 8 </a> 9 </li> 10 <li> 11 <a href="#"> 12 <i></i> 13 <span> 14 用戶 15 </span> 16 </a> 17 </li> 18 <li> 19 <a href="#"> 20 <i></i> 21 <span> 22 活動 23 </span> 24 </a> 25 </li> 26 <div style="clear:both;"> 27 </div> 28 </ul>
給 i 添加樣式：
1 .ulMenu li a i 2 { 3 display: inline-block; 4 width: 24px; 5 height: 24px; 6 margin-top: 17px; 7 margin-bottom: .25em; 8 font-size: 28px; 9 }
效果如下：
5. 網上定制的font字體現在附帶很多常見圖標（可參照 http://astronautweb.co/snippet/font-awesome/ ，字體可到此處下載）：
下載font字體，在樣式文件中引用：
1 @font-face { 2 font-family: 'FontAwesome'; 3 src: url('font/fontawesome-webfont.eot'); 4 src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 5 url('font/fontawesome-webfont.woff') format('woff'), 6 url('font/fontawesome-webfont.ttf') format('truetype'), 7 url('font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), 8 url('font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); 9 font-weight: normal; 10 font-style: normal; 11 }
6. 接着，我們可以用下面形似的樣式來制定圖標：
1 .css:before { 2 content: "\f001"; 3 }
但是圖標很多，我們可以直接引入下載的font文件下面css文件夾下的 font-awesome.css樣式文件，也就是說，上面的一大堆字體文件引用都可以省略為（當然，真實開發中考慮到模塊化引入css加載性能略影響，個人覺得應少用，希望有經驗的前輩賜教）：
1 @import url('font-awesome.css');
為 i 添加對應 css：
1 <ul class="ulMenu"> 2 <li> 3 <a href="#"> 4 <i class="icon-home"> 5 </i> 6 <span> 7 首頁 8 </span> 9 </a> 10 </li> 11 <li> 12 <a href="#"> 13 <i class="icon-user"> 14 </i> 15 <span> 16 用戶 17 </span> 18 </a> 19 </li> 20 <li> 21 <a href="#"> 22 <i class="icon-th-large"> 23 </i> 24 <span> 25 活動 26 </span> 27 </a> 28 </li> 29 <div style="clear:both;"> 30 </div> 31 </ul>
效果如下：
7. 最后一步，添加鼠標移動上去時改變顏色，添加如下樣式：
1 .ulMenu li a:hover { 2 color: #F90; 3 }
效果如下：
猛戳【demo】下載例子。
本人初學CSS3，有很多寫的不完善或錯誤的地方，請不吝指出和見諒，謝謝。