What:
简单地说,就是一些事先写好的css集合,你只需要给你的html元素加上一些特定的类,就可以快速的得到一些想要的效果。
Why:
简单、快速、方便、避免CSS中的各种坑。
Which:
Semantic UI是一款语义化的前端开发框架,Semantic是围绕自然交流语言而架构的,这使得开发更加直观、易于理解。
Semantic UI把词语和类看成一个个可以任意组合的概念,使用如:名词/修饰语,文字序列以及诸多的自然语法来定义类名。
常见用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<code>- 名词:具体的元素 ui segment ui button ui image ui container ui divider ui header ui label - 形容词: very padded:文字的间距靠里 vertical:去掉边框的圆角、阴影和缝隙 inverted:颜色需要反选填充 basic: 处理黑边问题 fixed: 固定位置 Mini Tiny Small Medium Large Big Huge Massive:大小 circular:圆形 - 图标名称: share icon wifi icon </code> |
本地引用
1.把 Semantic CSS 的文件放到 CSS 文件夹中,记得themes中的fonts和images也要拷贝进来。
2.在 html文件的head部分的link中写上:href="css/semantic.css"
如:
在线引用
#大圆,内嵌红色
1
2
3
4
5
6
|
<code>< div class = "ui circular segment" > #中圆,内嵌白色 < div class = "ui inverted red circular segment" > #小圆,内嵌红色 <i class = "circular inverted blue big star icon" ></i> # 中心圆,圆中嵌有五角星,五角星与圆之间用蓝色填充,星内部白色填充 </ div > </ div > </code> |