第九天到第十一天，来做一个漂亮的网站？-IFE

第九天到第十一天，来做一个漂亮的网站？

日期	总用时	学习目标
2018.08.06-2018.08.10	12h	切图

学习目标

• 前端开发人员也要会的切图技巧
• 前端工程师必备的PS技能——切图篇
• 做一个会PS切图的前端开发

学习内容

• 第九天到第十一天，来做一个漂亮的网站

学习笔记

• Mooc-前端工程师必备的PS技能——切图篇
• 做一个会PS切图的前端开发

预览github中的html

将github的html地址拷贝至网站

自动切图笔记

Photoshop CC 2018 自动切图

1. 打开Photoshop CC 2018
2. 打开psd
3. 文件 -> 导出 -> 将图层导出到文件
4. 选择存储路径，格式，输入前缀
5. 勾选 透明区域 交错 裁切图层
6. 运行

转换图层为指定的格式

1. Photoshop CC -> 首选项（Cmd + k） -> 增效工具 -> 启用生成器
2. 文件->生成->图像资源
3. name.psd 相同目录会出现name.ssets目录
4. 重命名图层名字加后缀，如 tilte -> title.png
5. title.png 会相应的出现在 name.ssets目录

复制css

1. 图层 -> 右键 -> 复制css

作业

按照如下设计图，进行页面的实现

PSD：链接: https://pan.baidu.com/s/18pPf... 密码: 33q7

要求：

• 代码风格符合某种编码规范
• 尽可能按照设计稿的尺寸进行实现
• 设计稿中的图片或文字素材在实现时可以不一致
• 充分应用上之前学习到的各种布局方式，尽可能几种方式都运用尝试一次，比较各种布局的适用场景
• 设计稿中下方导师介绍图片，左上角灰色底表示，鼠标hover到图片上时的效果变化。

不需要考虑兼容IE浏览器

作业实现：
漂亮的网站

参考 blog

待深入的知识

疑问

Flag

系统的学习前端，坚持66天