Semantic-UI框架定制前端界面

编译环境：python v3.5.0, mac osx 10.11.4

python爬虫基础知识: Python爬虫学习－基础爬取
python爬虫进阶知识: Python爬虫学习－爬取大规模数据
python爬虫信息处理: Python爬虫学习－大数据统计分析（基础）
Web开发框架学习: 用Django框架搭载web（基础）

了解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的位置加上我们的目标内容。
  
  
  最终结果：
  
• 添加菜单栏
  同样的，按照添加边栏的操作我们在文档中找到我们喜欢的菜单栏样式，按照上述文本编译代码，并加上我们自定义的信息。
  
  我们发现边栏覆盖了我们的菜单
  
  
  所以menu的class里还需加个left的属性，这样我们的边栏就会一直出现在左侧，不会覆盖主题的内容。
  
  
  

  
• 添加push动作
  我们发现，上述页面我们点击左侧，边栏并不会收回，所以，我们需要根据官方文档提供的javascript模版编写push动作。
  
  点击menu后的页面：
  
• 调整页面边距与添加统计视图与相关信息
  相关文档：
  分段元素
  统计视图
  分隔条
  

All source code can be downloaded at GitHub: Jacobkam