Skip to content

Commit

Permalink
update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gaohaoyang
Gaohaoyang committed May 25, 2015
1 parent b8b95a2 commit d6ed6ac
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 26 deletions.
4 changes: 3 additions & 1 deletion _posts/2015-05-20-scope.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,6 @@ excerpt: JavaScript作用域和作用域链学习笔记。
参考资料

* [鸟哥：Javascript作用域原理](http://www.laruence.com/2009/05/28/863.html)
* [理解 JavaScript 作用域和作用域链](http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html)
* [理解 JavaScript 作用域和作用域链](http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html)

未完待续！
143 changes: 123 additions & 20 deletions pages/1demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,102 @@
icon: glyphicon-play
---
<div id="fall">
<!-- 第一列 -->
<ul>

<li>
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/index.html">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/demo-demo-index.png">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/index.html">
百度前端学院 task0002 展示主页
</a>
</div>
<div class="description">
<p>主要技术：JavaScript</p>
<p>
任务二的展示主页，里面包含五个小 demo。<a href="https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang">源代码在这里。</a>还有一篇相关的<a href="http://gaohaoyang.github.io/2015/04/22/baidu-ife-2-javascript/">日志。</a>
</p>
</div>
</li>
<li>
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_1.html">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/demo-hobby.png">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_1.html">
处理兴趣爱好列表
</a>
</div>
<div class="description">
<p>主要技术：JavaScript</p>
<p>
对JavaScript正则表达式和字符串的练习。<a href="https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang">源代码在这里。</a>还有一篇相关的<a href="http://gaohaoyang.github.io/2015/04/22/baidu-ife-2-javascript/">日志。</a>
</p>
</div>
</li>
<li>
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_2.html">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/demo-time.png">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_2.html">
倒计时
</a>
</div>
<div class="description">
<p>主要技术：JavaScript</p>
<p>
setInterval()，Date 对象的学习和使用。<a href="https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang">源代码在这里。</a>还有一篇相关的<a href="http://gaohaoyang.github.io/2015/04/22/baidu-ife-2-javascript/">日志。</a>
</p>
</div>
</li>

</ul>
<!-- 第二列 -->
<ul>
<li>
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_3.html">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/demo-rotatePic.png">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_3.html">
轮播图
</a>
</div>
<div class="description">
<p>主要技术：JavaScript</p>
<p>
变速运动，运动终止条件的应用。<a href="https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang">源代码在这里。</a>还有一篇相关的<a href="http://gaohaoyang.github.io/2015/04/22/baidu-ife-2-javascript/">日志。</a>
</p>
</div>
</li>

<li>
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_4.html">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/demo-input.png">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_4.html">
输入框即时提示
</a>
</div>
<div class="description">
<p>主要技术：JavaScript</p>
<p>
对input监听，使用正在表达式高亮匹配，实现输入联想效果。<a href="https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang">源代码在这里。</a>还有一篇相关的<a href="http://gaohaoyang.github.io/2015/04/22/baidu-ife-2-javascript/">日志。</a>
</p>
</div>
</li>

<li>
<a href="http://gaohaoyang.github.io/ife/task/task0001/work/Gaohaoyang/index.html">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/Demo-blog-ife.jpg">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/ife/task/task0001/work/Gaohaoyang/index.html">
百度前端学院task0001
百度前端学院 task0001 个人博客
</a>
</div>
<div class="description">
Expand All @@ -22,25 +110,25 @@
</p>
</div>
</li>
</ul>
<!-- 第三列 -->
<ul>
<li>
<a href="http://gaohaoyang.github.io/works/bootstrap-zhihu/">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/teach-girlfriend-html-CopyZhihu.jpg" alt="zhihu">
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_5.html">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/demo-drag.png">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/works/bootstrap-zhihu/">
仿知乎页面
<a href="http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_5.html">
拖拽交互
</a>
</div>
<div class="description">
<p>主要技术：HTML, BootStrap</p>
<p>主要技术：JavaScript</p>
<p>
使用BootStrap仿照知乎做了一个静态页面。<a href="https://github.com/Gaohaoyang/gaohaoyang.github.io/tree/master/works/bootstrap-zhihu">源代码在这里。</a>还有一篇相关的<a href="http://gaohaoyang.github.io/2015/03/21/teach-girlfriend-html-css/">日志</a>
对鼠标事件应用，以及判断定位的方法等。<a href="https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang">源代码在这里。</a>还有一篇相关的<a href="http://gaohaoyang.github.io/2015/04/22/baidu-ife-2-javascript/">日志。</a>
</p>
</div>
</li>

</ul>
<ul>
<li>
<a href="http://gaohaoyang.github.io/shadow-demo-css3">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/Demoshadow.png">
Expand Down Expand Up @@ -73,9 +161,26 @@
</p>
</div>
</li>

</ul>
<!-- 第四列 -->
<ul>

<li>
<a href="http://gaohaoyang.github.io/learning-AngularJS/2-3-bookstore-add-sth-by-myself/">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/DemoAngularJS.png">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/learning-AngularJS/2-3-bookstore-add-sth-by-myself/">
AngularJS 结合动画效果
</a>
</div>
<div class="description">
<p>主要技术：AngularJS CSS3</p>
<p>
使用 AngularJS 中的 ngAnimate 加 CSS3里面的一些旋转效果，做出页面切换的效果。<a href="https://github.com/Gaohaoyang/learning-AngularJS/tree/master/2-3-bookstore-add-sth-by-myself">源代码在这里。</a>感谢<a href="http://imooc.com/learn/156">慕课网AngularJS实战教程。</a>
</p>
</div>
</li>
<li>
<a href="http://gaohaoyang.github.io/learning-AngularJS/2-4-UiRouterPractice">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/Demo-demo-UI-router.jpg" alt="AngularJS UI-Router">
Expand All @@ -86,27 +191,25 @@
</a>
</div>
<div class="description">
<p>主要技术：AngularJS, UI-router</p>
<p>主要技术：AngularJS UI-router</p>
<p>
UI-router 作为 AngularJS 中路由的扩充，实现了多级路由的效果。使得前端界面跳转更加方便。<a href="https://github.com/Gaohaoyang/learning-AngularJS/tree/master/2-4-UiRouterPractice">源代码在这里。</a>
</p>
</div>
</li>
</ul>
<ul>
<li>
<a href="http://gaohaoyang.github.io/learning-AngularJS/2-3-bookstore-add-sth-by-myself/">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/DemoAngularJS.png">
<a href="http://gaohaoyang.github.io/works/bootstrap-zhihu/">
<img src="http://7q5cdt.com1.z0.glb.clouddn.com/teach-girlfriend-html-CopyZhihu.jpg" alt="zhihu">
</a>
<div class="head">
<a href="http://gaohaoyang.github.io/learning-AngularJS/2-3-bookstore-add-sth-by-myself/">
AngularJS 结合动画效果
<a href="http://gaohaoyang.github.io/works/bootstrap-zhihu/">
仿知乎页面
</a>
</div>
<div class="description">
<p>主要技术：AngularJS CSS3</p>
<p>主要技术：HTML, BootStrap</p>
<p>
使用 AngularJS 中的 ngAnimate 加 CSS3里面的一些旋转效果，做出页面切换的效果。<a href="https://github.com/Gaohaoyang/learning-AngularJS/tree/master/2-3-bookstore-add-sth-by-myself">源代码在这里。</a>感谢<a href="http://imooc.com/learn/156">慕课网AngularJS实战教程。</a>
使用BootStrap仿照知乎做了一个静态页面。<a href="https://github.com/Gaohaoyang/gaohaoyang.github.io/tree/master/works/bootstrap-zhihu">源代码在这里。</a>还有一篇相关的<a href="http://gaohaoyang.github.io/2015/03/21/teach-girlfriend-html-css/">日志</a>
</p>
</div>
</li>
Expand Down
1 change: 1 addition & 0 deletions pages/2about.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ icon: glyphicon-heart

这个博客主要用于记录一下前端路上的风景。

2015.5.25 | 修复了底栏上跳的bug，调整了demo页面响应式变化的效果。
2015.4.24 | 目前我在学习百度前端技术学院的任务，学的过程中感觉自己之前搭建博客的代码写的太烂太乱了。学完之后一定会全部重构一下的。不再使用 BootStrap 了，自己写一些响应式的布局，自己模块化构建 js 代码，争取在7月之前完成。
2015.4.14 | 给博客添加了侧边的目录。主要使用了 BootStrap 的 [Affix](http://v3.bootcss.com/javascript/#affix) 插件。后来又弃用了这个插件，有bug。
2015.4.8 | 本博客迎来第一条评论！在文章 [判断两个数组是否相似 (arraysSimilar)](http://gaohaoyang.github.io/2015/04/06/arrays-similar/) 下，来自慕课网的老师 [Bosn](http://www.imooc.com/space/teacher/id/1159332) 说虽然代码长了些，但思路清晰。同时博客添加了返回顶部按钮。
Expand Down
17 changes: 12 additions & 5 deletions static/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,23 +339,29 @@ blockquote:last-child {

}
#fall ul{
margin: 5px 5px 0 5px;
margin: 0 10px;
padding: 0;
width: 260px;
width: 240px;
/*background-color: red;*/
display: inline-block;
vertical-align: top;
/*float: left;*/


}
@media screen and (max-width: 480px){

@media screen and (max-width: 1200px) {
#fall ul{
width: 210px;
}
}
@media screen and (max-width: 991px){
#fall ul{
width: auto;
}
}
#fall li{
margin: 0 0 10px 0;
margin: 0 0 20px 0;
padding: 0;
list-style-type: none;
font-size: 14px;
Expand All @@ -374,6 +380,7 @@ blockquote:last-child {
margin: 0 10px;
padding: 10px 0 5px 0;
border-bottom: 1px dotted #ddd;
font-weight: bold;
}
#fall .description{
text-align: left;
Expand Down Expand Up @@ -492,7 +499,7 @@ blockquote:last-child {
bottom: 0px;
}

@media screen and (max-width: 768px){
@media screen and (max-width: 1200px){
.post{
padding:10px 10px;
font-size: 14px;
Expand Down

0 comments on commit d6ed6ac

Please sign in to comment.