在线预览地址http://ryansu.gitee.io/cv/

jsbin链接

grid布局的思路

• 设置合适的html语义化标签 比如 header aside main footer figure
• 再对容器画格子，比如body设置成grid

  body{
    display:grid;
    grid:100px 400px/ 1fr 300px 700px 1fr
  }
  

• 注: grid 布局中html元素的书写顺序与实际摆放的顺序不需要一致

常用的grid属性

对于容器

• display:grid
• grid:行高/列宽 1fr表示的是剩余空间的一份
• justify-content // 同flex
• align-items // 同flex

对于内容物

• grid-column:1 表示独占第1列; 1/5表示1-4个格子
• grid-row:2 表示独占第2行; 1/2表示占据第1行

auto 与 1fr的区别

• auto是自适应的意思
• 1fr是拿剩余所有空间的意思

最适合以下这种布局： 左边定宽，右边auto，中间拿剩余所有空间即1fr 左边定宽，右边auto，中间拿剩余所有空间即1fr

书写css的思路

• css reset
• layout ---grid配置以及响应式配置
• common css ---对body设置font
• page ---当前页面中的标签

使用icon-font

• iconfont网站上搜索关键词并添加购物车
• 将购物车的icon放进新建的项目中
• 对每个icon都可以编辑以调试大小差不多一致，还可以修改class名
• 点击Font class生成代码
• 将代码在写进项目<link rel="stylesheet" href="//at.alicdn.com/t/font_2295657_jx7j4x2e6pp.css">
• 使用之处 <span class="iconfont icon-类名"></span>

部署到gitee码云，保证访问速度

• parcel build index.html --no-minify --public-url ./