编译环境：python v3.5.0, mac osx 10.11.4
<big>python爬虫基础知识: Python爬虫学习－基础爬取</big>
<big>python爬虫进阶知识: Python爬虫学习－爬取大规模数据</big>
<big>python爬虫信息处理: Python爬虫学习－大数据统计分析（基础）</big>
<big>Web开发框架学习: 用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
安装成功后semantic文件夹下的目录结构如下
npm install semantic-ui --save
cd semantic/
gulp build
- 使用Semantic-UI
-
我们首先在semantic 文件夹下新建一个html文件
-
我们首先在semantic 文件夹下新建一个html文件
- 在html文件中引用semantic-ui样式与js。
由于semantic的js动作依赖与jQuery文件，所以jQuery文件一定要先与js引用。
PS：jQuery文件在NodeJS下，需要将此文件复制到我们的搭建项目的指定文件夹下。 - 查看官方文档，添加我们想要的样式。
http://www.semantic-ui.cn
利用Semantic-UI框架定制前端页面实例
-
目标页面结果
- 添加边栏
查看官方文档确定我们想要的边栏样式如下：
基本样式为：点击左侧，边栏推出。
改进：我们需要在默认情况下，边栏为推出，所以我们可以在class的定义中加入visible（是不是很语义化），并且希望它窄一点，所以我们再加入thin的定义。
经过修改后的页面如图：之后我们可以在原来1、2、3的位置加上我们的目标内容。
最终结果： - 添加菜单栏
同样的，按照添加边栏的操作我们在文档中找到我们喜欢的菜单栏样式，按照上述文本编译代码，并加上我们自定义的信息。我们发现边栏覆盖了我们的菜单
所以menu的class里还需加个left的属性，这样我们的边栏就会一直出现在左侧，不会覆盖主题的内容。
<div class="ui thin visible sidebar left inverted vertical menu" >
- 添加push动作
我们发现，上述页面我们点击左侧，边栏并不会收回，所以，我们需要根据官方文档提供的javascript模版编写push动作。点击menu后的页面： - 调整页面边距与添加统计视图与相关信息
相关文档：
分段元素
统计视图
分隔条
All source code can be downloaded at GitHub: Jacobkam
