1. README.md
    1. CSS-2-properties.txt
    1. dom.html
    2. fj.js
    1. events.html
    1. flex-layouts.html
    2. 三列布局-双飞翼布局.html
    3. 三列布局-圣杯布局.html
    4. 三列布局.html
    5. 内联居中.html
    6. 内联居中2.html
    7. 单列居中.html
    8. 双列布局.html
    9. 双列布局2.html
      1. resume.css
      1. resumefont.eot
      2. resumefont.svg
      3. resumefont.ttf
      4. resumefont.woff
      1. background.png
      2. map.jpg
      3. sprite.png
    1. resume.html
    2. 苹果导航-background.html
    3. 苹果导航-map.html
    4. 苹果导航-sprite.html
      1. multi-level-nav.css
    1. multi-level-nav.html

site: http://csy347.coding.io

lesson7-CSS布局

  • 单列布局
  • 双列布局
  • 三列布局
  • flex布局

lesson8-navigate/resume

苹果导航栏
  • 苹果导航-map : 通过<area> shape="rect" 来确定链接的位置

  • 苹果导航-background : 通过设置背景图片来实现效果 (渐变背景为一像素宽度图片横向平铺实现)

  • 苹果导航-sprite : 通过css的雪碧技术,将背景图片整合到一张图片中,用position-position来确定位置

简历
  • viewport
  • @font-face
  • @media 媒体查询
multi-level-nav
  • 优雅降级: IE7+
  • css3: transition transform 标准浏览器 IE10 chrome firefox safari
  • prefixer: -webkit- -moz- -ms- -o-