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

第九天到第十一天,来做一个漂亮的网站?

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

学习目标

  • 前端开发人员也要会的切图技巧
  • 前端工程师必备的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天

阅读 572

推荐阅读
mumubin
用户专栏

木木彬的学习分享

67 人关注
60 篇文章
专栏主页
目录