学习任务

   制作美妆网页

   网页效果图（点击查看）

   网页交互效果（点击观看）

   设计稿（点击下载）

    交互稿（点击下载）

学习目标

     加深对盒子模型的理解,  灵活使用过渡属性、变形属性的CSS样式，实现图片的动画效果

准备工作

1.使用HBuilderX新建项目。如下图所示

  在本项目当中，需要建立一个名为freshskin的文件夹，然后在文件夹中建立名为freshskin.html的网页文件，另外建立CSS文件freshskin.css，并在freshskin.html中链接使用freshskin.css文件。

2.准备好制作网页需要用到的图像、视频、字体文件等。在本项目中，所有图像放在images文件夹中，视频放在video文件夹中，使用iconfont字体图标用到的文件存放在fonts文件夹中。

在freshskin.css中，使用@font-face属性调用iconfont字体，代码如下：

@font-face {

font-family: 'iconfont';

     src:url('../fonts/iconfont.ttf');   

}

观看视频

网页素材

     点击下载

拓展训练

   京东网