《Python web開發》筆記二:Semantic UI框架

時間 2021-05-13

標籤 css html 前端 web ajax segmentfault 架構框架編輯器 ide 欄目 CSS 简体版

原文原文鏈接

CSS框架

What:
簡單地說，就是一些事先寫好的css集合，你只須要給你的html元素加上一些特定的類，就能夠快速的獲得一些想要的效果。css
Why:
簡單、快速、方便、避免CSS中的各類坑。html
Which:
Semantic UI是一款語義化的前端開發框架，Semantic是圍繞天然交流語言而架構的，這使得開發更加直觀、易於理解。前端

Semantic UI

框架特點

Semantic UI把詞語和類當作一個個能夠任意組合的概念，使用如：名詞/修飾語，文字序列以及諸多的天然語法來定義類名。web

常見用法

- 名詞：具體的元素
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

兩種引用方式

本地引用ajax

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">segmentfault

在線引用架構

<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: 繪製美國隊長盾牌ide

<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