├── README.md ├── about.html ├── assets ├── beauty.jpg ├── favicon.png ├── github.jpg ├── home-bg.jpg ├── html7.jpg ├── linux.jpg ├── peter.jpeg ├── rails-tricks.jpg ├── rails10.jpg ├── subl.jpg └── zhifu.png ├── blog.html ├── index.html ├── js └── main.js ├── source ├── .gitignore ├── assets │ ├── beauty.jpg │ ├── favicon.png │ ├── github.jpg │ ├── home-bg.jpg │ ├── html7.jpg │ ├── linux.jpg │ ├── peter.jpeg │ ├── rails-tricks.jpg │ ├── rails10.jpg │ ├── subl.jpg │ └── zhifu.png ├── gulpfile.js ├── js │ └── main.js ├── layout │ └── default.html ├── package.json ├── pages │ ├── about.html │ ├── blog.html │ ├── index.html │ └── work.html └── styles │ ├── _about.scss │ ├── _blogs.scss │ ├── _common.scss │ ├── _home.scss │ ├── _layout.scss │ ├── _work.scss │ └── main.scss ├── styles └── main.css └── work.html /README.md: -------------------------------------------------------------------------------- 1 | # 《 gulp+flexbox 响应式网站教程》 2 | 3 | 最早本课程是《摩登前端开发者》的第一阶段，后来抽出并进行了改版。 4 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flex 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 24 | 43 |

44 |

45 |

46 |

47 |

个人信息

48 |

49 |

喜欢写代码，喜欢写字，更喜欢录视频

50 |

很多朋友叫他“录视频的那个 Peter”

51 |

自封“视频死磕侠”

52 |

53 |

联系方式

54 |

邮箱：happypeter1983@gmail.com

55 |

微信：happypeter1983

56 |

社交账号

57 | 62 |

63 | 64 | 65 | 66 |

67 | 85 |

86 | 87 | 88 | -------------------------------------------------------------------------------- /assets/beauty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/beauty.jpg -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/favicon.png -------------------------------------------------------------------------------- /assets/github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/github.jpg -------------------------------------------------------------------------------- /assets/home-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/home-bg.jpg -------------------------------------------------------------------------------- /assets/html7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/html7.jpg -------------------------------------------------------------------------------- /assets/linux.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/linux.jpg -------------------------------------------------------------------------------- /assets/peter.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/peter.jpeg -------------------------------------------------------------------------------- /assets/rails-tricks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/rails-tricks.jpg -------------------------------------------------------------------------------- /assets/rails10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/rails10.jpg -------------------------------------------------------------------------------- /assets/subl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/subl.jpg -------------------------------------------------------------------------------- /assets/zhifu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/assets/zhifu.png -------------------------------------------------------------------------------- /blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flex 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 24 | 43 |

44 |

45 |

46 |

47 |

48 |

不做东西啥也学不成

49 |

50 | 要做出一个东西来的冲动，我觉得首先是一种情怀，一种渴望用手工而不是说话的形式跟他人交流的愿望。比如你喜欢画漫画，想要搭建一个小网站来和他人分享你的作品，那就首先写几个 Html 页面。这样，你学了什么是编辑器，浏览器，文件后缀，这些概念，你可能最初觉得这些概念本身没什么意思，但是东西出来了，你就很幸福，有进一步学下去的兴趣了。 51 |

52 | 53 |

54 |

55 |

56 |

57 |

58 |

我的即兴写作技巧

59 |

60 | 即兴写作，我这里的意思就是要在一两个小时之内，完成一个一千多字小作品。这里要给大家分享的技巧，虽然都是一些简单生硬的行文套路，文章体式，但是确实可以让我们全心的专注于表达自己的思想，给思维以轨道，把我们的杂乱的概念流，整理成一篇结构清楚可读性强的文章。 61 |

62 | 63 |

64 |

65 |

66 |

67 |

68 |

Linux 适合我吗?

69 |

70 | Peter: 本文本来发表在我的开源书籍 Linux Guide for Complete Beginners 的前言部分，那是 2010 年的事了，我在一家培训机构教 Linux 。这篇文章是我当时用来忽悠大家都来学 Linux 的，随着本书改版，这些内容不太适合放在书里面了，不过现在看来依然被自己的偏执和真诚感动，所以转载在这里。 71 |

72 |

本文针对的问题是：现在的中国，很多年轻人不知道以什么谋生，另外一些人能赚到足够的钱却不喜欢他们的工作，想要换一个，从而不浪费自己的才华。所以这些人要问自己：Linux 适合我吗？

73 | 74 |

75 |

76 |

77 | 78 | 79 |

80 | 98 |

99 | 100 | 101 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flex 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 24 | 43 |

44 |

45 |

46 |

47 |

48 | hi, i'm 49 | peter wang 50 |

51 |

web developer

52 | 53 |

54 |

55 |

56 | 57 |

58 | 76 |

