CSS框架
What:
简单地说,就是一些事先写好的css集合,你只需要给你的html元素加上一些特定的类,就可以快速的得到一些想要的效果。Why:
简单、快速、方便、避免CSS中的各种坑。Which:
Semantic UI是一款语义化的前端开发框架,Semantic是围绕自然交流语言而架构的,这使得开发更加直观、易于理解。
Semantic UI
框架特色
Semantic UI把词语和类看成一个个可以任意组合的概念,使用如:名词/修饰语,文字序列以及诸多的自然语法来定义类名。
常见用法
- 名词:具体的元素
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
两种引用方式
本地引用
1.把 Semantic CSS 的文件放到 CSS 文件夹中,记得themes中的fonts和images也要拷贝进来。
2.在 html文件的head部分的link中写上:href="css/semantic.css"
如:<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
在线引用
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/...
案例分析
Task1: 制作博客标签
ui red right ribbon label # ui label标签样式 ribbon形状 right方向
ui inverted blue button # 蓝色边框的按钮
ui inverted vertical very padded segment # vertical消除圆角、阴影、缝隙 very padded内容往中间聚拢
ui fixed inverted menu # 固定在某个位置的菜单,具体菜单项用ui item表示Task2: 绘制美国队长盾牌
<div class="ui inverted red circular segment"> #大圆,内嵌红色
<div class="ui circular segment"> #中圆,内嵌白色
<div class="ui inverted red circular segment"> #小圆,内嵌红色
<i class="circular inverted blue big star icon"></i> # 中心圆,圆中嵌有五角星,五角星与圆之间用蓝色填充,星内部白色填充
</div>
</div>
</div>
</div>
Semantic UI网格系统
ui grid是Semantic框架中用来进行页面动态布局的工具。
主要用法分为两种:定宽网格和定栏网格
-
定宽网格:页面一共16栏,明确知道每一块横跨宽度
-- ui grid -- ten wide column -- six wide column
-
定栏网格:要分为几栏,一般为奇数,偶数可转化为定宽
--ui three column grid -- column -- column -- column
-
嵌套
-- ui three column grid container -- column -- ui two column grid -- column -- column -- column -- column
其他补充
ATOM使用技巧
semantic.css打开的话就可以自动联想内部的组件。
左上角蓝色点表示没有保存。
安装browser-plus插件能够直接在编辑器里面看到显示效果,点击闪电标签实时同步修改的效果。
输入lorem会自动生成被打乱顺序的拉丁字母用于填充。
setting中修改show indent guide可以显示atom的对齐线。
拓展阅读
备注
该笔记源自网易微专业《Python web开发》1.2、1.3、1.4节
本文由EverFighting创作,采用 知识共享署名 3.0 中国大陆许可协议进行许可。