制作一款網頁，你需要用到三個工具，html，CSS 和javascript。
如果用人的身體來和網頁做類比的話，html負責搭建基礎，就像人類的骨架。
CSS負責布局和美化，就像人類的肌肉和皮膚，一個網頁做的漂亮與否就是由它決定的。
而javascript就像是人的神經系統，負責接收信息和做出反饋。當我們點網頁上某個按鈕能實現特定的功能，就是javascript在起作用。
semantic UI 是一款很好用的CSS工具，事實上，你可以認為它是一款不錯的化妝品，因為它比普通的CSS制作的界面更好看一些，也更容易。
如今，一個工具好不好用，在很大程度上要看它是不是集成了很多的好用的模塊。
semantic UI 就是這樣一款工具，集成了很多很漂亮的UI模塊，能夠使網頁制作更加高效和美觀。
當然，追求個性化和靈活性的同學還是要自己寫CSS更好一點，因為這樣我們的創意就不會被工具所束縛，當然缺點是做網頁的速度會慢一點。
這很正常，我們永遠需要在效率和個性化之間做取舍。
下面這一款靜態網頁就是用semantic UI制作的。做這樣一個頁面簡單的超乎你的想象，只需要138行代碼。
這是代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Apple home page</title> </head> <link rel="stylesheet" href="css/semantic.css"> <body> <div class="ui inverted fixed fitted borderless fluid nine item menu"> <a href="www.baidu.com"class="item"> <div class="ui image"> <img src="images/appleicon.png" alt=""> </div> </a> <a href="#"class="item">Mac</a> <a href="#"class="item">iPod</a> <a href="#"class="item">iPhone</a> <a href="#"class="item">Watch</a> <a href="#"class="item">Music</a> <a href="#"class="item">技術支持</a> <a href="#"class="item"> <div class="image"> <img src="images/searchicon.png" alt=""> </div> </a> <a href="#"class="item"> <div class="image"> <img src="images/buyicon.png" alt=""> </div> </a> </div> <div class="ui secondary vertical basic segment"> <div class="ui image"> <img src="images/banner.png" alt=""> </div> </div> <div class="ui secondary basic vertical segment"> <div class="ui grid"> <div class="four wide column"> <a href="#"class="ui image"> <img src="images/img1.png" alt=""> </a> </div> <div class="four wide column"> <a href="#"class="ui image"> <img src="images/img2.png" alt=""> </a> </div> <div class="four wide column"> <a href="#"class="ui image"> <img src="images/img3.png" alt=""> </a> </div> <div class="four wide column"> <a href="#"class="ui image"> <img src="images/img4.png" alt=""> </a> </div> </div> </div> <div class="ui vertical secondary very padded segment"> <div class="ui container"> <div class="sub header"> 雙攝像頭僅於iPhone7 Plus提供。亮黑色外觀於128GB及以上純儲量的機型提供 </div> <div class="ui divider"></div> <div class="ui five column grid"> <div class="column"> <div class="ui text vertical menu"> <a href="#"class="item"><h4>Apple Store</h4></a> <a href="#"class="item"><h5>查找零售店</h5></a> <a href="#"class="item">iPhone</a> <a href="#"class="item">iPad</a> <a href="#"class="item">iPod</a> <a href="#"class="item">Watch</a> </div> </div> <div class="column"> <div class="ui text vertical menu"> <a href="#"class="item"><h4>Apple Store</h4></a> <a href="#"class="item"><h5>查找零售店</h5></a> <a href="#"class="item">iPhone</a> <a href="#"class="item">iPad</a> <a href="#"class="item">iPod</a> <a href="#"class="item">Watch</a> </div> </div> <div class="column"> <div class="ui text vertical menu"> <a href="#"class="item"><h4>Apple Store</h4></a> <a href="#"class="item"><h5>查找零售店</h5></a> <a href="#"class="item">iPhone</a> <a href="#"class="item">iPad</a> <a href="#"class="item">iPod</a> <a href="#"class="item">Watch</a> </div> </div> <div class="column"> <div class="ui text vertical menu"> <a href="#"class="item"><h4>Apple Store</h4></a> <a href="#"class="item"><h5>查找零售店</h5></a> <a href="#"class="item">iPhone</a> <a href="#"class="item">iPad</a> <a href="#"class="item">iPod</a> <a href="#"class="item">Watch</a> </div> </div> <div class="column"> <div class="ui text vertical menu"> <a href="#"class="item"><h4>Apple Store</h4></a> <a href="#"class="item"><h5>查找零售店</h5></a> <a href="#"class="item">iPhone</a> <a href="#"class="item">iPad</a> <a href="#"class="item">iPod</a> <a href="#"class="item">Watch</a> </div> </div> </div> </div> </div> </body> </html>
sementic UI 最大的特點就像是它的名字一樣，你可以通過字面的語意來制作你的網頁，如果你想要一個按鈕，就直接寫ui button, 你想讓它變成紅色，只需要寫ui red button，不需要知道紅色其實是#B03060。
所以，我們只要描述出來我們想要的網頁，sementic UI 就會將這個網頁展示出來。我們用來描述的語言，在這里被叫做形容詞，例如：segement,item, very large, fixed menu,inverted等等。
當然，這個描述是有限制的，如果你說我想要一個放飛自我的menu，那它不會有任何反應，也不會報錯，只是忽略而已。
不在它詞庫中的形容詞它都不認識。事實上，你可以自己寫一個這樣的形容詞加到它的詞庫中，因為sementic UI 是開源的，所以你當然可以把自己做的模塊加進去。
說回這個UI的使用方法，關鍵在於形容詞的疊加，或者叫做格式的嵌套。
形容詞疊加示例：
<div class="ui inverted fixed fitted borderless fluid nine item menu">
格式嵌套示例：
<div class="ui vertical secondary very padded segment"> <div class="ui container"> <div class="sub header"> 雙攝像頭僅於iPhone7 Plus提供。亮黑色外觀於128GB及以上純儲量的機型提供 </div> <div class="ui divider"></div> <div class="ui five column grid"> <div class="column"> <div class="ui text vertical menu"> <a href="#"class="item"><h4>Apple Store</h4></a> <a href="#"class="item"><h5>查找零售店</h5></a> <a href="#"class="item">iPhone</a> <a href="#"class="item">iPad</a> <a href="#"class="item">iPod</a> <a href="#"class="item">Watch</a> </div> </div>
用這兩種方法都能使網頁被賦予各種特性，最終得到我們想要的輸出效果。
至於各種形容詞的用法和效果，可以去sementic UI的官網去看，不要看中文的鏡像網站，因為還沒有翻譯完，看着有些混亂。
本來是想在這里寫一些具體的使用細節問題和經驗總結，方便以后自己查看和復習，但是不知不覺就寫了大體框架，懶得寫細節，希望以后不要這樣了。