77 | 78 | 79 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | 2 | $(".app-footer a").each(function(){ 3 | var path = document.location.pathname.split('/'); 4 | var page = path[path.length - 1]; 5 | var href = $(this).attr("href"); 6 | if (href === page) { 7 | $(this).addClass("active"); 8 | return false; 9 | } 10 | }); 11 | 12 | $(".sidebar a").each(function(){ 13 | var path = document.location.pathname.split('/'); 14 | var page = path[path.length - 1]; 15 | var href = $(this).attr("href"); 16 | if (href === page) { 17 | $(this).addClass("active"); 18 | return false; 19 | } 20 | }); 21 | -------------------------------------------------------------------------------- /source/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /source/assets/beauty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/beauty.jpg -------------------------------------------------------------------------------- /source/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/favicon.png -------------------------------------------------------------------------------- /source/assets/github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/github.jpg -------------------------------------------------------------------------------- /source/assets/home-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/home-bg.jpg -------------------------------------------------------------------------------- /source/assets/html7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/html7.jpg -------------------------------------------------------------------------------- /source/assets/linux.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/linux.jpg -------------------------------------------------------------------------------- /source/assets/peter.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/peter.jpeg -------------------------------------------------------------------------------- /source/assets/rails-tricks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/rails-tricks.jpg -------------------------------------------------------------------------------- /source/assets/rails10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/rails10.jpg -------------------------------------------------------------------------------- /source/assets/subl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/subl.jpg -------------------------------------------------------------------------------- /source/assets/zhifu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/happypeter/flex/ff10a9cd2f22589fdfcb4f87d02a824c099ff77d/source/assets/zhifu.png -------------------------------------------------------------------------------- /source/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var prefix = require('gulp-autoprefixer'); 4 | var wrap = require('gulp-wrap'); 5 | var browserSync = require('browser-sync'); 6 | 7 | 8 | gulp.task('browser-sync', ['build', 'sass', 'cp'], function() { 9 | browserSync({ 10 | server: { 11 | baseDir: '..' 12 | } 13 | }); 14 | }); 15 | 16 | gulp.task('cp', function () { 17 | return gulp.src(['js/main.js','assets/*'], { base: '.' }) 18 | .pipe(gulp.dest('..')); 19 | }); 20 | 21 | gulp.task('build', function(){ 22 | gulp.src("pages/*.html") 23 | .pipe(wrap({src:"layout/default.html"})) 24 | .pipe(gulp.dest("..")); 25 | }); 26 | 27 | function handleError(err) { 28 | console.log(err.toString()); 29 | this.emit('end'); 30 | } 31 | 32 | 33 | gulp.task('sass', function(){ 34 | gulp.src('styles/main.scss') 35 | .pipe(sass()).on('error', handleError) 36 | .pipe(prefix()) 37 | .pipe(gulp.dest('../styles')) 38 | .pipe(browserSync.reload({stream:true}));; 39 | }); 40 | 41 | gulp.task('rebuild', ['build'], function () { 42 | browserSync.reload(); 43 | }); 44 | 45 | gulp.task('watch', function(){ 46 | gulp.watch(['**/*.html'], ['rebuild']); 47 | gulp.watch(['styles/*.scss'], ['sass']); 48 | gulp.watch(['js/main.js'], ['cp']); 49 | }) 50 | 51 | gulp.task('default', ['browser-sync', 'watch']); 52 | -------------------------------------------------------------------------------- /source/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | $(".app-footer a").each(function(){ 3 | var path = document.location.pathname.split('/'); 4 | var page = path[path.length - 1]; 5 | var href = $(this).attr("href"); 6 | if (href === page) { 7 | $(this).addClass("active"); 8 | return false; 9 | } 10 | }); 11 | 12 | $(".sidebar a").each(function(){ 13 | var path = document.location.pathname.split('/'); 14 | var page = path[path.length - 1]; 15 | var href = $(this).attr("href"); 16 | if (href === page) { 17 | $(this).addClass("active"); 18 | return false; 19 | } 20 | }); 21 | -------------------------------------------------------------------------------- /source/layout/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flex 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 24 | 43 |

44 | <%= contents %> 45 |

46 | 64 |

65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /source/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "source", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "browser-sync": "^2.10.1", 13 | "gulp": "^3.9.0", 14 | "gulp-autoprefixer": "^3.1.0", 15 | "gulp-sass": "^2.1.1", 16 | "gulp-wrap": "^0.11.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /source/pages/about.html: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 |

个人信息

5 |

6 |

喜欢写代码，喜欢写字，更喜欢录视频

7 |

很多朋友叫他“录视频的那个 Peter”

8 |

自封“视频死磕侠”

9 |

10 |

联系方式

11 |

邮箱：happypeter1983@gmail.com

12 |

微信：happypeter1983

13 |

社交账号

14 | 19 |

20 | 21 | 22 | -------------------------------------------------------------------------------- /source/pages/blog.html: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 |

5 |

不做东西啥也学不成

6 |

7 | 要做出一个东西来的冲动，我觉得首先是一种情怀，一种渴望用手工而不是说话的形式跟他人交流的愿望。比如你喜欢画漫画，想要搭建一个小网站来和他人分享你的作品，那就首先写几个 Html 页面。这样，你学了什么是编辑器，浏览器，文件后缀，这些概念，你可能最初觉得这些概念本身没什么意思，但是东西出来了，你就很幸福，有进一步学下去的兴趣了。 8 |

9 | 10 |

11 |

12 |

13 |

14 |

15 |

我的即兴写作技巧

16 |

