Skip to content

Commit 84a3abd

Browse files
codingstarcodingstar
committed
add task3
1 parent 24eec08 commit 84a3abd

3 files changed

Lines changed: 33 additions & 5 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.0.0",
44
"private": true,
55
"hexo": {
6-
"version": "3.1.1"
6+
"version": "3.2.0"
77
},
88
"dependencies": {
99
"hexo": "^3.1.1",
@@ -17,4 +17,4 @@
1717
"hexo-renderer-stylus": "^0.2.0",
1818
"hexo-server": "^0.1.2"
1919
}
20-
}
20+
}

‎source/_posts/hexo-with-github.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,16 @@ Hexo是一种静态博客程序，初次使用，具体效果还不确定，但
2222
可以用Git Bash或终端输入以下命令，#后的为注释。
2323
``` bash
2424
$ npm install hexo -g #全局安装hexo，有些资料写的是npm install hexo-cli -g，应该按这个来，不过没试过
25+
```
26+
[更新于20160328]在mac上又试了一次，最新的hexo应该用`npm install hexo-cli -g` 这个命令
27+
``` bash
2528
$ npm install hexo-deployer-git --save #安装git部署插件，hexo3.0开始必须要这样，不然无法部署
2629
```
2730

2831
cd到你想放博客的文件夹下，比如`E:/Hexo`
2932
``` bash
3033
$ hexo init #初始化，然后该文件夹下就会有一系列的文件
31-
$ npm install #安装依赖包，这步之前忘记过
34+
$ npm install #安装依赖包，这步之前忘记过 ［updated 20160328］移到别的地方后也要执行这一步！
3235
```
3336

3437
然后就可以本地查看你的博客啦~
@@ -41,7 +44,7 @@ cd到你想放博客的文件夹下，比如`E:/Hexo`
4144
## 部署到Github
4245
编辑`E:/Hexo`下的`_config.yml`文件，在文件最下方修改`deploy:`部分为
4346
``` bash
44-
deploy:
47+
deploy:
4548
type: git
4649
repository: git@github.com:codingstar/codingstar.github.io.git
4750
branch: master
@@ -74,4 +77,4 @@ cd到你想放博客的文件夹下，比如`E:/Hexo`
7477
1、[使用Hexo搭建个人博客(基于hexo3.0)](http://opiece.me/2015/04/09/hexo-guide/)
7578
2、[升级hexo3遇到的坑](http://ningban.github.io/2015/03/19/hexo3-is-awesome/)
7679
3、[Hexo搭建Github静态博客](http://www.cnblogs.com/zhcncn/p/4097881.html)
77-
4、[如何搭建一个独立博客——简明Github Pages与Hexo教程](http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/)
80+
4、[如何搭建一个独立博客——简明Github Pages与Hexo教程](http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/)

‎source/_posts/ife-task3.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
title: ife-2016s task3笔记
2+
date: 2016-03-28 20:46:51
3+
tags: [前端,总结,技术]
4+
---
5+
6+
## 题目要求 [传送门](http://ife.baidu.com/task/detail?taskId=3)
7+
实现三栏式布局，要求左右两宽度固定，中间一栏填充父元素宽度
8+
9+
## 关键实现方法
10+
页面结构主要是由一个wrap包裹住所有模块，内含left、right、middle三个部分，其中left、right的float属性分别为left、right，middle的html代码一定要写在最后。然后固定左右两部分的宽度，设置中间栏的左右margin，差不多就可以完成三栏式的基本布局了。
11+
<!--more-->
12+
其次就是一些细节的修改和调整了。
13+
注意到左右两栏都是浮动的，因此不占用元素空间，父元素的高度就是中间栏的高度，这显然不行。因此，可以对middle添加伪元素`.middle:after`（注：参考资料1），用`clear:both`清除浮动。这样父元素的高度就是三栏的最大高度，但是中间一栏就不会是本身的高度，而会与最高的一致了。
14+
因此，本来是不想再增加多余的html结构的，但是（暂时）只能利用一个空div标签清除浮动，实现题目中的效果了。（后来发现可以在wrap上增加`overflow:auto`，而不用增加多余的html结构也能达到这个效果！注：参考资料4）
15+
16+
## Tips
17+
1、模块之间的视觉间隔的实现方法：可以是padding，也可以是margin，在设置border的情况下，可以看到，实际显示宽度＝width＋padding。
18+
2、在不设置宽度的情况下，默认会填充父元素的宽度，此时不可以再设置`width:100%; padding:20px`，这样会造成元素过宽，撑出滚动条。
19+
3、right栏logo的间距：类似这样的同类元素的样式，可以统一先设置所有元素（如：`margin:10px 0`），然后针对特殊的元素（如头尾两个），使用伪类进行特殊处理（如：对第一个同类元素应用`:first-of-type`，使其`margin-top:0`），好酷炫的赶脚～😁
20+
21+
## 参考资料
22+
1、[伪类和伪元素的区别](https://segmentfault.com/a/1190000000484493)
23+
2、[CSS选择器](http://www.w3school.com.cn/cssref/css_selectors.asp)
24+
3、[清除浮动黑科技](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best)
25+
4、[清除浮动](http://zh.learnlayout.com/clearfix.html)

0 commit comments

Comments
 (0)