资讯专栏INFORMATION COLUMN

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

张红新 / 2042人阅读

摘要:简单快速方便避免中的各种坑。是一款语义化的前端开发框架,是围绕自然交流语言而架构的,这使得开发更加直观易于理解。输入会自动生成被打乱顺序的拉丁字母用于填充。中修改可以显示的对齐线。

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

在线引用

#大圆,内嵌红色

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

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 框架

备注

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/45542.html

相关文章

  • UI大全:前端UI框架集合(持续更新,当前32个)

    摘要:简洁直观强悍的前端开发框架,让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋,她区别于那些基于底层的框架,却并非逆道而行,而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    only_do 评论0 收藏0
  • UI大全:前端UI框架集合(持续更新,当前32个)

    摘要:简洁直观强悍的前端开发框架,让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋,她区别于那些基于底层的框架,却并非逆道而行,而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    archieyang 评论0 收藏0
  • UI大全:前端UI框架集合(持续更新,当前32个)

    摘要:简洁直观强悍的前端开发框架,让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋,她区别于那些基于底层的框架,却并非逆道而行,而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    church 评论0 收藏0
  • Semantic UI 语义化设计的前端框架

    摘要:是的灵魂是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。特性弃用有歧义的表述是围绕自然交流语言而架构的,这使得开发更加直观易于理解。打开你的调试窗口提供了的跟踪调试,意味着你的组件能告诉你它在做什么以及它正在做什么。 UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。 showImg(http://segme...

    Big_fat_cat 评论0 收藏0
  • Semantic UI 语义化设计的前端框架

    摘要:是的灵魂是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。特性弃用有歧义的表述是围绕自然交流语言而架构的,这使得开发更加直观易于理解。打开你的调试窗口提供了的跟踪调试,意味着你的组件能告诉你它在做什么以及它正在做什么。 UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。 showImg(http://segme...

    zombieda 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<