@IT·互联网IT在线课程WEB前端程序开发

《Python web开发》笔记 二:Semantic UI框架

2017-03-17  本文已影响1301人  everfight

CSS框架

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/ajax/libs/semantic-ui/2.2.4/semantic.css">

案例分析

Semantic UI网格系统

ui grid是Semantic框架中用来进行页面动态布局的工具。
主要用法分为两种:定宽网格和定栏网格

其他补充

ATOM使用技巧

拓展阅读

备注

该笔记源自网易微专业《Python web开发》1.2、1.3节
本文由EverFighting创作,采用 知识共享署名 3.0 中国大陆许可协议进行许可。

上一篇 下一篇

猜你喜欢

热点阅读