編譯環(huán)境：python v3.5.0, mac osx 10.11.4

<big>python爬蟲基礎知識: Python爬蟲學習－基礎爬取</big>
<big>python爬蟲進階知識: Python爬蟲學習－爬取大規(guī)模數據</big>
<big>python爬蟲信息處理: Python爬蟲學習－大數據統(tǒng)計分析（基礎）</big>
<big>Web開發(fā)框架學習: 用Django框架搭載web（基礎）</big>

了解Semantic-UI框架

Semantic-UI是一個非常語義化的框架

Semantic UI把詞語和類看成一個個可以任意組合的概念
直觀的使用自然語言中的語法，詞匯和語序等來定義一個類（class）。

可以根據本文實例來理解這種非常方便的框架使用。

• 下載NodeJS
  brew install node
  若下載時出現下述提醒，則檢查當前的node版本
  node -v
  若為6.0版本則需要對node進行降級，因為graceful-fs在node v6下不支持。
  brew tap homebrew/versions
  brew unlink node
  brew install home-brew/versions/node5
  若需要切回node 6.0
  brew unlink homebrew/versions/node5
  brew link node
  切回5.11
  brew unlink bode
  brew link home-brew/versions/node5
• 下載Semantic-UI
  npm install -g gulp

• 安裝Semantic-UI
  npm install semantic-ui --save
  cd semantic/
  gulp build
  

  安裝成功后semantic文件夾下的目錄結構如下
• 使用Semantic-UI

  1. 我們首先在semantic 文件夾下新建一個html文件

2. 在html文件中引用semantic-ui樣式與js。
   
   由于semantic的js動作依賴與jQuery文件，所以jQuery文件一定要先與js引用。
   PS：jQuery文件在NodeJS下，需要將此文件復制到我們的搭建項目的指定文件夾下。
3. 查看官方文檔，添加我們想要的樣式。
   http://www.semantic-ui.cn

利用Semantic-UI框架定制前端頁面實例

• 目標頁面結果
• 添加邊欄
  查看官方文檔確定我們想要的邊欄樣式如下：
  基本樣式為：點擊左側，邊欄推出。
  
  
  改進：我們需要在默認情況下，邊欄為推出，所以我們可以在class的定義中加入visible（是不是很語義化），并且希望它窄一點，所以我們再加入thin的定義。
  
  經過修改后的頁面如圖：
  之后我們可以在原來1、2、3的位置加上我們的目標內容。
  
  最終結果：
• 添加菜單欄
  同樣的，按照添加邊欄的操作我們在文檔中找到我們喜歡的菜單欄樣式，按照上述文本編譯代碼，并加上我們自定義的信息。
  我們發(fā)現邊欄覆蓋了我們的菜單
  
  所以menu的class里還需加個left的屬性，這樣我們的邊欄就會一直出現在左側，不會覆蓋主題的內容。
  <div class="ui thin visible sidebar left inverted vertical menu" >
  
• 添加push動作
  我們發(fā)現，上述頁面我們點擊左側，邊欄并不會收回，所以，我們需要根據官方文檔提供的javascript模版編寫push動作。
  點擊menu后的頁面：
• 調整頁面邊距與添加統(tǒng)計視圖與相關信息
  相關文檔：
  分段元素
  統(tǒng)計視圖
  分隔條

All source code can be downloaded at GitHub: Jacobkam