第九天到第十一天，来做一个漂亮的网站？
| 日期 | 总用时 | 学习目标 |
|---|---|---|
| 2018.08.06-2018.08.10 | 12h | 切图 |
学习目标
- 前端开发人员也要会的切图技巧
- 前端工程师必备的PS技能——切图篇
- 做一个会PS切图的前端开发
学习内容
学习笔记
预览github中的html
将github的html地址拷贝至
自动切图笔记
Photoshop CC 2018 自动切图
- 打开Photoshop CC 2018
- 打开psd
- 文件 -> 导出 -> 将图层导出到文件
- 选择存储路径，格式，输入前缀
- 勾选 透明区域 交错 裁切图层
- 运行
转换图层为指定的格式
- Photoshop CC -> 首选项（Cmd + k） -> 增效工具 -> 启用生成器
- 文件->生成->图像资源
- name.psd 相同目录会出现name.ssets目录
- 重命名图层名字加后缀，如 tilte -> title.png
- title.png 会相应的出现在 name.ssets目录
复制css
- 图层 -> 右键 -> 复制css
作业
按照如下设计图，进行页面的实现
PSD：链接: 密码: 33q7
要求：
- 代码风格符合某种编码规范
- 尽可能按照设计稿的尺寸进行实现
- 设计稿中的图片或文字素材在实现时可以不一致
- 充分应用上之前学习到的各种布局方式，尽可能几种方式都运用尝试一次，比较各种布局的适用场景
- 设计稿中下方导师介绍图片，左上角灰色底表示，鼠标hover到图片上时的效果变化。
不需要考虑兼容IE浏览器
作业实现：
参考
待深入的知识
疑问
Flag
系统的学习前端，坚持66天