17 | 即兴写作，我这里的意思就是要在一两个小时之内，完成一个一千多字小作品。这里要给大家分享的技巧，虽然都是一些简单生硬的行文套路，文章体式，但是确实可以让我们全心的专注于表达自己的思想，给思维以轨道，把我们的杂乱的概念流，整理成一篇结构清楚可读性强的文章。 18 |

19 | 20 |

21 |

22 |

23 |

24 |

25 |

Linux 适合我吗?

26 |

27 | Peter: 本文本来发表在我的开源书籍 Linux Guide for Complete Beginners 的前言部分，那是 2010 年的事了，我在一家培训机构教 Linux 。这篇文章是我当时用来忽悠大家都来学 Linux 的，随着本书改版，这些内容不太适合放在书里面了，不过现在看来依然被自己的偏执和真诚感动，所以转载在这里。 28 |

29 |

30 | 31 |

32 |

33 |

34 | 35 | -------------------------------------------------------------------------------- /source/pages/index.html: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 |

5 | hi, i'm 6 | peter wang 7 |

8 |

web developer

9 | 10 |

11 |

12 |

13 | -------------------------------------------------------------------------------- /source/pages/work.html: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 |

5 | linux 的知识点浩如烟海，其实作为开发者，日常用到的只是里面的一小部分。但是初学者是很难去判别哪些知识是超范围的，那么就让本课程成为你初入 Linux 世界的一个向导。 6 |

7 |

8 |

9 |

10 |

11 | sublime 在功能和速度方面不输给 vim ，在界面美观上不输给任何其他编辑器，本课程的目的是带大家高效使用 sublime ，课程中会展示扩展包安装，自定制配置和快捷键等最实用的技巧。同时整体上保证你可以把握她的使用思路，让你在课后做自己的定制的时候不会迷路。 12 |

13 |

14 |

15 |

16 |

17 | Web 开发是个复杂工作，涉及到得技术种类繁多。Ruby On Rails 可以为提供一套 best practice ，让新手不至于在选择和配置各种要素上面迷路，从而能快速达成自己的想法。本课程带你手把手一起做出一个小而美的 Web App，穿插一些难点的演示拆解。不求面面俱到，但求实用生动。 18 |

19 |

20 |

21 |

22 |

23 | 介绍如何在我们自己的网站中集成支付包收款接口。配有一套完整的 Rails 项目实例代码。https://github.com/happypeter/haoqi_alipay 24 |

25 |

26 |

27 |

28 |

29 | html 单页面施工七日记。面向初学者的单页面开发实战项目。 30 |

31 |

32 |

33 |

34 |

35 | 课程会分成很多短视频来分享给大家。每个视频中瞄准一个特定功能，配套文字稿里面有每一小步的代码和参考资料链接。最终产品的代码在这个github仓库这里。总之我是想做成我自己当年作为初学者时最想看的课程。 36 |

37 |

38 |

39 |

40 |

41 | 版本控制能够大大提高程序员的工作效率，但是通常会涉及到命令行操作，学习曲线陡峭。本课程中使用 Github 网站和图形化客户端来完成版本控制工作，提供一套简单实用的流程，配合图解方式的原理讲解，让大家以最短的时间上手 Git 和 Github 。 42 |

43 |

44 |

