前天根据网页效果图以及源代码，自己摸索，对照源代码，把一份resume的网页勉强写完。整个页面分为header，left，right&footer 四个大的div。由于有源代码做参照，理解深度有效。因此昨天抛弃源代码，全凭效果图自己摸索实现代码。
本次的网页是一个“个人主页”式的静态界面。同样可以把页面分为header，main，footer三块，main里面可以再分为left 和 right两部分：
首先讲header div里面的坑：
（1）header div 分为2块，其中一块是4个 小块排成一排列，从效果图上推测应该是链接的形式出现，另一块则是文本形式。
a. 4个小div 在header div 里面居中排成一排：
给4个div－inline 设置样式：display：inline－block；实现4个div 排列在一排的效果
在header div 样式里设置：text－align：center；给4个小div 统一归类class＝“inline”，在inline样式里设置：margin：0 auto，其含义是上下外边距为0，左右外边距自动调节即可。实现居中的效果。详细教程可参考：http://www.divcss5.com/rumen/r622.shtml
b. 其次是第二块中的一段文本：
文本处于4个 inline div 的下方，其外观以及功能明显与第一排的div 不同。于是此时对第二行的文本定义一个新的class＝“second－line”，使用<p>or <div>显示的差别不大，因为它的样式我在css里面对second－line设置即可。
c. 对于header div要求始终显示在页面上方，不随滚动条下滑而消失在视线。此时要对header设置样式为position：fixed ，相当于固定在页面上，它对于往后其余的div相当于透明，往后的div 还是从body的top计算起始位置。另外设置z－index：1，可以实现在页面实现方向的最上一层。
未完，待续
2016.6.24下午于Frank办公室