制作一款网页，你需要用到三个工具，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的官网去看，不要看中文的镜像网站，因为还没有翻译完，看着有些混乱。
本来是想在这里写一些具体的使用细节问题和经验总结，方便以后自己查看和复习，但是不知不觉就写了大体框架，懒得写细节，希望以后不要这样了。