45 | -------------------------------------------------------------------------------- /source/styles/_about.scss: -------------------------------------------------------------------------------- 1 | .about { 2 | margin-bottom: 30px; 3 | font-size: 15px; 4 | .background { 5 | background: url('../assets/beauty.jpg'); 6 | background-size: cover; 7 | background-position: center center; 8 | background-repeat: no-repeat; 9 | height: 260px; 10 | margin-bottom: 10px; 11 | } 12 | .avatar { 13 | display: block; 14 | width: 100px; 15 | height: 100px; 16 | border-radius: 50%; 17 | padding: 5px; 18 | margin: 0 auto; 19 | margin-top: -60px; 20 | background-color: #fafafa; 21 | border: 1px solid #fafafa; 22 | } 23 | h2 { 24 | font-size: 20px; 25 | border-left: 5px solid $primary-color-dark; 26 | padding-left: 20px; 27 | margin-bottom: 24px; 28 | margin-top: 0; 29 | margin-left: 16px; 30 | color: $primary-color; 31 | line-height: 1.5; 32 | } 33 | .hobby { 34 | margin-left: 16px; 35 | } 36 | .intro { 37 | margin: 10px 16px 24px 16px; 38 | } 39 | .email { 40 | margin-left: 16px; 41 | margin-bottom: 10px; 42 | } 43 | .weixin { 44 | margin-left: 16px; 45 | margin-bottom: 24px; 46 | } 47 | .social { 48 | margin-left: 16px; 49 | li { 50 | display: inline-block; 51 | width: 40px; 52 | height: 40px; 53 | line-height: 40px; 54 | border-radius: 50%; 55 | text-align: center; 56 | margin-right: 10px; 57 | background-color: $accent-color; 58 | } 59 | i { 60 | font-size: 16px; 61 | color: #fff; 62 | line-height: 40px; 63 | } 64 | } 65 | } 66 | @media all and (min-width: 768px) { 67 | .about { 68 | text-align: center; 69 | font-size: 17px; 70 | .avatar { 71 | width: 150px; 72 | height: 150px; 73 | margin-top: -85px; 74 | } 75 | h2 { 76 | font-size: 24px; 77 | width: 100px; 78 | padding-left: 0; 79 | padding-right: 0; 80 | padding-bottom: 10px; 81 | margin: 35px auto; 82 | text-align: center; 83 | border-left: none; 84 | border-bottom: 5px solid $primary-color-dark; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /source/styles/_blogs.scss: -------------------------------------------------------------------------------- 1 | .blogs { 2 | padding: 16px; 3 | display: flex; 4 | flex-direction: column; 5 | .post { 6 | background-color: #fff; 7 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); 8 | margin-bottom: 40px; 9 | border-radius: 10px; 10 | display: flex; 11 | flex-direction: column; 12 | .p-header { 13 | text-align: center; 14 | height: 100px; 15 | background-color: $primary-color; 16 | border-radius: 10px 10px 0 0; 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | span { 21 | font-size: 20px; 22 | color: #fff; 23 | border: 1px solid #fff; 24 | width: 60px; 25 | height: 60px; 26 | line-height: 60px; 27 | border-radius: 50%; 28 | margin: 0 auto; 29 | } 30 | } 31 | .p-content { 32 | padding: 16px; 33 | h1 { 34 | margin-top: 0; 35 | font-size: 18px; 36 | } 37 | } 38 | .p-action { 39 | transition: all 450ms ease; 40 | display: inline-block; 41 | background-color: #fff; 42 | border: 1px solid $accent-color; 43 | border-radius: 20px; 44 | padding: 5px 20px; 45 | color: $accent-color; 46 | font-size: 14px; 47 | &:hover { 48 | background-color: $accent-color; 49 | color: #fff; 50 | } 51 | } 52 | } 53 | } 54 | 55 | @media (min-width: 1068px) { 56 | .blogs { 57 | width: 700px; 58 | margin: 30px auto; 59 | } 60 | } 61 | 62 | @media (min-width: 1500px) { 63 | .blogs { 64 | width: 960px; 65 | .post { 66 | display: flex; 67 | flex-direction: row; 68 | .p-header { 69 | order: 2; 70 | width: 100px; 71 | height: auto; 72 | border-radius: 0 10px 10px 0; 73 | span { 74 | 75 | } 76 | } 77 | .p-content { 78 | flex-grow: 1; 79 | width: 600px; 80 | font-size: 16px; 81 | h1 { 82 | font-size: 20px; 83 | margin-top: 0; 84 | } 85 | } 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /source/styles/_common.scss: -------------------------------------------------------------------------------- 1 | /* Palette generated by Material Palette - materialpalette.com/cyan/pink */ 2 | 3 | $primary-color-dark: #0097A7; 4 | $primary-color: #00BCD4; 5 | $primary-color-light: #B2EBF2; 6 | $primary-color-text: #FFFFFF; 7 | $accent-color: #FF4081; 8 | $primary-text-color: #212121; 9 | $secondary-text-color: #727272; 10 | $divider-color: #B6B6B6; 11 | 12 | body { 13 | font-family: sans-serif; 14 | margin: 0; 15 | -webkit-font-smoothing: antialiased; 16 | color: $secondary-text-color; 17 | } 18 | 19 | * { 20 | box-sizing: border-box; 21 | } 22 | 23 | a { 24 | text-decoration: none; 25 | } 26 | ul { 27 | padding: 0; 28 | } 29 | -------------------------------------------------------------------------------- /source/styles/_home.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | padding: 0; 3 | position: relative; 4 | } 5 | .home { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | background: url("../assets/home-bg.jpg"); 12 | background-size: cover; 13 | background-position: center center; 14 | background-repeat: no-repeat; 15 | background-attachment: fixed; 16 | .overlay { 17 | background: rgba(0, 0, 0, 0.7); 18 | width: 100%; 19 | height: 100%; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | color: #fff; 24 | text-align: center; 25 | text-transform: uppercase; 26 | } 27 | .title { 28 | font-size: 42px; 29 | font-weight: 700; 30 | margin-bottom: 15px; 31 | margin-top: 0; 32 | } 33 | .subtitle { 34 | font-size: 14px; 35 | font-weight: 300; 36 | margin-top: 0; 37 | margin-bottom: 38px; 38 | } 39 | .name { 40 | color: $primary-color; 41 | } 42 | button { 43 | display: inline-block; 44 | border: none; 45 | border-radius: 2px; 46 | height: 36px; 47 | min-width: 100px; 48 | font-size: 14px; 49 | color: #fff; 50 | background-color: $primary-color; 51 | text-transform: uppercase; 52 | &:focus { 53 | outline: none; 54 | } 55 | &:hover { 56 | background-color: #0097a7; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /source/styles/_layout.scss: -------------------------------------------------------------------------------- 1 | 2 | .app-wrap { 3 | height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | } 7 | .app-header { 8 | padding: 10px; 9 | color: $primary-color-text; 10 | background-color: $primary-color; 11 | height: 80px; 12 | display: flex; 13 | align-items: center; 14 | justify-content: space-between; 15 | border-bottom: 2px solid #fff59d; 16 | flex-shrink: 0; 17 | a { 18 | font-size: 11px; 19 | color: $primary-color-text; 20 | } 21 | .button { 22 | background: rgba(0, 0, 0, 0.1); 23 | padding: 10px 15px; 24 | border-radius: 4px; 25 | } 26 | } 27 | 28 | .content { 29 | background-color: #fafafa; 30 | flex-grow: 1; 31 | line-height: 1.8; 32 | padding: 16px; 33 | overflow-y: scroll; 34 | } 35 | 36 | .app-footer { 37 | height: 80px; 38 | flex-shrink: 0; 39 | display: flex; 40 | background-color: $primary-color; 41 | border-top: 1px solid #e6e6e6; 42 | a { 43 | padding: 15px; 44 | text-align: center; 45 | color: rgba(0,0,0,0.5); 46 | border-left: 2px solid rgba(0,0,0,0.1); 47 | flex-grow: 1; 48 | &:first-child { 49 | border-left: 0; 50 | } 51 | i { 52 | display: block; 53 | font-size: 25px; 54 | color: white; 55 | text-shadow: 3px 3px 0 rgba(0,0,0,0.1); 56 | padding-bottom: 10px; 57 | } 58 | &:hover { 59 | border-bottom: 4px solid $accent-color; 60 | } 61 | } 62 | a.active { 63 | border-bottom: 4px solid $accent-color; 64 | } 65 | } 66 | 67 | .sidebar { 68 | display: none; 69 | width: 300px; 70 | flex-shrink: 0; 71 | background-color: $primary-color; 72 | a.active { 73 | color: #fff; 74 | background-color: rgba(0,0,0,0.2); 75 | } 76 | h1 { 77 | margin: 0; 78 | text-align: center; 79 | padding: 20px; 80 | color: #fff; 81 | border-bottom: 2px solid #fff59d; 82 | } 83 | a { 84 | display: flex; 85 | padding: 20px; 86 | font-size: 18px; 87 | color: rgba(0,0,0,0.5); 88 | &:hover { 89 | background-color: rgba(0,0,0,0.1); 90 | } 91 | i { 92 | color: #fff; 93 | text-shadow: 3px 3px 0 rgba(0,0,0,0.1); 94 | display: inline-block; 95 | margin-right: 10px; 96 | } 97 | } 98 | } 99 | 100 | @media (min-width: 800px) { 101 | .app-wrap { 102 | flex-direction: row; 103 | } 104 | .app-header , .app-footer { 105 | display: none; 106 | } 107 | .sidebar { 108 | display: flex; 109 | flex-direction: column; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /source/styles/_work.scss: -------------------------------------------------------------------------------- 1 | .course { 2 | margin: 0 auto; 3 | padding: 16px; 4 | .card { 5 | transition: all 450ms ease; 6 | background-color: #fff; 7 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); 8 | text-align: center; 9 | padding: 10px; 10 | margin: 20px 0; 11 | width: 100%; 12 | img { 13 | max-width: 100%; 14 | margin: 0 auto; 15 | border: 1px solid #eee; 16 | } 17 | .text { 18 | margin-top: 15px; 19 | margin-bottom: 15px; 20 | word-wrap: break-word; 21 | } 22 | &:hover { 23 | cursor: pointer; 24 | box-shadow: 0 1px 12px rgba(0, 0, 0, 0.12), 0 1px 8px rgba(0, 0, 0, 0.24); 25 | } 26 | } 27 | } 28 | 29 | @media (min-width: 1000px) { 30 | .course { 31 | display: flex; 32 | flex-wrap: wrap; 33 | .card { 34 | margin: 20px; 35 | width: calc(50% - 40px); 36 | } 37 | } 38 | } 39 | 40 | @media (min-width: 1200px) { 41 | .course { 42 | .card { 43 | width: calc(33.33333% - 40px); 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /source/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import "common"; 2 | @import "layout"; 3 | @import "work"; 4 | @import "blogs"; 5 | @import "home"; 6 | @import "about"; 7 | -------------------------------------------------------------------------------- /styles/main.css: -------------------------------------------------------------------------------- 1 | /* Palette generated by Material Palette - materialpalette.com/cyan/pink */ 2 | body { 3 | font-family: sans-serif; 4 | margin: 0; 5 | -webkit-font-smoothing: antialiased; 6 | color: #727272; } 7 | 8 | * { 9 | box-sizing: border-box; } 10 | 11 | a { 12 | text-decoration: none; } 13 | 14 | ul { 15 | padding: 0; } 16 | 17 | .app-wrap { 18 | height: 100vh; 19 | display: -webkit-box; 20 | display: -webkit-flex; 21 | display: -ms-flexbox; 22 | display: flex; 23 | -webkit-box-orient: vertical; 24 | -webkit-box-direction: normal; 25 | -webkit-flex-direction: column; 26 | -ms-flex-direction: column; 27 | flex-direction: column; } 28 | 29 | .app-header { 30 | padding: 10px; 31 | color: #FFFFFF; 32 | background-color: #00BCD4; 33 | height: 80px; 34 | display: -webkit-box; 35 | display: -webkit-flex; 36 | display: -ms-flexbox; 37 | display: flex; 38 | -webkit-box-align: center; 39 | -webkit-align-items: center; 40 | -ms-flex-align: center; 41 | align-items: center; 42 | -webkit-box-pack: justify; 43 | -webkit-justify-content: space-between; 44 | -ms-flex-pack: justify; 45 | justify-content: space-between; 46 | border-bottom: 2px solid #fff59d; 47 | -webkit-flex-shrink: 0; 48 | -ms-flex-negative: 0; 49 | flex-shrink: 0; } 50 | .app-header a { 51 | font-size: 11px; 52 | color: #FFFFFF; } 53 | .app-header .button { 54 | background: rgba(0, 0, 0, 0.1); 55 | padding: 10px 15px; 56 | border-radius: 4px; } 57 | 58 | .content { 59 | background-color: #fafafa; 60 | -webkit-box-flex: 1; 61 | -webkit-flex-grow: 1; 62 | -ms-flex-positive: 1; 63 | flex-grow: 1; 64 | line-height: 1.8; 65 | padding: 16px; 66 | overflow-y: scroll; } 67 | 68 | .app-footer { 69 | height: 80px; 70 | -webkit-flex-shrink: 0; 71 | -ms-flex-negative: 0; 72 | flex-shrink: 0; 73 | display: -webkit-box; 74 | display: -webkit-flex; 75 | display: -ms-flexbox; 76 | display: flex; 77 | background-color: #00BCD4; 78 | border-top: 1px solid #e6e6e6; } 79 | .app-footer a { 80 | padding: 15px; 81 | text-align: center; 82 | color: rgba(0, 0, 0, 0.5); 83 | border-left: 2px solid rgba(0, 0, 0, 0.1); 84 | -webkit-box-flex: 1; 85 | -webkit-flex-grow: 1; 86 | -ms-flex-positive: 1; 87 | flex-grow: 1; } 88 | .app-footer a:first-child { 89 | border-left: 0; } 90 | .app-footer a i { 91 | display: block; 92 | font-size: 25px; 93 | color: white; 94 | text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); 95 | padding-bottom: 10px; } 96 | .app-footer a:hover { 97 | border-bottom: 4px solid #FF4081; } 98 | .app-footer a.active { 99 | border-bottom: 4px solid #FF4081; } 100 | 101 | .sidebar { 102 | display: none; 103 | width: 300px; 104 | -webkit-flex-shrink: 0; 105 | -ms-flex-negative: 0; 106 | flex-shrink: 0; 107 | background-color: #00BCD4; } 108 | .sidebar a.active { 109 | color: #fff; 110 | background-color: rgba(0, 0, 0, 0.2); } 111 | .sidebar h1 { 112 | margin: 0; 113 | text-align: center; 114 | padding: 20px; 115 | color: #fff; 116 | border-bottom: 2px solid #fff59d; } 117 | .sidebar a { 118 | display: -webkit-box; 119 | display: -webkit-flex; 120 | display: -ms-flexbox; 121 | display: flex; 122 | padding: 20px; 123 | font-size: 18px; 124 | color: rgba(0, 0, 0, 0.5); } 125 | .sidebar a:hover { 126 | background-color: rgba(0, 0, 0, 0.1); } 127 | .sidebar a i { 128 | color: #fff; 129 | text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); 130 | display: inline-block; 131 | margin-right: 10px; } 132 | 133 | @media (min-width: 800px) { 134 | .app-wrap { 135 | -webkit-box-orient: horizontal; 136 | -webkit-box-direction: normal; 137 | -webkit-flex-direction: row; 138 | -ms-flex-direction: row; 139 | flex-direction: row; } 140 | .app-header, .app-footer { 141 | display: none; } 142 | .sidebar { 143 | display: -webkit-box; 144 | display: -webkit-flex; 145 | display: -ms-flexbox; 146 | display: flex; 147 | -webkit-box-orient: vertical; 148 | -webkit-box-direction: normal; 149 | -webkit-flex-direction: column; 150 | -ms-flex-direction: column; 151 | flex-direction: column; } } 152 | 153 | .course { 154 | margin: 0 auto; 155 | padding: 16px; } 156 | .course .card { 157 | -webkit-transition: all 450ms ease; 158 | transition: all 450ms ease; 159 | background-color: #fff; 160 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); 161 | text-align: center; 162 | padding: 10px; 163 | margin: 20px 0; 164 | width: 100%; } 165 | .course .card img { 166 | max-width: 100%; 167 | margin: 0 auto; 168 | border: 1px solid #eee; } 169 | .course .card .text { 170 | margin-top: 15px; 171 | margin-bottom: 15px; 172 | word-wrap: break-word; } 173 | .course .card:hover { 174 | cursor: pointer; 175 | box-shadow: 0 1px 12px rgba(0, 0, 0, 0.12), 0 1px 8px rgba(0, 0, 0, 0.24); } 176 | 177 | @media (min-width: 1000px) { 178 | .course { 179 | display: -webkit-box; 180 | display: -webkit-flex; 181 | display: -ms-flexbox; 182 | display: flex; 183 | -webkit-flex-wrap: wrap; 184 | -ms-flex-wrap: wrap; 185 | flex-wrap: wrap; } 186 | .course .card { 187 | margin: 20px; 188 | width: calc(50% - 40px); } } 189 | 190 | @media (min-width: 1200px) { 191 | .course .card { 192 | width: calc(33.33333% - 40px); } } 193 | 194 | .blogs { 195 | padding: 16px; 196 | display: -webkit-box; 197 | display: -webkit-flex; 198 | display: -ms-flexbox; 199 | display: flex; 200 | -webkit-box-orient: vertical; 201 | -webkit-box-direction: normal; 202 | -webkit-flex-direction: column; 203 | -ms-flex-direction: column; 204 | flex-direction: column; } 205 | .blogs .post { 206 | background-color: #fff; 207 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); 208 | margin-bottom: 40px; 209 | border-radius: 10px; 210 | display: -webkit-box; 211 | display: -webkit-flex; 212 | display: -ms-flexbox; 213 | display: flex; 214 | -webkit-box-orient: vertical; 215 | -webkit-box-direction: normal; 216 | -webkit-flex-direction: column; 217 | -ms-flex-direction: column; 218 | flex-direction: column; } 219 | .blogs .post .p-header { 220 | text-align: center; 221 | height: 100px; 222 | background-color: #00BCD4; 223 | border-radius: 10px 10px 0 0; 224 | display: -webkit-box; 225 | display: -webkit-flex; 226 | display: -ms-flexbox; 227 | display: flex; 228 | -webkit-box-orient: vertical; 229 | -webkit-box-direction: normal; 230 | -webkit-flex-direction: column; 231 | -ms-flex-direction: column; 232 | flex-direction: column; 233 | -webkit-box-pack: center; 234 | -webkit-justify-content: center; 235 | -ms-flex-pack: center; 236 | justify-content: center; } 237 | .blogs .post .p-header span { 238 | font-size: 20px; 239 | color: #fff; 240 | border: 1px solid #fff; 241 | width: 60px; 242 | height: 60px; 243 | line-height: 60px; 244 | border-radius: 50%; 245 | margin: 0 auto; } 246 | .blogs .post .p-content { 247 | padding: 16px; } 248 | .blogs .post .p-content h1 { 249 | margin-top: 0; 250 | font-size: 18px; } 251 | .blogs .post .p-action { 252 | -webkit-transition: all 450ms ease; 253 | transition: all 450ms ease; 254 | display: inline-block; 255 | background-color: #fff; 256 | border: 1px solid #FF4081; 257 | border-radius: 20px; 258 | padding: 5px 20px; 259 | color: #FF4081; 260 | font-size: 14px; } 261 | .blogs .post .p-action:hover { 262 | background-color: #FF4081; 263 | color: #fff; } 264 | 265 | @media (min-width: 1068px) { 266 | .blogs { 267 | width: 700px; 268 | margin: 30px auto; } } 269 | 270 | @media (min-width: 1500px) { 271 | .blogs { 272 | width: 960px; } 273 | .blogs .post { 274 | display: -webkit-box; 275 | display: -webkit-flex; 276 | display: -ms-flexbox; 277 | display: flex; 278 | -webkit-box-orient: horizontal; 279 | -webkit-box-direction: normal; 280 | -webkit-flex-direction: row; 281 | -ms-flex-direction: row; 282 | flex-direction: row; } 283 | .blogs .post .p-header { 284 | -webkit-box-ordinal-group: 3; 285 | -webkit-order: 2; 286 | -ms-flex-order: 2; 287 | order: 2; 288 | width: 100px; 289 | height: auto; 290 | border-radius: 0 10px 10px 0; } 291 | .blogs .post .p-content { 292 | -webkit-box-flex: 1; 293 | -webkit-flex-grow: 1; 294 | -ms-flex-positive: 1; 295 | flex-grow: 1; 296 | width: 600px; 297 | font-size: 16px; } 298 | .blogs .post .p-content h1 { 299 | font-size: 20px; 300 | margin-top: 0; } } 301 | 302 | .content { 303 | padding: 0; 304 | position: relative; } 305 | 306 | .home { 307 | position: absolute; 308 | top: 0; 309 | left: 0; 310 | right: 0; 311 | bottom: 0; 312 | background: url("../assets/home-bg.jpg"); 313 | background-size: cover; 314 | background-position: center center; 315 | background-repeat: no-repeat; 316 | background-attachment: fixed; } 317 | .home .overlay { 318 | background: rgba(0, 0, 0, 0.7); 319 | width: 100%; 320 | height: 100%; 321 | display: -webkit-box; 322 | display: -webkit-flex; 323 | display: -ms-flexbox; 324 | display: flex; 325 | -webkit-box-orient: vertical; 326 | -webkit-box-direction: normal; 327 | -webkit-flex-direction: column; 328 | -ms-flex-direction: column; 329 | flex-direction: column; 330 | -webkit-box-pack: center; 331 | -webkit-justify-content: center; 332 | -ms-flex-pack: center; 333 | justify-content: center; 334 | color: #fff; 335 | text-align: center; 336 | text-transform: uppercase; } 337 | .home .title { 338 | font-size: 42px; 339 | font-weight: 700; 340 | margin-bottom: 15px; 341 | margin-top: 0; } 342 | .home .subtitle { 343 | font-size: 14px; 344 | font-weight: 300; 345 | margin-top: 0; 346 | margin-bottom: 38px; } 347 | .home .name { 348 | color: #00BCD4; } 349 | .home button { 350 | display: inline-block; 351 | border: none; 352 | border-radius: 2px; 353 | height: 36px; 354 | min-width: 100px; 355 | font-size: 14px; 356 | color: #fff; 357 | background-color: #00BCD4; 358 | text-transform: uppercase; } 359 | .home button:focus { 360 | outline: none; } 361 | .home button:hover { 362 | background-color: #0097a7; } 363 | 364 | .about { 365 | margin-bottom: 30px; 366 | font-size: 15px; } 367 | .about .background { 368 | background: url("../assets/beauty.jpg"); 369 | background-size: cover; 370 | background-position: center center; 371 | background-repeat: no-repeat; 372 | height: 260px; 373 | margin-bottom: 10px; } 374 | .about .avatar { 375 | display: block; 376 | width: 100px; 377 | height: 100px; 378 | border-radius: 50%; 379 | padding: 5px; 380 | margin: 0 auto; 381 | margin-top: -60px; 382 | background-color: #fafafa; 383 | border: 1px solid #fafafa; } 384 | .about h2 { 385 | font-size: 20px; 386 | border-left: 5px solid #0097A7; 387 | padding-left: 20px; 388 | margin-bottom: 24px; 389 | margin-top: 0; 390 | margin-left: 16px; 391 | color: #00BCD4; 392 | line-height: 1.5; } 393 | .about .hobby { 394 | margin-left: 16px; } 395 | .about .intro { 396 | margin: 10px 16px 24px 16px; } 397 | .about .email { 398 | margin-left: 16px; 399 | margin-bottom: 10px; } 400 | .about .weixin { 401 | margin-left: 16px; 402 | margin-bottom: 24px; } 403 | .about .social { 404 | margin-left: 16px; } 405 | .about .social li { 406 | display: inline-block; 407 | width: 40px; 408 | height: 40px; 409 | line-height: 40px; 410 | border-radius: 50%; 411 | text-align: center; 412 | margin-right: 10px; 413 | background-color: #FF4081; } 414 | .about .social i { 415 | font-size: 16px; 416 | color: #fff; 417 | line-height: 40px; } 418 | 419 | @media all and (min-width: 768px) { 420 | .about { 421 | text-align: center; 422 | font-size: 17px; } 423 | .about .avatar { 424 | width: 150px; 425 | height: 150px; 426 | margin-top: -85px; } 427 | .about h2 { 428 | font-size: 24px; 429 | width: 100px; 430 | padding-left: 0; 431 | padding-right: 0; 432 | padding-bottom: 10px; 433 | margin: 35px auto; 434 | text-align: center; 435 | border-left: none; 436 | border-bottom: 5px solid #0097A7; } } 437 | -------------------------------------------------------------------------------- /work.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flex 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 24 | 43 |

44 |

45 |

46 |

47 |

48 | linux 的知识点浩如烟海，其实作为开发者，日常用到的只是里面的一小部分。但是初学者是很难去判别哪些知识是超范围的，那么就让本课程成为你初入 Linux 世界的一个向导。 49 |

50 |

51 |

52 |

53 |

54 | sublime 在功能和速度方面不输给 vim ，在界面美观上不输给任何其他编辑器，本课程的目的是带大家高效使用 sublime ，课程中会展示扩展包安装，自定制配置和快捷键等最实用的技巧。同时整体上保证你可以把握她的使用思路，让你在课后做自己的定制的时候不会迷路。 55 |

56 |

57 |

58 |

59 |

60 | Web 开发是个复杂工作，涉及到得技术种类繁多。Ruby On Rails 可以为提供一套 best practice ，让新手不至于在选择和配置各种要素上面迷路，从而能快速达成自己的想法。本课程带你手把手一起做出一个小而美的 Web App，穿插一些难点的演示拆解。不求面面俱到，但求实用生动。 61 |

62 |

63 |

64 |

65 |

66 | 介绍如何在我们自己的网站中集成支付包收款接口。配有一套完整的 Rails 项目实例代码。https://github.com/happypeter/haoqi_alipay 67 |

68 |

69 |

70 |

71 |

72 | html 单页面施工七日记。面向初学者的单页面开发实战项目。 73 |

74 |

75 |

76 |

77 |

78 | 课程会分成很多短视频来分享给大家。每个视频中瞄准一个特定功能，配套文字稿里面有每一小步的代码和参考资料链接。最终产品的代码在这个github仓库这里。总之我是想做成我自己当年作为初学者时最想看的课程。 79 |

80 |

81 |

82 |

83 |

84 | 版本控制能够大大提高程序员的工作效率，但是通常会涉及到命令行操作，学习曲线陡峭。本课程中使用 Github 网站和图形化客户端来完成版本控制工作，提供一套简单实用的流程，配合图解方式的原理讲解，让大家以最短的时间上手 Git 和 Github 。 85 |

86 |

87 |

88 | 89 |

90 | 108 |

109 | 110 | 111 | --------------------------------------------------------------------------------

Peter's Corner

Peter's Corner

个人信息

联系方式

社交账号

Peter's Corner

Peter's Corner

不做东西啥也学不成

我的即兴写作技巧

Linux 适合我吗?

Peter's Corner

Peter's Corner

48 | hi, i'm 49 | peter wang 50 |

web developer

Peter's Corner

Peter's Corner

个人信息

联系方式

社交账号

不做东西啥也学不成

我的即兴写作技巧

Linux 适合我吗?

5 | hi, i'm 6 | peter wang 7 |

web developer

Peter's Corner

Peter's Corner