最后效果见:http://gmszone.github.io/RESUME
源码可见:https://github.com/gmszone/RESUME/tree/master/Web
Github GP-Pages
这个就不再说了，直接网上找就有了
为项目启用项目主页很简单，只需要在项目版本库中创建一个名为gh-pages的分支，并向其中添加静态网页即可。也就是说如果项目的Git版本库中包含了名为gh-pages分支的话，则表明该项目提供静态网页构成的主页，可以通过网址http://<user-id>.github.io/<project-name>访问到。
下面以用户gotgithub的项目helloworld为例，介绍如何维护项目主页。
如果本地尚未从GitHub克隆helloworld版本库，执行如下命令。
$ git clone git@github.com:gotgithub/helloworld.git
$ cd helloworld
当前版本库只有一个名为master的分支，如果直接从master分支创建gh-pages分支操作非常简单，但是作为保存网页的gh-pages分支中的内容和master分支中的可能完全不同。如果不希望gh-pages分支继承master分支的历史和文件，即想要创建一个干净的gh-pages分支，需要一点小技巧。
若使用命令行创建干净的gh-pages分支，可以从下面三个方法任选一种。
第一种方法用到两个Git底层命令：git write-tree和git commit-tree。步骤如下：
基于master分支建立分支gh-pages。
$ git checkout -b gh-pages
删除暂存区文件，即相当于清空暂存区。
$ rm .git/index
创建项目首页index.html。
$ printf "hello world.\n" > index.html
添加文件index.html到暂存区。
$ git add index.html
用Git底层命令创建新的根提交，并将分支gh-pages重置。
$ git reset --hard $(echo "branch gh-pages init." | git commit-tree $(git write-tree))
执行推送命令，在GitHub远程版本库创建分支gh-pages。
$ git push -u origin gh-pages
Bootstrap
Bootstrap简介
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
下载Bootstrap
解压后，我们就可以利用bootstrap创建一个简单的项目
BootStrap HelloWorld
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Timeliner
添加示例代码:
$.timeliner({
timelineContainer: '#timelineContainer', // value: selector of the main element holding the timeline's content, default to #timelineContainer
startState: 'closed', // value: closed | open, default to closed; determines whether the timeline is initially collapsed or fully expanded
startOpen: [], // value: array of IDs of single timelineEvents, default to empty; determines the minor event that you want to display open by default on page load
baseSpeed: 200, // value: any integer, default to 200; determines the base speed, some animations are a multiple (4x) of the base speed
speed: 4, // value: numeric, defalut to 4; a multiplier applied to the base speed that sets the speed at which an event's conents are displayed and hidden
fontOpen: '1.2em', // value: any valid CSS font-size value, defaults to 1em; sets the font size of an event after it is opened
fontClosed: '1em', // value: any valid CSS font-size value, defaults to 1em; sets the font size of an event after it is closed
expandAllText: '+ expand all', // value: string; defaults to '+ expand all'
collapseAllText: '- collapse all' // value: string; defaults to '- collapse all'
});
我的代码如下
<div id="timelineContainer">
<br class="clear">
<div class="timelineMajor">
<h2 class="timelineMajorMarker"><span>2010</span></h2>
<dl class="timelineMinor">
<dt id="201009"><a>墨颀多媒体文学社•社长</a></dt>
<dd class="timelineEvent" id="201009EX" style="display:none;">
<h3>09, 2010</h3>
<blockquote>
<p class="alert alert-info"> 社团创始人之一兼第一任社长</p>
</blockquote>
<br class="clear">
</dd><!-- /.timelineEvent -->
</dl><!-- /.timelineMinor -->
</div><!-- /.timelineMajor -->
<div class="timelineMajor">
<h2 class="timelineMajorMarker"><span>2012</span></h2>
<dl class="timelineMinor">
<dt id="201212"><a> 西安文理学院 挑战杯科技制作大赛特等奖</a></dt>
<dd class="timelineEvent" id="201212EX" style="display:none;">
<h3>12, 2012</h3>
<blockquote>
<p class="alert alert-info">名称:《基于Android与Arduino的远程智能家居控制系统》</p>
<p class="alert alert-info">职责: Android客户端编写、服务端编程、网站制作及运营、项目规划</p>
</blockquote>
<br class="clear">
</dd><!-- /.timelineEvent -->
</dl><!-- /.timelineMinor -->
</div>
<div class="timelineMajor">
<h2 class="timelineMajorMarker"><span>2013</span></h2>
<dl class="timelineMinor">
<dt id="201306"><a class="list-group-item">第九届 陕西省大学生课外学术科技作品竞赛二等奖</a></dt>
<dd class="timelineEvent" id="201306EX" style="display: none; ">
<div class="media">
<a href="#inline-2013" class="CBmodal"><img src="images/tiaozhanbei.jpg" width="240" height="180" alt="TiaoZhanbei"></a>
<p class="mediaLink"><a href="#inline-2013" class="CBmodal" title="获奖证书">获奖证书</a></p>
<div style="display:none">
<div id="inline-2013" class="modalBox">
<img src="images/tiaozhanbei2.jpg" alt="TiaoZhanbei">
</div>
</div>
</div><!-- /.media -->
<blockquote>
<p class="alert alert-info">名称:《远程控制的智能云家居系统》</p>
<p class="alert alert-info">职责: Android客户端编写、服务端编程、网站制作及运营、项目规划、文档编写</p>
</blockquote>
<br class="clear">
</dd><!-- /.timelineEvent -->
</dl><!-- /.timelineMinor -->
<dl class="timelineMinor">
<dt id="201307"><a class="list-group-item"></span> 第八届全国大学生“飞思卡尔”杯 西部赛区 电磁组三等奖</a></dt>
<dd class="timelineEvent" id="201307EX" style="display: none; ">
<blockquote>
<p class="alert alert-info">职责:编程、项目规划、文档编写</p>
<br class="clear">
</blockquote>
</dd><!-- /.timelineEvent -->
</dl><!-- /.timelineMinor -->
</div><!-- /.timelineMajor -->
<br class="clear">
</div><!-- /#timelineContainer -->
修改完代码最后不要忘记
分享到：
相关推荐
前后端分离（含有权限管理，高德地图地位，ECharts图形展示等技术），利用angularjs实现图片上传，消息提示框等功能，可以用作web项目的框架来使用，帮助学习angularjs和bootstrap前段和SSM后台框架的程序员，可当作...
口号是适用于任何场景，适用于每一个人...非常强大，Bootstrap适应不同技术水平的从业者，无论是设计师还是程序员，大牛还是菜鸟。既能用来开发简单的小东西，也能构造更为复杂的应用。附件于2012-10-31下载自github。
Bootstrap适应不同技术水平的从业者，无论是设计师还是程序员，大牛还是菜鸟。既能用来开发简单的小东西，也能构造更为复杂的应用。 跨设备，跨浏览器 最初设想中的Bootstrap只支持现代浏览器，不过新版本已经...
该项目作为以前的老项目，可以学习下里面的逻辑思维，老一辈的程序员的想法和精髓都在其中。 运行环境 jdk8+tomcat8+myeclipse2017ci(环境最好统一) 项目技术(必填) spring+spring mvc+hibernate+bootstrap+...
spring+spring mvc+mybatis+bootstrap+jquery+jsp+shiro #权限相关的表在tab.sql中 **项目说明** - 想学习spring mvc 在《最代码》中找到了一个医院管理系统>，程序比较简单，正好适合我，但后面一看，系统应该也...
- 一站式支付解决方案，统一下单接口，支持支付宝、微信、网银等多种支付方式。不涉及业务的纯粹的支付平台。 - 统一下单（统一下单接口、统一扫码）、订单管理、数据分析、财务报表、商户管理、渠道管理、对账系统...
imaring.github.io：编码灵程序员导航，作为一名码农，转换平时工作的需要，慢慢收集了很多优秀网站，这其中包括前端开发，替代开发，UI设计，在线工具，在线运行，免费接口，在线资源，在线学习，技术论坛，技术...
个人全栈开发实战：麻雀虽小，五脏俱全，精简全套项目开发，扫一扫程序员日常工作中的知识盲区 项目网站地址： 技术架构 总体架构 前后端分离：Spring Boot + Vue-Cli + VuePress 数据库：postgresql 代理：nginx ...
嗨，我是一个热情的程序员 。 我是诺伊达Jaypee信息技术学院的一名本科生，攻读信息技术学士学位。 我在“数据结构和算法”中有一个正确的命令。 我擅长： 编程语言：Java，C ++，Python，Javascript（ES-6）。 ...
翻阅github很多go编写的博客，发觉大多对应前端程序员部署还是需要成本，而且博客页面不是那么优美，而我们前端程序员一般会使用 node编写，页面虽然好看些，但是node开发的在性能上有缺陷，加上node提供的模板引擎...
（当前回答最多的开发人员正在发展 :grinning_face_with_sweat: ）使用的技术 :laptop: HTML CSS和Bootstrap（我们正在用Vuesax替换Bootstrap） JavaScript和jQuery + select2在某些地方Django（Python） 用于表情...