国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《Python web開發(fā)》筆記 二:Semantic UI框架

張紅新 / 2230人閱讀

摘要：簡單快速方便避免中的各種坑。是一款語義化的前端開發(fā)框架，是圍繞自然交流語言而架構(gòu)的，這使得開發(fā)更加直觀易于理解。輸入會自動生成被打亂順序的拉丁字母用于填充。中修改可以顯示的對齊線。

CSS框架

What:
簡單地說，就是一些事先寫好的css集合，你只需要給你的html元素加上一些特定的類，就可以快速的得到一些想要的效果。

Why:
簡單、快速、方便、避免CSS中的各種坑。

Which:
Semantic UI是一款語義化的前端開發(fā)框架，Semantic是圍繞自然交流語言而架構(gòu)的，這使得開發(fā)更加直觀、易于理解。

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：圓形

- 圖標(biāo)名稱：
share icon
wifi icon
兩種引用方式

本地引用

1.把 Semantic CSS 的文件放到 CSS 文件夾中，記得themes中的fonts和images也要拷貝進(jìn)來。
2.在 html文件的head部分的link中寫上：href="css/semantic.css"
如：

在線引用

    #大圓，內(nèi)嵌紅色


        #中圓，內(nèi)嵌白色                             
    
 #小圓，內(nèi)嵌紅色               
         # 中心圓，圓中嵌有五角星，五角星與圓之間用藍(lán)色填充，星內(nèi)部白色填充

Semantic UI網(wǎng)格系統(tǒng)

ui grid是Semantic框架中用來進(jìn)行頁面動態(tài)布局的工具。
主要用法分為兩種：定寬網(wǎng)格和定欄網(wǎng)格

定寬網(wǎng)格：頁面一共16欄，明確知道每一塊橫跨寬度

-- ui grid 
  -- ten wide column
  -- six wide column

定欄網(wǎng)格：要分為幾欄，一般為奇數(shù)，偶數(shù)可轉(zhuǎn)化為定寬

--ui three column grid
    -- column
    -- column
    -- column

嵌套

    -- ui three column grid container
        -- column
            -- ui two column grid
            -- column
            -- column
        -- column
        -- column

其他補(bǔ)充 ATOM使用技巧

semantic.css打開的話就可以自動聯(lián)想內(nèi)部的組件。

左上角藍(lán)色點(diǎn)表示沒有保存。

安裝browser-plus插件能夠直接在編輯器里面看到顯示效果，點(diǎn)擊閃電標(biāo)簽實時同步修改的效果。

輸入lorem會自動生成被打亂順序的拉丁字母用于填充。

setting中修改show indent guide可以顯示atom的對齊線。

拓展閱讀

2014 年 15 款最棒的 HTML CSS 框架

備注

該筆記源自網(wǎng)易微專業(yè)《Python web開發(fā)》1.2、1.3、1.4節(jié)
本文由EverFighting創(chuàng)作,采用 知識共享署名 3.0 中國大陸許可協(xié)議進(jìn)行許可。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/45542.html

相關(guān)文章

  • UI大全：前端UI框架集合（持續(xù)更新，當(dāng)前32個）

    摘要：簡潔直觀強(qiáng)悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 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框架集合（持續(xù)更新，當(dāng)前32個）

    摘要：簡潔直觀強(qiáng)悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 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 語義化設(shè)計的前端框架

    摘要：是的靈魂是一款語義化設(shè)計的前端框架，為攻城師而制作的可復(fù)用的開源前端框架。特性棄用有歧義的表述是圍繞自然交流語言而架構(gòu)的，這使得開發(fā)更加直觀易于理解。打開你的調(diào)試窗口提供了的跟蹤調(diào)試，意味著你的組件能告訴你它在做什么以及它正在做什么。 UI是Web的靈魂！Semantic UI是一款語義化設(shè)計的前端框架，為攻城師而制作的可復(fù)用的開源前端框架。 showImg(http://segme...

    Big_fat_cat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<