-
- Flying Swing Layout
-- 本站总访问量次，本站访客数人次，本文总阅读量次 -
-- - Site powered by Jekyll & Github Pages. - - - Theme designed by HyG. - +
+ diff --git a/_posts/2015-02-10-welcome-to-jekyll.markdown b/_posts/2015-02-10-welcome-to-jekyll.markdown deleted file mode 100644 index 783692c48d3..00000000000 --- a/_posts/2015-02-10-welcome-to-jekyll.markdown +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: post -title: "hello jekyll!" -date: 2015-02-10 15:14:54 -categories: jekyll -tags: jekyll -excerpt: 当年创建 jekyll 时默认的一篇文章，没什么意义，我也一直没删除，留个纪念吧。 -mathjax: true ---- - -You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. - -To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. - -Jekyll also offers powerful support for code snippets: - -```ruby -def print_hi(name) - puts "Hi, #{name}" -end -print_hi('Tom') -#=> prints 'Hi, Tom' to STDOUT. -``` - -Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll’s dedicated Help repository][jekyll-help]. - -[jekyll]: http://jekyllrb.com -[jekyll-gh]: https://github.com/jekyll/jekyll -[jekyll-help]: https://github.com/jekyll/jekyll-help - -Block Mathjax - -$$ -f(x) = ax + b -$$ - -Inline Mathjax $a \neq b$ - diff --git a/_posts/2015-02-12-create-my-blog-with-jekyll.md b/_posts/2015-02-12-create-my-blog-with-jekyll.md deleted file mode 100644 index ef555311f89..00000000000 --- a/_posts/2015-02-12-create-my-blog-with-jekyll.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: post -title: "Jekyll 搭建静态博客" -date: 2015-02-15 22:14:54 -categories: jekyll -tags: jekyll RubyGems ---- - -* content -{:toc} - -一直以来都想搭建一个自己的博客，但是近半年做项目太忙，再加上教研室的网络很坑爹，所以也一直没顾得上。之前用过 WordPress 托管在免费的京东云擎上，但是速度太慢。在知乎上看到一些相关的内容，于是选择了在github上用jekyll搭建博客。 - - - - - -## 搭建过程 - -在jekyll的官网上 [http://jekyllrb.com/](http://jekyllrb.com/) 其实已经说得比较明白了，我在这里还是简单的说一下吧。我用的是Windows系统。 -主要环节有：安装Ruby，安装RubyGems，安装jekyll，安装代码高亮插件，安装node.js - -### 安装Ruby - -ruby官网下载安装：[https://www.ruby-lang.org/en/downloads/](https://www.ruby-lang.org/en/downloads/) - -安装完成后配置环境变量 - -在命令提示符中，得到ruby版本号，如下图，即安装成功 - - - -### 安装RubyGems - -官网下载 [http://rubygems.org/pages/download](http://rubygems.org/pages/download) rubygems-2.4.5.zip - -cd到RubyGems目录 - - - -执行安装 - - - -### 用RubyGems安装Jekyll - -执行下面的语句安装 - - - -安装结束画面 - - - -至此jekyll就已经安装完毕了，后续就是个性化的自己设定了。 - -### 创建博客 - -在d盘新建一个工作区jekyllWorkspace - -cd到jekyllWorkspace - -执行jekyll new name创建新的工作区 - - - -文件结构如下： - - - -cd到博客文件夹，开启服务器 - - - -watch为了检测文件夹内的变化，即修改后不需要重新启动jekyll - -我的环境下启动报错(你的可能没有)，再安装yajl-ruby和rouge - - - -再次启动服务器成功 - - - -访问 http://localhost:4000/ - - - -详细文章页面 - - - -## 后续 - -* 整个安装过程参考了jekyll官网，注意jekyll还有一个简体中文官网，不过比较坑（我就被坑了），有些内容没有翻译过来，有可能会走弯路，建议如果想看中文的相关资料，也要中英对照着阅读。[jekyll中文网 http://jekyllcn.com](http://jekyllcn.com), [jekyll英文网 http://jekyllrb.com](http://jekyllrb.com) -* jekyll中的css是用sass写的，当然直接在`_sass/_layout.scss`中添加css也是可以的。 -* 本文是用Markdown格式来写的，相关语法可参考： [Markdown 语法说明 (简体中文版) http://wowubuntu.com/markdown/](http://wowubuntu.com/markdown/) -* 按照本文的说明搭建完博客后，用`github Pages`托管就可以看到了。注意，在github上面好像不支持rouge，所以要push到github上时，我将配置文件_config.yml中的代码高亮改变为`highlighter: pygments`就可以了 -* 博客默认是没有评论系统的，本文的评论系统使用了多说，详细安装办法可访问[多说官网 http://duoshuo.com/](http://duoshuo.com/)，当然也可以使用[搜狐畅言 http://changyan.sohu.com/](http://changyan.sohu.com/)作为评论系统。 -* 也可以绑定自己的域名，如果没有域名，可以在[godaddy http://www.godaddy.com/](http://www.godaddy.com/)上将域名放入购物车等待降价，买之。 -* 祝各位新年快乐！ - ---- - -## 可能出现的问题 - -### `hitimes/hitimes (LoadError)` - -**错误代码：** - -``` -C:/Ruby22/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- hitimes/hitimes (LoadError) -``` - -**解决方法：** - -在stackoverflow上又一个很好的解决方法。[hitimes require error when running jekyll serve on windows 8.1](http://stackoverflow.com/questions/28985481/hitimes-require-error-when-running-jekyll-serve-on-windows-8-1) 虽然上面的题主问的是 win 8.1 系统下的情况，但是同样适用于 win7。下面我简单翻译一下错误原因和解决方法。 - -> 可能是 Ruby 2.2 和 hitimes-1.2.2-x86-mingw32 中有一些 ABI 变化，少了一些相关的类库。 -> -> 所以卸载 hitimes 并通过 `--platform ruby` 重装即可。代码如下： - -``` -gem uni hitimes -**Remove ALL versions** -gem ins hitimes -v 1.2.1 --platform ruby -``` - -> 然后将自动重新编译 hitimes 并适用于 Ruby 2.2 - -下面是我自己的卸载和安装过程： - -``` -E:\GitWorkSpace\gaohaoyang.github.io>gem uni hitimes - -You have requested to uninstall the gem: - hitimes-1.2.2-x86-mingw32 - -timers-4.0.1 depends on hitimes (>= 0) -If you remove this gem, these dependencies will not be met. -Continue with Uninstall? [yN] y -Successfully uninstalled hitimes-1.2.2-x86-mingw32 - -E:\GitWorkSpace\gaohaoyang.github.io>gem ins hitimes -v 1.2.1 --platform ruby -Fetching: hitimes-1.2.1.gem (100%) -Temporarily enhancing PATH to include DevKit... -Building native extensions. This could take a while... -Successfully installed hitimes-1.2.1 -Parsing documentation for hitimes-1.2.1 -Installing ri documentation for hitimes-1.2.1 -Done installing documentation for hitimes after 1 seconds -1 gem installed -``` - - -关于，[hitimes](https://rubygems.org/gems/hitimes/versions/1.2.2) 是一个快速的高效的定时器解决方案库，详情可以去官网查看。 diff --git a/_posts/2015-03-21-teach-girlfriend-html-css.md b/_posts/2015-03-21-teach-girlfriend-html-css.md deleted file mode 100644 index 662eeb6c8a4..00000000000 --- a/_posts/2015-03-21-teach-girlfriend-html-css.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -layout: post -title: "Teach Girlfriend to make a Web Pages like Zhihu" -date: 2015-03-21 15:14:54 -categories: Bootstrap -tags: BootStrap HTML CSS Zhihu ---- - -* content -{:toc} - -My girlfriend is learning html and css recently. I told her to follow the video. Here, I recommend a video in Chinese that suite for fresh learners. The name of course is Getting HTML web pages dev in 8 hours ( 8小时学会HTML网页开发 ) . I watched this video at very first time. The teacher named Eighteen Swallows ( 燕十八 ) . He teached very clear even himself being on screen to show what is float or box-model. - - - - - - -Here is the site of the free online video. -[http://study.163.com/course/courseMain.htm?courseId=432008](http://study.163.com/course/courseMain.htm?courseId=432008) - -I did the detailed note about this course. You can read here: [http://wenku.baidu.com/view/aa136099f90f76c660371a35](http://wenku.baidu.com/view/aa136099f90f76c660371a35) - -Now I'll tell something happend today. She has watched the video above, and knows a little on BootStrap. So she wants to do some pages with BootStrap. - -We determined to copy the pages on [Zhihu](http://zhihu.com) -Like this: - - -I teached her [Boostrap](http://www.bootcss.com/) this afternoon. She has already got to read the docs and can code simple statics pages. - -She seems to enjoy Web Pages Design. Though she used to be a Graphic Designer. And now, she really works hard. - -At last I'll show the works that we did together in 2 hours. It's unfinished. I guess she will do it later. It's a nice weekend, isn't it? - -[to see Copy Zhihu, click here](http://gaohaoyang.github.io/test/bootstrap-zhihu/) - -screenshot of copy Zhihu: - diff --git a/_posts/2015-03-26-sublimeLinter.md b/_posts/2015-03-26-sublimeLinter.md deleted file mode 100644 index 64f46d818d2..00000000000 --- a/_posts/2015-03-26-sublimeLinter.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -layout: post -title: "代码校验工具 SublimeLinter 的安装与使用" -date: 2015-03-26 15:14:54 -categories: Sublime -tags: Sublime jshint csslint ---- - -* content -{:toc} - -本文我将讲述一下 SublimeLinter 的安装过程。其组件 jshint 的安装与使用。其组件 csslint 的安装与使用。我将基于 [Sublime Text 3](http://sublimetext.com/3) 来安装。使用 Sublime Text 2 的用户阅读本文是没有帮助的。 - -SublimeLinter 是 Sublime 的插件，它的作用是检查代码语法是否有错误，并提示。习惯了 IDE 下写代码的人一定需要一款在 Sublime 上类似的语法检查工具。下面我们开始。 - - - - - -## 安装 SublimeLinter - -如同其他插件一样使用 Package Control 来安装。 - -1. 按下 `Ctrl+Shift+p` 进入 Command Palette -2. 输入`install`进入 Package Control: Install Package -3. 输入`SublimeLinter`。进行安装. - - - -安装完成后可以看到这样一段话： - -``` -Welcome to SublimeLinter, a linter framework for Sublime Text 3. - - * * * IMPORTANT! * * * - - SublimeLinter 3 is NOT a drop-in replacement for - earlier versions. - - Linters *NOT* included with SublimeLinter 3, - they must be installed separately. - - The settings are different. - - * * * READ THE DOCS! * * * - - Otherwise you will never know how to install linters, nor will - you know about all of the great new features in SublimeLinter 3. - - For complete documentation on how to install and use SublimeLinter, - please see: - - http://www.sublimelinter.com -``` - -可以看到具体的 Linters 组件**不**被包含在 SublimeLinter 3 中，所以我们要额外独立安装组件。 -可以针对不同的语言安装不同的组件。 - -## JavaScript 语法检查 - -SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件，实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的。 - ---- - -### 安装 SublimeLinter-jshint - -为了让 JavaScript 代码有语法检查，我们安装 SublimeLinter-jshint -同样的方法，我们安装 SublimeLinter-jshint - -1. 按下 `Ctrl+Shift+p` 进入 Command Palette -2. 输入`install`进入 Package Control: Install Package -3. 输入`SublimeLinter-jshint`。进行安装. - -如下图 - - - -安装完成后我们可以看到下面的一段话 - -``` -SublimeLinter-jshint - ------------------------------- - This linter plugin for SublimeLinter provides an interface to jshint. - - ** IMPORTANT! ** - - Before this plugin will activate, you *must* - follow the installation instructions here: - - https://github.com/SublimeLinter/SublimeLinter-jshint -``` - -### 安装 nodeJS 和 jshint - -在插件开始工作之前，我们必须再看一下上述插件的[安装说明](https://github.com/SublimeLinter/SublimeLinter-jshint) -通过 [SublimeLinter-jshint 的说明](https://github.com/SublimeLinter/SublimeLinter-jshint) 我们可以看到，这个组件依赖于 nodeJS 下的 jshint，所以我们安装 nodeJS 环境和 nodeJS 下的 jshint。 - -1. 安装 [Node.js](https://nodejs.org/) -2. 通过 npm 安装`jshint` - -在命令行下输入如下代码，完成安装 - - npm install -g jshint - -安装完成后命令行中出现如下的信息 - -``` -C:\Users\Administrator\AppData\Roaming\npm\jshint -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint\bin\jshint -jshint@2.6.3 C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint -├── strip-json-comments@1.0.2 -├── underscore@1.6.0 -├── exit@0.1.2 -├── shelljs@0.3.0 -├── console-browserify@1.1.0 (date-now@0.1.4) -├── htmlparser2@3.8.2 (domelementtype@1.3.0, entities@1.0.0, domhandler@2.3.0, readable-stream@1.1.13, domutils@1.5.1) -├── minimatch@1.0.0 (sigmund@1.0.0, lru-cache@2.5.0) -└── cli@0.6.6 (glob@3.2.11) -``` - -可以查看 jshint 版本，已确认安装完成。 - -``` -C:\Users\Administrator>jshint -v -jshint v2.6.3 -``` - -现在，恭喜你，我们使用 Sublime 编辑 JavaScript 文件，就会有语法检查了！ - -在编辑过程中，会有如下提示 - - - -点击提示点后，Sublime 状态栏也会有相应的说明 - - - -## css 语法检查 - -与 jshint 同理，SublimeLinter-csslint 也是基于 nodeJS 下的 csslint 的插件，实际上 SublimeLinter-csslint 调用了 nodeJS 中 csslint 的接口来进行语法检查的。 - ---- - -### 安装 SublimeLinter-csslint - -同样的方法。 - -1. 按下 `Ctrl+Shift+p` 进入 Command Palette -2. 输入`install`进入 Package Control: Install Package -3. 输入`SublimeLinter-csslint`。进行安装. - -如下图 - - - -安装完成后我们可以看到下面的一段话 - -``` -SublimeLinter-csslint -------------------------------- -This linter plugin for SublimeLinter provides an interface to csslint. - -** IMPORTANT! ** - -Before this plugin will activate, you *must* -follow the installation instructions here: - -https://github.com/SublimeLinter/SublimeLinter-csslint -``` - -在使用插件之前，必须遵循上述网址中的[安装说明](https://github.com/SublimeLinter/SublimeLinter-csslint) - -### 在 nodeJS 下安装 csslint - -进入上述的 GitHub 地址，csslint 的说明页。我们知道了和 jshint 一样，csslint 也是基于 nodeJS 下的 csslint 来使用的。 - -这里安装 nodeJS 过程省略。 -只需用 npm 安装 csslint 即可。 - -在命令行中输入 - -``` -npm install -g csslint -``` - -安装完成后命令行中出现如下的信息 - -``` -C:\Users\Administrator\AppData\Roaming\npm\csslint -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint\cli.js -csslint@0.10.0 C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint -└── parserlib@0.2.5 -``` - -可以查看 csslint 版本，已确认安装完成。 - -``` -C:\Users\Administrator>csslint --version -v0.10.0 -``` - -现在，恭喜你，我们使用 Sublime 编辑 css 文件，就会有语法检查了！ - -在编辑过程中，会有如下提示 - - - -点击提示点后，Sublime 状态栏也会有相应的说明 - - diff --git a/_posts/2015-04-06-arrays-similar.md b/_posts/2015-04-06-arrays-similar.md deleted file mode 100644 index dd1757199f5..00000000000 --- a/_posts/2015-04-06-arrays-similar.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -layout: post -title: "判断两个数组是否相似 (arraysSimilar)" -date: 2015-04-06 15:14:54 -categories: JavaScript -tags: JavaScript Array 算法 慕课网 ---- - -* content -{:toc} - -## 题目 - -题目来自 [慕课网 JavaScript 深入浅出 1-6 编程练习](http://imooc.com/code/5760) - -请在 index.html 文件中，编写 arraysSimilar 函数，实现判断传入的两个数组是否相似。具体需求： - -1. 数组中的成员类型相同，顺序可以不同。例如 [1, true] 与 [false, 2] 是相似的。 -2. 数组的长度一致。 -3. 类型的判断范围，需要区分: String, Boolean, Number, undefined, null, 函数, 日期, window. - - - - - -当以上全部满足，则返回**"判定结果:通过"**，否则返回**"判定结果:不通过"**。 - -题目给出了 index.html 如下： - -```html - - - - -` 标签。 -nowrap |文本不会换行，文本会在在同一行上继续，直到遇到 `
` 标签为止。 -pre-wrap |保留空白符序列，但是正常地进行换行。 -pre-line |合并空白符序列，但是保留换行符。 -inherit |规定应该从父元素继承 white-space 属性的值。 - - -### `@font-face` - -**CSS3 @font-face 规则** -在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。 -通过 CSS3，web 设计师可以使用他们喜欢的任意字体。 -当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。 -您“自己的”的字体是在 CSS3 @font-face 规则中定义的。 - -注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。 - -**使用您需要的字体** -在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。 -如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)： - -**实例** - -```css -@font-face { - font-family: myFirstFont; - src: url('Sansation_Light.ttf'), - url('Sansation_Light.eot'); /* IE9+ */ -} -div { - font-family: myFirstFont; -} -``` - -**CSS3 字体描述符** - -下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符： - -描述符 |值 |描述 -font-family |name |必需。规定字体的名称。 -src |URL |必需。定义字体文件的 URL。 -font-stretch |normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded|可选。定义如何拉伸字体。默认是 "normal"。 -font-style|ormal
italic
oblique|可选。定义字体的样式。默认是 "normal"。 -font-weight|normal
bold
100
200
300
400
500
600
700
800
900|选。定义字体的粗细。默认是 "normal"。 -unicode-range |unicode-range |可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 - - -## 深入了解行高属性 - -[参考：深入了解css的行高Line Height属性](http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html) - -一般来说，设置行高为`值：纯数字`是最理想的方式，因为其会随着对应的 `font-size` 而缩放。 - - -## 盒模型及定位 - -### 已知宽度的div居中 - -* 用两种方法来实现一个背景色为红色、宽度为960px的在浏览器中居中 - -我的方法一： - -使用 `margin：0 auto;` - -html文件 - -```html - - - - -Document - - - -aaa- - -``` - -css文件 - -```css -.center { - width: 960px; - margin: 0 auto; - background-color: red; -} -``` - -方法二： - -绝对定位，左边距离 body 50%，`margin-left: -480px` - -```css -.center { - width: 960px; - background-color: red; - position: absolute; - left: 50%; - margin-left: -480px; -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/task0001-2.html) - -#### 对于居中的补充 - -参考自 [学习CSS布局](http://zh.learnlayout.com/)。 - -像下面这样写css代码，使用 `max-width` 替代 `width` 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。 - -有效的避免了如下问题： -当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。 - -```css -#main { - max-width: 600px; - margin: 0 auto; -} -``` - -* [CSS布局奇淫技巧之--各种居中](http://www.cnblogs.com/2050/p/3392803.html) - - -### 早期css滑动门 - -* 有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用 border-radius 的情况下实现一个可复用的高度和宽度都自适应的圆角矩形 -示例  - -这道题我一开始不会做，查阅了资料，发现这就是所谓的 css 滑动门的应用。[妙味云课堂之css：滑动门、圆角、css精灵](http://www.bkjia.com/webzh/759711.html) -使用三层嵌套，或者四层嵌套的 `div`，通过背景图定位等方式可以实现。 - - -### 左侧固定右侧自适应宽度的两列布局 - -* 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化  - -我的方法一： - -不使用浮动，使用绝对定位，将左上角的块放好位置，右边的块设置`margin-left` - -html 文件： - -```html - - - - -layout - - - ---DIV-A-DIV-B-DIV-C- - -``` - -css 文件： - -```css -.row { - position: relative; -} -.left { - width: 100px; - height: 100px; - background-color: red; - position: absolute; - top: 0; - left: 0; -} -.right { - height: 100px; - background-color: blue; - margin-left: 100px; -} -.bottom { - height: 100px; - background-color: yellow; -} -``` - -方法二： - -使用浮动，左边的块使用浮动，右边的块使用`margin-left` - -```css -.left { - width: 100px; - height: 100px; - background-color: red; - float: left; -} -.right { - height: 100px; - background-color: blue; - margin-left: 100px; -} -.bottom { - height: 100px; - background-color: yellow; -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/task0001-6-3.html) - - -**补充：** - -看完了后面的 BFC 之后，本题和下一题都可以用另一种方法了 -总之我已经震惊了！太爽了！有没有！ - -html - -```html - - - - -使用 BFC 进行两列布局 - - - -DIV-A-DIV-B-DIV-C- - -``` - -css - -```css -.left{ - width: 100px; - height: 100px; - background-color: blue; - float: left; -} -.right{ - height: 100px; - background-color: yellow; - overflow: hidden; -} -.bottom{ - height: 100px; - background-color: red; -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/two-col-layout-with-BFC.html) - - -### 双飞翼布局 - -* 用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化 - -原题中参考资料 [双飞翼布局](http://www.imooc.com/wenda/detail/254035) - -```html - - - - -Flying Swing Layout - - - --- - -``` - -css - -```css -.bd { - - /*padding: 0 190px;*/ -} -.main { - float: left; - width: 100%; - background-color: #aaa; -} -.main-wrap { - margin: 0 190px; -} -.sub { - float: left; - width: 190px; - margin-left: -100%; - background-color: blue; - /*position: relative; - left: -190px;*/ -} -.extra { - float: left; - width: 190px; - margin-left: -190px; - background-color: yellow; - /*position: relative; - right: -190px;*/ -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/task0001-6-4.html) - - -**补充：** - -使用 BFC 的另一种方法，我再一次震惊！ - -代码超级简单！ - -html - -```html - - - - -----Flying Swing Layout
---Flying Swing Layout
- left ---Flying Swing Layout
- right -flying-Swing-BFC - - - -left-right-- flying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.html -- - - -``` - -css - -```css -.left{ - width: 100px; - background-color: red; - float: left; -} -.right{ - width: 200px; - background-color: blue; - float: right; -} -.main{ - background-color: #eee; - overflow: hidden; -} -``` -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/flying-Swing-BFC.html) - - -### 浮动布局 - -* 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化  - -这个题我觉的直接将每一个块浮动起来就好了，不知我理解的对不对。 - -html文件 - -```html - - - - -Document - - - - - - - - - - - - - - -``` - -css文件 - -```css -body { - background-color: red; -} -div { - width: 150px; - height: 100px; - margin: 10px; - float: left; - background-color: blue; -} -``` - -[Demo](file:///E:/GitWorkSpace/baidu-ife-practice/task0001/task0001-6-5.html) - - -### 清除浮动/闭合浮动 - -参考自 [那些年我们一起清除过的浮动 by 一丝冰凉](http://www.iyunlu.com/view/css-xhtml/55.html) - -1. 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left \| right \| both \| none； -2. 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 - -我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，设置clear：both清除浮动并不能解决warp高度塌陷的问题。 - -正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（**高度塌陷**）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 - -最后一丝姐给了两个精益求精方案，我觉得方案一更易于理解，这里实践一下： - -[闭合浮动的Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/close-float.html) - -下面是源码 - -html - -```html - - - - -Document - - - -----left
-Content or Something-right-Row2- - -``` - -css - -```css -.row { - border: 1px solid red; -} -.clearfix:after { - content: "\200B"; - display: block; - height: 0; - clear: both; -} -.clearfix { - *zoom: 1; -} -.left { - width: 200px; - float: left; - background-color: #eee; -} -.right { - width: 200px; - float: right; - background-color: #eee; -} -.row2 { - width: 600px; - height: 50px; - background-color: #aaa; -} -``` - -其中`*zoom: 1`是为了触发`hasLayout` - - -还有另一种解决方案！ - -参考自：[清除浮动（clearfix hack）](http://zh.learnlayout.com/clearfix.html) - -直接使用，如下代码即可 - -```css -.clearfix{ - overflow: auto; - zoom: 1; -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/close-float-2.html) - -(实际上，我看完后面的资料，再翻到这里就明白了！正是使用了BFC原理！！！！！！！) - - -**但是今天遇到一个坑！** - -如果使用了 `over-flow`，在后面如果有元素要绝对布局在父元素的外面的，意思就是出现 `top`, `bottom`, `left`, `right` 的值为负值时，就会出现看不到，或者滚动条的问题！ - -若是有这种要求，我觉得还是用一丝姐姐的解决方案比较好。 - -**参考** - -* [清除浮动的几种方法](http://zfengqi.me/?p=87) - - -### `box-sizing` - -当你设置一个元素为 `box-sizing: border-box;` 时，此元素的内边距和边框不再会增加它的宽度。 - -他们的内边距和边框都是向内的挤压的。支持IE8+，需要加浏览器内核。 - -```css -.simple { - width: 500px; - margin: 20px auto; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -``` - - -### 响应式布局 - -媒体查询 - -* [MDN CSS媒体查询](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries) -* [媒体查询-学习CSS布局](http://zh.learnlayout.com/media-queries.html) - - `@media screen and (min-width: 500px) and (max-width: 800px) { ... }` - -* [An Introduction to Meta Viewport and @viewport](https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/) - - -### 多列布局 - -* [column](http://zh.learnlayout.com/column.html) - - -### BFC 和 IE 的 hasLayout - -* [BFC和IE的hasLayout](http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html) -* [Block Formatting Context 的几大用处](http://outofmemory.cn/wr/?u=http%3A%2F%2Fkkeys.me%2Fpost%2F68547473290) - -看完这个资料后我震惊了！竟然可以这么玩儿！ -我将本文之前提到的两列布局，双飞翼布局又重新写了一遍！太爽了！代码超级简洁！ - -**Block Formatting Context 的几大用处：** - -1. 防止 margin 折叠 -1. 清除float -1. 不会环绕float元素 - -相关资料 - -* [视觉格式化模型(visual formatting model)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Visual_formatting_model) -* [块格式化上下文(block formatting context)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Block_formatting_context) - - -### `div` 三列等高 - -[纯CSS实现三列DIV等高布局](http://show.sysu.edu.cn/?action-blogdetail-uid-2383-id-5040) - -最关键的地方有3句： - -最外层div设置一个溢出隐藏 - -```css -#wrap { - overflow:hidden; -} -``` - -每一个子块设置 padding 和 margin - -```css -#left,#center,#right{ - margin-bottom:-10000px; - padding-bottom:10000px; -} -``` - -overflow:hidden; '隐藏溢出。如果内容溢出wrap层，则不显示。 - -margin-bottom:-10000px; '底部边距-10000px。 -padding-bottom:10000px; '底部填充10000px。 -上面这两句能够实现的效果就是，产生10000px的填充，然后用负的边距把它给抵销掉。 - - -### 去除inline-block元素间间距 - -一开始我不知道是因为使用了 `display: inline-block` 会有间距。后来查找资料找到了相关的方案。 - -* [去除inline-block元素间间距的N种方法](http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/) -* [Fighting the Space Between Inline Block Elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) - -真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。 -这种表现是符合规范的应该有的表现。 - -解决方法有很多，上述博文中提到的有： - -1. 移除空格 -2. 使用 `margin` 负值 -3. 取消闭合标签 -4. 使用 `font-size: 0` -5. 使用 `letter-spacing` -6. 使用 `word-spacing` -7. 其他 - -我觉得使用 4 `font-size: 0` 比较好，对别的元素影响最小。代码如下：在 `a` 的外层将字体尺寸设为 0，载对内层的 `a` 重新设置字体大小，即可。 - -```css -nav { - font-size: 0; -} -nav a { - font-size: 16px; -} -``` - - -## 最终作品 - -* [在线Demo](http://gaohaoyang.github.io/ife/task/task0001/work/Gaohaoyang/index.html) -* [源代码](https://github.com/Gaohaoyang/ife/tree/master/task/task0001/work/Gaohaoyang) - - -## 参考资料 - -* [HTML、CSS的代码规范](https://github.com/ecomfe/spec) 自己要试着改变一些代码风格了，规范化！ -* [顾轶灵:Web语义化](http://www.zhihu.com/question/20455165) -我看他回答最后的举例的Sildes做的非常好，可以经常看看。[Semantic HTML](http://justineo.github.io/slideshows/semantic-html/)。他的其他Slides也做的非常好，很喜欢这种风格！ -* [CSS命名规范@W3C Funs](http://www.w3cfuns.com/blog-5445898-5398950.html) 起名不再困难！ -* [点击阅读: CSS浏览器兼容性列表-维基百科](点击阅读: CSS浏览器兼容性列表) 类似的我想到了 [Can I Use](http://caniuse.com/)，Can I Use 包含的更多，包括 HTML5, CSS SVG, JS API 等。 - - -* [学习CSS布局](http://zh.learnlayout.com/) -* [Media Queries](http://mediaqueri.es/) -* [使用CSS渐变](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients) -* [CSS3 Gradient](http://www.w3cplus.com/content/css3-gradient) -* [CSS渐变生成器](http://www.colorzilla.com/gradient-editor/) diff --git a/_posts/2015-04-22-baidu-ife-2-javascript.md b/_posts/2015-04-22-baidu-ife-2-javascript.md deleted file mode 100644 index 5f50a9826eb..00000000000 --- a/_posts/2015-04-22-baidu-ife-2-javascript.md +++ /dev/null @@ -1,1586 +0,0 @@ ---- -layout: post -title: "百度Web前端技术学院(2)-JavaScript 基础" -date: 2015-04-22 19:06:05 -categories: JavaScript -tags: Baidu ife JavaScript 正则 Regular ---- - -* content -{:toc} - -百度前端学院的第二次任务笔记，JavaScript 基础。主要有JavaScript的定义，数据类型，对象，数组，字符串，正则表达式，DOM，事件，BOM，Ajax 等知识。 - - - - - -## 任务 - -掌握JavaScript基础知识，能够使用JavaScript编写一些复杂度不大的交互功能。 - -**任务：** [JavaScript基础](https://github.com/Gaohaoyang/ife/tree/master/task/task0002) - -做完任务一的时候深深地感觉到自己的基础非常的薄弱，在这里再次感谢一下百度前端技术学院，做任务的时候深刻理解了自己平时掌握不牢固的内容，比如浮动、BFC、等高布局等。继续加油吧！ - - -像上一篇文章一样，写些东西记录一下。 - - -## 第一个页面交互 - -按照任务中的代码，在IE8下提示：`对象不支持“addEventListener”属性或方法` -我猜是IE8浏览器没有这个方法吧。 - -参考资料：[JavaScript 指南-MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide) - -### 了解JavaScript是什么 - -[来自MDN的解释](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/JavaScript_Overview#What_is_JavaScript.3F) - -> JavaScript 是一种跨平台，面向对象的脚本语言。作为一种小巧且轻量级的语言，JavaScript 无意于独立运行，而是被设计为可以轻易嵌入到其它的产品和应用中，比如 Web 浏览器。在宿主环境中，JavaScript 可以被连接到环境中的对象之上，以提供对其的编程控制。 -> -> 核心的 JavaScript 中包含有一组核心的对象，包括 Array，Date 和 Math，以及一组核心的语言要素，包括操作符，控制结构和语句。出于多种目的，可以通过为其增补附加的对象，对核心 JavaScript 加以扩展；例如： -> -> * 客户端 JavaScript 提供了用于控制浏览器（Navigator 或者其它浏览器）以及其中的文档对象模型（DOM）的对象，从而扩展了核心 JavaScript。例如，客户端扩展允许应用程序在 HTML 的表单中加入元素，以便响应用户事件，比如鼠标点击，表单输入和页面导航。 -> * 服务器端 JavaScript 提供了服务于在服务器上运行 JavaScript 的对象，从而扩展了核心 JavaScript。例如，服务器端扩展可以允许应用程序访问关系型数据库，在应用程序的不同调用间提供信息的连续性，甚至于处理服务器之上的文件。 -> ->借由 JavaScript 的 LiveConnect 功能，您可以让 Java 和 JavaScript 间实现通讯。从 JavaScript 中，您可以创建 Java 对象并访问它们的公共方法和域。从 Java 中，也可以访问 JavaScript 的对象，属性和方法。 -> ->Netscape 发明了 JavaScript 并将 JavaScript 首先用于 Netscape 浏览器中。 - - -### 如何在 HTML 页面加载 JavaScript 代码 - -使用 ` - - -