百度前端学院Day4

9、10：做一个网站

目标

     将一个设计稿转化为网页，通过这个过程学习各种css知识。

 

阅读

按照设计师提供的设计稿，实现HTML页面，需要将设计稿切分成为最终在页面中呈现的一个个图片，我们一般称之为“切图”，在不同公司，切图的工作可能是不同职位做，可能是设计师、可能是重构工程师、可能是前端工程师。但不管怎样，这是我们需要掌握的一个基本功能，正常来说，小半天我们就能基本掌握这项技能了。

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

 

编码

使用VS Code等开发工具，按照如下设计图，进行页面的实现

• PSD：链接: https://pan.baidu.com/s/18pPf7E0JOEbLqLUaQyUPdg密码: 33q7
• JPG：链接: https://pan.baidu.com/s/1ZhJh-N2_CFnJKzeoI1nuiA 密码: e6th

要求：

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

 

再次阅读

将之前的材料以及自己搜索到的材料进行多次阅读，并重点阅读W3C规范

• W3C Visual formatting model
• W3C Flexbox

 

重构你的代码

根据上面的阅读学习，重构你的代码，优化代码结构及细节