Semantic 这个样式感觉好用到了极点，同时也对Bootstrap也有了深入的理解。
这是个什么东西呢？简单说来，就是css的层叠样式集合，本来很掏粪的css在这里模块化成了比较简单的易用的集合！而且动态也变得异常简单，只需要调用函数既可。
当然，首先你得非常熟悉这些东西，起码得知道有什么，然后才能拿来用。写了个Pinterest的首页样式的练手
Semantic UI的安装&为何安装
Semantic官网
成果：
也就是一个导航栏和一些心情展示
做完以后觉得，这个东西真心不适合我。老实说，这个有点需要对整个网页的构架有比较深入的理解。比方导航栏上分解元素，首先要对每个元素都有一定的了解才能拼出来，很多都是照搬模板
简析几个元素：
- 卡片的构造
一个‘card’容器，包含了“图片、正文、正文补充”三个平行元素，这个没什么要多说明的，就是明白一个card的构造就好
<div class="ui card" style="width:236px">
<div class="image">
<img src="images/p1.jpg">
</div>
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">Kristy is an art director living in New York.</div>
</div>
<div class="extra content">
<a><i class="user icon"></i> 22 Friends </a>
<span class="right floated">Joined in 2013 </span>
</div>
</div>
其实，这个cards是从官网直接copy下来的，就能用了
-导航栏
这个导航栏其实是Semantic中的menu模块。首先先给其一个空间吧，然后fixed是用来固定住，使得导航栏一直在页面的上方不会随翻页消失。
后来发现，style属性是可以更改初始设置的，大小什么的。
<div class="ui fixed menu" style="height:54px;padding:10px 0px 10px 10px">
<div class="ui right labeled input">
<div class="ui basic label" style="padding:2px 0 2px 5px">
<i class="red big pinterest icon"> </i>
</div>
<input type="text" placeholder="Search..." style="min-width: 356px">
<div class="ui basic label">
<i class="search icon"></i>
</div>
</div>
<div class="ui left attached basic button" style="margin:0 0 0 10px">
<i class="red pin icon"></i>YOUR ACCOUNT
</div>
<div class="right attached ui basic button">
<i class="right setting icon"></i>
</div>
</div>
- 其他设置
这个是为了card根据内容改变大小的东西
$('#contentor').masonry({
//这个为的是所有的card根据其内容大小改变自身大小
itemSelector: '.card',
columnWidth: 10
});
总结
这个掌握的不是特别好，还是得多用才能理解，而且对页面布局也要有很大的耐心，细心才能搞定
