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

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"
如：

• 在线引用

案例分析

• 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: 绘制美国队长盾牌
  

  # 大圆，内嵌红色
  

  # 中圆，内嵌白色
  

  # 小圆，内嵌红色
  # 中心圆，圆中嵌有五角星，五角星与圆之间用蓝色填充，星内部白色填充
  

  
  

  
  

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的对齐线。

拓展阅读

• 2014 年 15 款最棒的 HTML CSS 框架
• Semantic UI语法实例

备注

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